FusionCharts - Chart drill down linking to a different chart type
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<!--
Drill-down: Linked Chart, data string method with different chart. Configuration of different chart type is done through the salesChart.configureLink function (see bottom of the code).
-->
JavaScript
FusionCharts.ready(function () {
var salesChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
id: "myChartId",
dataSource: {
"chart": {
"caption": "Top 3 Juice Flavors",
"subcaption": "Last year",
"xaxisname": "Flavor",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"palettecolors": "#008ee4",
"canvasbgalpha": "0",
"canvasborderalpha": "0",
"useplotgradientcolor": "0",
"showplotborder": "0",
"placevaluesinside": "1",
"valuefontcolor": "#ffffff",
"captionpadding": "20",
"showaxislines": "1",
"axislinealpha": "20",
"divlinealpha": "20",
"showborder": "1",
"bgalpha": "0",
"animation": "0"
},
"data": [{
"label": "Apple",
"value": "810000",
"link": "newchart-xml-apple"
}, {
"label": "Cranberry",
"value": "620000",
"link": "newchart-xml-cranberry"
}, {
"label": "Grapes",
"value": "350000",
"link": "newchart-xml-grapes"
}],
"linkeddata": [{
"id": "apple",
"linkedchart": {
"chart": {
"caption": "Apple Juice - Quarterly Sales",
"subcaption": "Last year",
"numberprefix": "$",
"palettecolors": "#f8bd19,#e44a00,#008ee4,#33bdda,#6baa01,#583e78",
...