FusionCharts API-Methods: addEventListener (static)

by FusionCharts

HTML

<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<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>
<!-- Fiddle sample for the static addEventListener() method -->
<div id="indicatorDiv">Method name: <b>addEventListener()</b> (static)

<p>Listens to events across all FusionCharts instances on a page and executes custom functions when an event is triggered.</p>
<p>For this implementation, we have three pie charts rendered on the same page. When <b>Add event listener for all charts</b> is clicked, the <b>dataplotRollOver</b> event is configured for all three pie charts.</p>

<p class="text-center">
	<button id="add_lstnr">Add event listener for all charts</button>
</p>
<div class="text-center">
<div id="data1"></div>        

<div id="chart-container1" class="mb-20">Chart Container 1</div>        

<div id="chart-container2" class="mb-20">Chart Container 2</div>        

<div id="chart-container3" class="mb-20">Chart Container 3</div>
</div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}

strong{
  font-weight: bold;
}

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

p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}

#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#add_lstnr {
    height: 25px;
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var chart_1 = new FusionCharts({
        type: 'pie3d',
        renderAt: 'chart-container1',
        width: '500',
        height: '200',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Revenue Comparison",
                    "subCaption": "2012",
                    "numberPrefix": "$",
                    "theme": "fint"
            },
                "data": [{
                "label": "Food products",
                    "value": "2500"
            }, {
                "label": "Electronics",
                    "value": "2000"
            }]
        }
    });
    chart_1.render();

    var chart_2 = new FusionCharts({
        type: 'pie3d',
        renderAt: 'chart-container2',
        width: '400',
        height: '200',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Revenue Comparison",
                    "subCaption": "2013",
                    "numberPrefix": "$",
                    "theme": "fint"
            },
                "data": [{
                "label": "Food products",
                    "value": "2600"
            }, {
                "label": "Electronics",
                    "value": "1800"
            }]
        }
    });
    chart_2.render();

    var chart_3 = new FusionCharts({
        type: 'pie3d',
        renderAt: 'chart-container3',
        width: '400',
        height: '200',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Revenue Comparison",
                    "subCaption": "2014",
                    "numberPrefix": "$",
                    "theme": "fint"
            },
                "data": [{
                "label": "Food products",
                    "value": "2800"
            }, {
                "label": "Electronics",
                    "value": "2500"
            }]
        }
    });
    chart_3.render();

   ...