Get Elements Information from JavaScript

Overview

You can retrieve information about any chart element using the functions described in this tutorial, you can also change this date using modify functions (See Changing Chart Elements from JavaScript to learn more about that).

to top

Task Information

Functions

The table below lists all functions used to retrieve data about Tasks:

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
getSelectedTaskInfo():Obj Returns the selected task data.

to top

Task Object

Task object that is returned by the functions listed above has the following structure:

Field Name Type Description
id string Task id.
name string Task name.
parentId string Parent task id.
startDate Date Object Actual start datetime.
endDate Date Object Actual end datetime.
complete integer Task progress - 0...100
isMilestone boolean True if task is a milestone.
level integer Task level (when hierarchy is set using level mode).
rowNum integer Row index. Starts from 1.
attributes Object Object that contains task custom attributes.
numChildren integer The number of the child tasks.

Samples

Get Task Information Sample

This sample shows how to get information about the selected task. We will describe the parts of this sample in details.

First of all, the chart should be embedded into the page using AnyChart.js:

<script type="text/javascript" language="javascript">
     var chart = new AnyChart('./swf/AnyGantt.swf');
     chart.width = '800';
     chart.height = '200';
     chart.setXMLFile('./anygantt.xml');
     chart.write('chartDiv');
</script>

The code above means that the chart is put into the div with 'charDiv' id and data from 'anygantt.xml' is set to it. As soon as it is done, we can add the code to retrieve the task data:

<script type="text/javascript" language="javascript">

function getInfo(taskID) {
var task=chart.getTaskInfo(taskID);

// get basic info

document.getElementById("id").innerHTML = task.id;
document.getElementById("name").innerHTML = task.name;
document.getElementById("parentId").innerHTML = task.parentId;
document.getElementById("startDate").innerHTML = task.startDate;
document.getElementById("endDate").innerHTML = task.endDate;
document.getElementById("complete").innerHTML = task.complete;
document.getElementById("isMilestone").innerHTML = task.isMilestone;
document.getElementById("level").innerHTML = task.level;
document.getElementById("rowNum").innerHTML = task.rowNum;
document.getElementById("numChildren").innerHTML = task.numChildren;

// get attributes

document.getElementById("attributeStatus").innerHTML = task.attributes.Status;
document.getElementById("attributeManager").innerHTML = task.attributes.Manager;
};
</script>

This code is attached to the button:

<input type="button" value="Get Parent 1 'task1' Info" onclick="getInfo('task1');" />

Launch the sample or take a look at it closer:

Get Selected Task Information Sample

This sample shows how to get information about the selected task.

Get Child Task Information Sample

This sample shows how to get information about the child task of the given task.

to top

Resource and Period Information

Functions

The table below lists all functions used to retrieve data about Resource and Periods:

Function Description
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 .
getSelectedResourceInfo():Obj . Returns the selected resource data.
getSelectedPeriodInfo():Obj Returns the selected period data.

to top

Resource Object

Resource object that is returned by the functions listed above has the following structure:

Field Name Type Description
id string Resource id.
name string Resource name.
rowNum integer Row index. Starts with "1"
attributes Object Object that contains resource custom attributes.
numPeriods integer The number of periods in resource.

to top

Period Object

Period object that is returned by the functions listed above has the following structure:

Field Name Type Description
id string Period id.
resourceId string Resource id to which the period belongs.
resourceName string Name of the resource to which the period belongs.
startDate Date Object Period start datetime.
endDate Date Object Period end datetime.
rowNum integer The index of the resource row. Start with "1"
attributes Object Object that contains resource custom attributes.

Samples

Get Resource Information Sample

This sample shows how to get information about the resource. We will describe the parts of this sample in details.

First of all, the chart should be embedded into the page using AnyChart.js:

<script type="text/javascript" language="javascript">
     var chart = new AnyChart('./swf/AnyGantt.swf');
     chart.width = '800';
     chart.height = '200';
     chart.setXMLFile('./anygantt.xml');
     chart.write('chartDiv');
</script>

The code above means that the chart is put into the div with 'charDiv' id and data from 'anygantt.xml' is set to it. As soon as it is done, we can add the code to retrieve the resource data:

