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.
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. |
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:
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. |
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:
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:
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.
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.