Interactivity in AnyGantt
- Overview
- Items Actions
- Open web page on point click - navigateToURL
- Launch an external function - call
- Custom Attributes in Actions
- Events Dispatched by AnyChart
- AnyChart External Functions
Overview
AnyGantt offers you a wide variety of options that allow to make your gantt charts really interactive:
- You can control appearance of elements depending on user action - use style states for that (described in "Appearance and Styles" section).
- You can define a set of actions that should be performed when user clicks some element on the chart. Action can open the certain web page, call an external function (JavaScript, for example).
- AnyGantt dispatches events that can be handled in an external environment (JavaScript, for example).
- External environment can call AnyGantt Functions to load data to the gantt chart or change task or periods details.
Items Actions
You can define one or several actions to be performed when user clicks some item on the chart, for example, typical action settings for a task look like shown below, it will open a page with parameters passed in URL:
<tasks>
<actions>
<action type="navigateToURL" url="http://www.anychart.com/?param={%Name}" target="_blank" />
</actions>
</tasks>
</project_chart>
There are two types of actions:
Type | Description |
---|---|
navigateToURL | Used to open certain web page, may be used to call JavaScript functions. |
call | Used to call for external functions, may be used to call JavaScript functions. |
navigateToURL
navigateToURL action allows you to open a web page or launch a JavaScript (however call action is more preferable to launch external functions), url attribute specifies an address, target - a target for the page:
<tasks>
<actions>
<action type="navigateToURL" url="http://www.anychart.com/?param={%Name}" target="_blank" />
</actions>
</tasks>
</project_chart>
This sample gantt chart will open Google in new window for the two first tasks and alert function for the third:
![]() |
call
call action type is used to launch a function in an external environment - this can be JavaScript, or .Net, or Flash - any environment that can interact with Flash Movie.
You should specify the name of a function and arguments values (if any):
<tasks>
<action type="call" function="alert">
<arg>Test Alert Function</arg>
</action>
</tasks>
</project_chart>
This sample launches "Alert" function with different default parameters for three first tasks and opens AnyChart.Com site in a new window using "window.open" function for the forth task:
![]() |
Note that we have used actions for the <action> nodes. However, there is one more way to attach an action to the element. This is done by creating an interval (single or multiple ones) subnode in <actual> or <baseline> nodes and adding actions to these intervals. The syntax is the following:
<actual>
<interval>
<actions>
<action />
</actions>
</interval>
</actual>
<baseline>
<interval>
<actions>
<action />
</actions>
</interval>
</baseline>
</task>
This is what concerns Project Gantt Chart. In case of Resources Gantt Chart we add actions to the periods the same way as we did it to the tasks.
Custom Attributes in Actions
In the sample above we've set a certain pages to be opened on point clicks, but for real world applications it is very useful to use parametrized actions.
In AnyGantt you can attach custom attributes to periods (Resources Gantt Chart), tasks or task intervals (Project Gantt Chart), that can store any additional data to be used in tooltips, labels or actions.
In the sample below we will attach custom attributes to tasks and then use them in actions attached to them.
Tasks custom attributes are defined as follows:
<attributes>
<attribute name="sport">Ski jumping</attribute>
</attributes>
</task>
Actions for all tasks are defined and parametrized as shown below:
<action type="call" function="alert">
<arg>The following keyword will be queried in Google : {%sport}</arg>
</action>
<action type="navigateToURL" url="http://www.google.com/search?q={%sport}" target="_blanc" />
</actions>
And so we get the result - two parts of Nordic combined - sport discipline at Winter Olympics 2006. When user clicks on any task (Ski jumping or cross country skiing) he sees a window called by alert function and gets to google page with the request corresponding to the selected discipline.
![]() |
You can use this technique to create your own drill down, interactive gantt charting and/or system. Pass parameters to function or web scripts and perform your application business logics actions according to data passed from the charts.
Events
When user interacts with a gantt chart AnyGantt dispatches events that can be handled in an external environment (JavaScript, for example). This events supply to external environment all available data about gantt chart elements, so it is possible to implement application logics, based on the data supplied.
Event | Description |
---|---|
taskSelect | Dispatched when task is selected. Event returns all available data about element. |
periodSelect | Dispatched when period is selected. Event returns all available data about element. |
resourceSelect | Dispatched when resource is selected. Event returns all available data about element. |
taskDeselect | Dispatched when task is deselected. |
periodDeselect | Dispatched when period is deselected. |
resourceDeselect | Dispatched when resource is deselected. |
Sample handling and a reference of data available on events dispatch can be found here:
AnyGantt External Functions
You can change the data in the chart from an external environment (JavaScript, for example) there are two basic functions that allow you do do that: setXMLFile and setData, and several special functions that can modify chart elements individually. Also you can get data about chart elements using a set of "getInformation" functions.
Function setData(xmlData) sets gantt chart configuration XML from xmlData .
Sample usage:
- Set XML as string: read description of setting XML as String
Function setXMLFile(xmlPath) sets the path to file with AnyGantt XML.
Sample usage:
- Setting different files to gantt chart: how to change XML file at a run-time
Modify chart elements functions
Using the following functions you can modify individual elements of the chart:
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. |
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. |
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. |
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. |
Select Functions | |
selectTask(taskID:String) | Selects the given task. |
selectPeriod(periodID:String) | Selects the given period. |
selectResource(resourceID:String) | Selects the given resource.. |
- Read more in Changing Chart Elements from JavaScript
Get Information functions
Using the following functions you get data about elements of the chart:
Function | Description |
---|---|
getTaskInfo(taskID:String):Obj | Returns task data by given task id . |
getTaskChild(taskID:String, index:int):Obj | Returns data about subtask. taskID - parent task id index - zero based subtask index |
getResourceInfo(resourceID:String):Obj | Returns resource data by the given resource id. |
getPeriodInfoAt(resourceID:String,index:int):Obj | Returns resource period data . resourceID - resource id index - zero based period index |
getPeriodInfo(periodID:string):Obj | Returns period data by the given period id . |
getSelectedTaskInfo():Obj | Returns the selected task data. |
getSelectedPeriodInfo():Obj | Returns the selected period data. |
getSelectedResourceInfo():Obj . | Returns the selected resource data. |
- Read more in Get Elements Information from JavaScript