<script type="text/javascript" language="javascript">
function getResourceInfo(resourceID) {
var resource = chart.getResourceInfo(resourceID);

// get basic data

document.getElementById("id").innerHTML = resource.id;
document.getElementById("name").innerHTML = resource.name;
document.getElementById("rowNum").innerHTML = resource.rowNum;
document.getElementById("numPeriods").innerHTML = resource.numPeriods;

// get attributes

document.getElementById("attributeStatus").innerHTML = resource.attributes.Status;
document.getElementById("attributeMeta").innerHTML = resource.attributes.Meta;
document.getElementById("attributeLocation").innerHTML = resource.attributes.Location;
};
</script>

This code is attached to the button:

<input type="button" value="Get 'res_2' Resource Info" onclick="getResourceInfo('res_2');" />

Launch the sample or take a look at it closer:

Get Period Information Sample

This sample shows how to get information about the period.

Get Period Information By Its Index Sample

This sample shows how to get information about the period by its index.

Get Selected Resource Information Sample

This sample shows how to get information about the selected resource.

Get Selected Period Information Sample

This sample shows how to get information about the selected period.

to top

Custom attributes

Task, Resource and Periods can have custom attributes that contain any additional information about them, when you retrieve the data about the task, period or resource you can access these attributes using attributes field.

To get the value of the custom attribute from the object you just need to add the dot and the name of the attribute to the attributes object.

For example, you have the task with the custom attributes defined as follows:

<task id="3" name="Normal 1" parent="2" actual_start="2008.07.11" actual_end="2008.07.14">
  
<attributes>
    
<attribute name="Status">Normal</attribute>
    
<attribute name="Manager">Mr. Collins</attribute>
    
<attribute name="Location">London</attribute>
  
</attributes>
</task>

Then you need to add this sample code to get the values:

function getCustomAttributesInfo(taskID)
{
    var task = chart.getTaskInfo(taskID);
    alert(task.attributes.Status);
    alert(task.attributes.Manager);
    alert(task.attributes.Location);
}

Again, this applies to task, resource and period object in the same way, all samples in this tutorial contain the code to get custom attributes from the objects.

to top

Get All Tasks or Periods

You can retrieve array that contain all ids of Tasks or Resources in the project. Once you have an id of a task or a resource - you can retreive information about it using functions listed and described above.

The table below lists all functions used to retrieve data about all Resources or Tasks:

Function Description
getTasksIdArray():Array Returns array with ids of all tasks in the project.
getResourcesIdArray():Array Returns array with ids of all resources in the project.

Get All Tasks Sample

This sample shows how to get information about all tasks in the project using getTasksIdArray function.

Get All Periods Sample

This sample shows how to get information about all Resources and Periods in the project using getResourcesIdArray function.

to top

Get All Tasks or Periods in XML format

You can retrieve XML string that contains Tasks or Resources in your current project with all possible changes made to task via UI or Js function in AnyGantt XML format using getDataXML function.

This function returns main data section in the following way for Project Charts:

<anygantt>
  
<project_chart>
    
<tasks>
      
<task id="" parent="" name="" actual_start="" actual_end="" baseline_start="" baseline_end="" progress="" style="">
        
<attributes>
          
<attribute name="SomeAttr1">Value1</attribute>
          
<attribute name="SomeAttr2">Value2</attribute>
        
</attributes>
      
</task>
    
</tasks>
    
<connectors>
      
<connector type="" from="" to="" />
    
</connectors>
  
</project_chart>
</anygantt>

And in the following way for Resource Charts:

<anygantt>
  
<resource_chart>
    
<resources>
      
<resource id="" parent="" name="" style="">
        
<attributes>
          
<attribute name="Attr1">Value</attribute>
        
</attributes>
      
</resource>
    
</resources>
    
<periods>
      
<period id="" resource_id="" start="" end="" style="">
        
<attributes>
          
<attribute name="Attr1">Value</attribute>
        
</attributes>
      
</period>
    
</periods>
  
</resource_chart>
</anygantt>

Which means - it returns only basic data attribute that can be changed via UI or Js functions.

Get All Data in XML Format Sample

This sample shows how to get data using getDataXML function.

 

to top