JavaScript Drill Down Sample

Overview

AnyChart can accept data as string with XML settings, the most convenient way to use this feature - use AnyChart JavaScript Integration Library.

The sample below demonstrates how passing data to and from AnyChart can help to create Drilldown charts, however - you should study AnyChart Dashboards to see easier way of creating chart drilldown.

We suppose that you have already studied library, or, at least Simple Chart Embedding tutorial.

We will use setData method and And point 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 Charts

We will create two charts - one will be the basic one and it will get data from XML File, then we will add handler that will accept point click events from this chart and this handler will populate second chart with a random data generated by JavaScript.

Launch the sample with Drill Down Charts: Open the Sample

Download the sample with Drill Down Charts: Download the Sample

That how we create a basic chart and define event handler for point click:

//This script creates charts on the page
// Create main chart
baseChart = new AnyChart();
// Set width and height
 baseChart.width = '100%';
baseChart.height = '300';
// Set handler for point click events
 baseChart.addEventListener('pointClick', onPointClick);
// Set Data File for main chart
 baseChart.setXMLFile('./data.xml');
//Output chart to page
 baseChart.write();

This is a function that handles point click event:

// This function will handle point click events
function onPointClick(e) {
// We've got name of the point and name of its Series from event
// e.data.name - point name
// e.data.series.name - series name
var data = getXML(e.data.Name, e.data.Series.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 and data generation function getXML is to long - you an find both of them in sample source.

to top