JavaScript Drill Down Sample
Overview
AnyGantt can accept data as string with XML settings, the most convenient way to use this feature - use AnyGantt JavaScript Integration Library.
The sample below demonstrates how passing data to and from AnyGantt can help to create Drilldown gantt charts.
We suppose that you have already studied library, or, at least Simple Gantt Chart Embedding tutorial.
We will use setData method and And click event handler, read more about them in: Set XML As String and Handle Point Events Tutorials.
Method | Parameters | Description |
---|---|---|
setData(xmlData) Returns: null |
xmlData: String - string with XML | Set chart XML as String You may call this method before write() |
addEventListener(event, handler) Returns: null |
event: String - event type handler: Function - function called when event occurs events list: "pointClick" |
Add listener to the event You may call this method before write() |
Sample Drilldown Gantt Charts
We will create two gantt charts - one will be the basic one (Project Gantt Chart) and it will get data from XML File, then we will add handler that will accept task click events from this chart and this handler will populate second chart (Resources Gantt Chart) with some data.
Launch the sample with Drill Down Gantt Charts: Open the Sample
Open the folder with Drill Down Gantt Charts: Open Folder With Sample
That how we create a basic gantt chart and define event handler for task click:
// Create main project chart
baseChart = new AnyChart();
// Set width and height
baseChart.width = '100%';
baseChart.height = '300';
// Set handler for task click events
baseChart.addEventListener('pointClick', onPointClick);
// Set Data File for main project chart
baseChart.setXMLFile('./data.xml');
//Output chart to page
baseChart.write();
This is a function that handles task click event:
function onPointClick(e) {
// We've got name of the task from event
// e.data.name - task name
var data = getXML(e.data.Name);
// Set data generated by getXML to second chart
dataChart.setData(data);
}
The integration of the second chart is just the same as basic one.