Changing Chart Elements from JavaScript

Overview

This article describes JavaScript functions that allow you to modify individual elements of the chart: tasks, resources and periods. You can modify starting and ending dates, change style, name and custom attributes values. Whenever you do any changes - you can always cancel them. Also there is an option to select an element from JavaScript, as if the user clicked on the element on the chart.

to top

Tasks

Functions

The table below lists all functions that modify tasks in Task Projects:

Function Description
Changing Task Data
updateTaskName(taskID:String, name:String) Sets task name.
updateTaskStart(taskID:String, startTime:Date) Sets task start.
updateTaskEnd(taskID:String, endTime:Date) Sets task end.
updateTaskComplete(taskID:String, complete:int) Sets task completeness .
complete - integer 0 to 100.
updateTask(taskID:String,name:String, startTime:Date,
endTime:Date,complete:int)
Sets name, start and end altogether..
switchTaskStyle(taskID:String, styleName:String) Sets task style.
updateTaskCustomAttributeValue(taskID:String,
attrName:String, value:String)
Sets task attribute value.
taskID - task id.
attrName - attribute name.
value - attribute value.

to top

Sample

In this sample all the functions used to update tasks data are shown in action:

Launch the sample or take a look at it closer:

to top

Resources

Functions

The table below lists all functions that modify resources in Resource Projects:

Changing Resource Data
updateResourceName(resourceID,name:String) Sets resource name .
switchResourceStyle(resourceID,styleName:String) Sets resource style .
updateResourceCustomAttributeValue(resourceID:String,
attrName:String,value:String)
Sets resource custom attribute value.
resourceID - resource id.
attrName - attribute name.
value - attribute value.

to top

Sample

In this sample all the functions used to update resource data are shown in action:

Launch the sample or take a look at it closer:

to top

Periods

Functions

The table below lists all functions that modify periods in Resource Projects:

Changing Period Data
updatePeriodStart(periodID:String,startTime:Date) Sets period start .
updatePeriodEnd(periodID:String,endTime:Date) Sets period end.
updatePeriod(periodID:String,startTime:Date,endTime:Date) Sets period start and end altogether.
switchPeriodStyle(periodID:String,styleName:String) Sets period style.
updatePeriodCustomAttributeValue(taskID:String,
attrName:String,value:String)
Sets period custom attibute value.
periodID - period id.
attrName - attribute name.
value - attribute value.

Sample

In this sample all the functions used to update resource data are shown in action:

Launch the sample or take a look at it closer:

to top

Commit or Cancel Changes

Whenever you modify tasks, resources or periods using JavaScript functions - you should commit or cancel changes after all necessary changes are done. This should be accomplished using commitChanges or cancelChanges functions:

Commit or Cancel Changes done by Modify Functions
commitChanges() Applies changes made by modify functions listed above.
cancelChanges() Cancels changes made by modify functions listed above.

All samples listed in this tutorial contain these functions.

to top

Select Elements

The functions listed in the table below allow you to select element on the chart, as if the user clicked the element. Select event described in Events Tutorial is fired after these functions are used.

Select Functions
selectTask(taskID:String) Selects the given task.
selectPeriod(periodID:String) Selects the given period.
selectResource(resourceID:String) Selects the given resource..

Functions are demonstrated in the samples for elements modification functions from previous sections.

to top