Making Drill-down Charts in jQuery
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.jqueryplugin.js"></script>
<script src="https://37ec0bd50491a7a1c59469c0fcb527cd3211d3e2.googledrive.com/host/0B0Oqi1QalkKRLVcyWWtVXzNod0E/toptal.js"></script>
<div id="drill-down-chart">FusionCharts will render here</div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
JavaScript
$("#drill-down-chart").insertFusionCharts({
type: 'column2d',
width: '100%',
id: "mychart",
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue for 2015",
"paletteColors": "#9EA5FC",
"xAxisName": "Quarter (Click to drill down)",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"showValues": "0",
"plotSpacePercent": "16",
"yAxisMaxValue": "2390000",
"plotToolText": "<div style='font-size: 16px; text-align: center;'>$label: $dataValue</div>",
"theme": "toptal"
},
"data": [{
"label": "Q1",
"value": "850000",
"link": "newchart-json-q1"
}, {
"label": "Q2",
"value": "2070000",
"link": "newchart-json-q2"
}, {
"label": "Q3",
"value": "1330000",
"link": "newchart-json-q3"
}, {
"label": "Q4",
"value": "2290000",
"link": "newchart-json-q4"
}],
"linkeddata": [{
"id": "q1",
"linkedchart": {
"chart": {
"caption": "Monthly Revenue",
"subcaption": "First Quarter",
"paletteColors": "#EEDA54, #A2A5FC, #41CBE3",
"labelFontSize": "16",
"valueFontSize": "14",
"xAxisName": "Month",
"yAxisName": "Revenue (In USD)",
"plotToolText": "<div style='font-size: 16px; text-align: center;'>$label: $dataValue</div>",
"theme": "toptal"
},
"data": [{
"label": "Jan",
"value": "255000"
}, {
"label": "Feb",
"value": "467500"
}, {
"label": "Mar",
"value": "127500"
}]
}
}, {
"id": "q2",
"linkedchart": {
"chart": {
"caption": "Monthly Revenue",
"subcaption": "Second Quarter",
"paletteColors": "#EEDA54, #A2A5FC, #41CBE3",
"labelFontSize": "16",
"valueFontSize": "14",
"xAxisName": "Month",
...