FusionCharts API-Methods: setChartData

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/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the setChartData() method. -->
<div id="indicatorDiv">Method Name: <strong>setChartData()</strong>
    
    <p>Sets the data for a chart.</p>
    <p>From the drop-down given below, select a year, the data for which will be rendered on the chart. Click <strong>Set Data for Chart</strong> to re-render the chart with the selected data.</p>

       <div class="text-center mb-20"> Select a year:
       	<select id="year">
       	    <option value="2013">2013</option>
       	    <option value="2014">2014</option>
       	</select>   
       	
       	<button id="set_chart_data">Set Data for Chart</button>        
       </div>
        <div id="chart-container">FusionCharts will render here</div>
</div>

CSS

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

strong{
  font-weight: bold;
}

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

p {
  margin: 10px auto;
}

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

JavaScript

FusionCharts.ready(function () {
    var year_2013 = {
        "chart": {
            "caption": "Top 3 Electronic Brands in Top 3 Revenue Earning States",
                "subCaption": "2013",
                "aligncaptiontocanvas": "0",
                "yaxisname": "Statewise Sales (in %)",
                "xaxisname": "Brand",
                "numberprefix": "$",
                "showxaxispercentvalues": "1",
                "showsum": "1",
            //Custom tool-text string built using a combination of HTML and chart macro variables
            "plottooltext": "<div id='nameDiv' style='font-size: 14px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block;'>$label :</div>{br}State: <b>$seriesName</b>{br}Sales : <b>$dataValue</b>{br}Market share in $seriesName : <b>$percentValue</b>{br}Overall market share of $label: <b>$xAxisPercentValue</b>",
                "theme": "fint",
                "captionFontSize": "13",
                "subcaptionFontSize": "12"
        },
            "categories": [{
            "category": [{
                "label": "Bose"
            }, {
                "label": "Dell"
            }, {
                "label": "Apple"
            }]
        }],
            "dataset": [{
            "seriesname": "California",
                "data": [{
                "value": "335000"
            }, {
                "value": "225100"
            }, {
                "value": "164200"
            }]
        }, {
            "seriesname": "Washington",
                "data": [{
                "value": "215000"
            }, {
                "value": "198000"
            }, {
                "value": "120000"
            }]
        }, {
            "seriesname": "Nevada",
                "data": [{
                "value": "298000"
            }, {
                "value": "109300"
            }, {
                "value": "153600"
            }]
        }]
    };

    var...