FusionCharts - Linked Chart [Data String Method]

Created using FusionCharts Suite XT - www.fusioncharts.com

by Chetan Hanumantha

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/themes/fusioncharts.theme.fint.js"></script>
<!-- A sample showing the usage of linked charts through FusionCharts Linked Chart feature using data as string. Clicking on each quarter renders a linked chart to show respective quarter breakup -->

<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '450',
        height: '300',
        dataFormat: 'json',
        dataSource: {
   "chart":{
      "caption":"Quarterly revenue",
      "subCaption":"Last year (Click on columns to see details)",
      "xAxisName":"Quarter",
      "yAxisName":"Revenue",
      "numberPrefix":"$",
      "theme":"fint"
   },
   "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",
               "numberPrefix":"$",
               "theme":"fint"
            },
            "data":[
               {
                  "label":"Jan",
                  "value":"420000",
				  "link":"newchart-json-Jan"
               },
               {
                  "label":"Feb",
                  "value":"810000",
				  "link":"newchart-json-Feb"
               },
               {
                  "label":"Mar",
                  "value":"720000",
				  "link":"newchart-json-Mar"
               }
            ],
            "linkeddata":[{
			    "id":"Jan",
                "linkedchart":{
					"chart":{
						"caption":"Region Revenue",
						"subcaption":"Regions",
						"xAxisName":"Region",
						"yAxisName":"Revenue",
						"numberPrefix":"$",
						"theme":"fint",
           ...