FusionCharts - Linked Chart [Data String Method]

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of configureLink() method -->
<div id="indicatorDiv">Method Name: <strong>configureLink()</strong>   
   <p>Lets you configure individual or multiple drill-down levels in linked charts.</p>
   <p>The column 2D chart shown below is a linked chart. Click a data plot from the column 2D, showing the quarterly revenue for a year, to drill down to a pie chart, showing the monthly revenue for a year.</p>
	<div class="text-center">
		<div id="chart-container">FusionCharts will render here</div>
	</div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}

strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}

JavaScript

FusionCharts.ready(function () {
    var DrillDown_revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Quarterly revenue",
                    "subCaption": "Last year",
                    "xAxisName": "Quarter (Click to drill down)",
                    "yAxisName": "Revenue (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "captionFontSize": "13",
                    "subCaptionFontSize": "12"
            },

                "data": [{
                "label": "Q1",
                    "value": "1950000",
                    "link": "newchart-json-q1"
            }, {
                "label": "Q2",
                    "value": "1970000",
                    "link": "newchart-json-q2"
            }, {
                "label": "Q3",
                    "value": "1910000",
                    "link": "newchart-json-q3"
            }, {
                "label": "Q4",
                    "value": "2120000",
                    "link": "newchart-json-q4"
            }],

                "linkeddata": [{
                "id": "q1",
                    "linkedchart": {
                    "chart": {
                        "caption": "Monthly Revenue",
                            "subcaption": "First Quarter",
                            "xAxisName": "Month",
                            "yAxisName": "Revenue (In USD)",
                            "numberPrefix": "$",
                            "theme": "fint",
                            "captionFontSize": "13",
                            "subCaptionFontSize": "12"
                    },
                        "data": [{
                        "label": "Jan",
                            "value": "420000"
                    }, {
                        "label": "Feb",
...