FusionCharts API-Methods: setJSONData

Created using FusionCharts Suite XT - www.fusioncharts.com

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 the setJSONData() method. -->
<div id="indicatorDiv">Method Name: <b>setJSONData()</b>
   
   <p>Sets chart data in the JSON data format. Click <a href="http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#setJSONData" target="_blank">here</a> to read more about the <b>setJSONData()</b> method.</p>
   <p>For this implementation, the JSON chart data changes according to the year selected.</p>
   <p>Select a year from the drop-down given below. The chart is re-rendered to reflect the data for the selected year.</p>
    
	<div class="text-center mb-20">
		<label id="label" >Select a year:
		    <select id="set_json_data">
		        <option value="lastyear">2014</option>
		        <option value="thisyear">2015</option>
		    </select>
		</label>
	</div>
  <div id="chart-container">FusionCharts will render here</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;
}
#label {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#theme-type {
    height: 25px;
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var yearlyData = {
        "lastyear": {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                    "subCaption": "Last year",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "captionFontSize": "13",
                    "subcaptionFontSize": "12",
                    "subcaptionFontBold": "0"
            },
                "data": [{
                "label": "Food",
                    "value": "28504"
            }, {
                "label": "Apparels",
                    "value": "14633"
            }, {
                "label": "Electronics",
                    "value": "10507"
            }, {
                "label": "Household",
                    "value": "4910"
            }]
        },
            "thisyear": {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                    "subCaption": "This year",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "captionFontSize": "13",
                    "subcaptionFontSize": "12",
                    "subcaptionFontBold": "0"
            },
                "data": [{
            }],
            
            "annotations":
            {
                "width": "200",
                "height": "300",
                 "autoScale": "1",
                  "groups": [
                    {
                        "id": "user-images",
                         "items": [
                                    {
                                        "id": "dyn-label",
                                        "type": "text",
                                        "fillcolor": "#cdcdcd",
                                        "font":"lato",
                                        "fontsize": "20",
                                        "text": "test message to show",
                    ...