FusionCharts - Chart drill down using linked charts
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<!--
Drill-down: Linked Chart, data string method.
-->
JavaScript
FusionCharts.ready(function() {
var salesChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Annual Sales Summary (2010-2013)",
"subcaption": "Click on a column to drill-down",
"numberprefix": "$",
"showvalues": "0",
"bgcolor": "FFFFFF",
"xaxisname": "Year",
"plotgradientcolor": "",
"showalternatehgridcolor": "0",
"showplotborder": "0",
"divlinecolor": "CCCCCC",
"canvasborderalpha": "0"
},
"data": [{
"label": "2010",
"value": "1161000",
"link": "newchart-xml-2010Quarters",
"color": "008ee4"
},
{
"label": "2011",
"value": "1043000",
"link": "newchart-xml-2011Quarters",
"color": "6baa01"
},
{
"label": "2012",
"value": "1017000",
"link": "newchart-xml-2012Quarters",
"color": "f8bd19"
},
{
"label": "2013",
"value": "1156000",
"link": "newchart-xml-2013Quarters",
"color": "e44a00"
}
],
"linkeddata": [{
"id": "2010Quarters",
"linkedchart": {
"chart": {
"caption": "Quarterly Sales Summary (2010)",
"subcaption": "Click on a column to drill-down",
"xaxisname": "Quarter",
"yaxisname": "Sales",
"numberprefix": "$",
"showvalues": "0",
"bgcolor": "FFFFFF",
"plotgradientcolor": "",
"showalternatehgridcolor": "0",
"showplotborder": "0",
"divlinecolor": "CCCCCC",
"canvasborderalpha": "0"
},
"data": [{
"label": "Q1",
"value": "274000",
"link":...