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

to top

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:

//This script creates gantt charts on the page
// 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:

// This function will handle task click events
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.

to top