Get Elements Information from JavaScript
- Overview
- Task Information
- Resource and Period Information
- Custom Attributes
- Get All Tasks or Resources
- Get All Tasks or Resources in XML format
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).
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. |
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:
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:
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:
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.
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. |
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. |
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:
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:
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.
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:
<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:
{
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.
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.
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:
<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:
<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.