Lowlight and dim on selection of a plot=

by Shamasis Bhattacharya

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.zune.js"></script>
<div id="chart-container"></div>
<div id="drilldown-container"></div>

CSS

body {
    margin-top: 40px;
}

#chart-container, #drilldown-container {
    display: inline-block
}

JavaScript

FusionCharts.ready(function() {
    var chart = new FusionCharts({
        renderAt: 'chart-container',
        type: 'Column2D',
        width: 600,
        height: 300,
        dataSource: {
            "chart": {
                "caption": "Global IP Traffic, 2012-2017",
                "subcaption": "Click on a column to drill-down into type of traffic",
                "yaxisname": "Total IP traffic (PetaByte per Month)",
                "formatnumberscale": "1",
                "theme": "zune",
                "showvalues": "1",
                "labeldisplay": "WRAP",
                "defaultnumberscale": "PB",
                "numberscalevalue": "1024,1024",
                "numberscaleunit": "PB,EB"
            },
            "data": [{
                "label": "2012",
                "value": "43570",
                "link": "newchart-json-2012-type"
            }, {
                "label": "2013",
                "value": "55553",
                "link": "newchart-json-2013-type"
            }, {
                "label": "2014",
                "value": "68892",
                "link": "newchart-json-2014-type"
            }, {
                "label": "2015",
                "value": "83835",
                "link": "newchart-json-2015-type"
            }, {
                "label": "2016",
                "value": "101055",
                "link": "newchart-json-2016-type"
            }, {
                "label": "2016",
                "value": "120643",
                "link": "newchart-json-2017-type"
            }],
            "linkeddata": [{
                "id": "2012-type",
                "linkedchart": {
                    "chart": {
                        "caption": "Global IP Traffic, 2012",
                        "subcaption": "By Type (PB per Month)",
                        "formatnumberscale": "1",
                        "theme": "zune",
                        "use3dlighting": "0",
                        "showvalues": "1",
   ...