Interactivity in AnyGantt

Overview

AnyGantt offers you a wide variety of options that allow to make your gantt charts really interactive:

to top

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:

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

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

Interactivity - opening web page on point click - Click to see Live Chart Preview
Interactivity - opening web page on point click - Click to see Live Chart Preview

to top

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

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

Interactivity - functions call - Click to see Live Chart Preview
Interactivity - functions call - Click to see Live Chart Preview

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:

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

<task id="Task_1" name="Ski jumping" actual_start="2006.02.16 10:00" actual_end="2006.02.16 12:00">
  
<attributes>
    
<attribute name="sport">Ski jumping</attribute>
  
</attributes>
</task>

Actions for all tasks are defined and parametrized as shown below:

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

 

Interactivity - custom attributes in actions - Click to see Live Chart Preview
Interactivity - custom attributes in actions - Click to see Live Chart Preview

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.

to top

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:

to top

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:

Function setXMLFile(xmlPath) sets the path to file with AnyGantt XML.

Sample usage:

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

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.

 

to top