FusionCharts API-Methods: getJSONData

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/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 getJSONData() method -->
<div id="indicatorDiv">Method Name: <strong>getJSONData()</strong>    
	<p>Fetches chart data in the JSON format. Click <a href="http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#getJSONData" target="_blank">here</a> to read more about the <strong>getJSONData</strong> method.</p>
	<p>Click <strong>Get JSON Data</strong> to retrieve the JSON chart data. The chart data is shown in a box rendered below the chart.</p>

	<div class="text-center">
	<button id="get_json_data" class="mb-20">Get JSON Data</button>

	<div id="chart-container" class="container mb-20">FusionCharts will render here.</div>
	</div>

	<pre id="json_data">Chart JSON data will be rendered here...</pre>
</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;
}
pre {
    height:200px;
    overflow:scroll;
    border:solid gray;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#get_json_data {
    height: 25px;
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var salesChart = new FusionCharts({
        type: 'msarea',
        renderAt: 'chart-container',
        width: '450',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Sales of Liquor",
                    "subCaption": "Previous week vs current week",
                    "xAxisName": "Day",
                    "yAxisName": "Sales (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "captionFontSize": "13",
                    "subCaptionFontSize": "12"
            },

                "categories": [{
                "category": [{
                    "label": "Mon"
                }, {
                    "label": "Tue"
                }, {
                    "label": "Wed"
                }, {
                    "label": "Thu"
                }, {
                    "label": "Fri"
                }, {
                    "label": "Sat"
                }, {
                    "label": "Sun"
                }]
            }],

                "dataset": [{
                "seriesname": "Previous Week",
                    "data": [{
                    "value": "13000"
                }, {
                    "value": "14500"
                }, {
                    "value": "13500"
                }, {
                    "value": "15000"
                }, {
                    "value": "15500"
                }, {
                    "value": "17650"
                }, {
                    "value": "19500"
                }]
            }, {
                "seriesname": "Current Week",
                    "data": [{
                    "value": "8400"
                }, {
                    "value": "9800"
                }, {
                    "value": "11800"
                }, {
                    "value": "14400"
                }, {
                    "value": "18800"
           ...