FusionCharts API-Methods: getChartData

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- This sample shows the usage of the getChartData() method. -->
<div id="indicatorDiv">Method Name: <strong>getChartData()</strong>

   <p>Fetches the data set for a chart, in one of the valid dataFormats. Click <a href="https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#getChartData" target="_blank">here</a> to read more about the <strong>getChartData()</strong> method.</p>
   <p>Select a data format from the drop-down shown below.</p>
   <p>Click <strong>Get Chart Data</strong>.</p>
    
     <div class="text-center mb-20">
     	   Select data format :
     	<select id="data_format">
     	    <option value="csv">CSV</option>
     	    <option value="json">JSON</option>
     	</select>     	
     	
     	<button id="get_chart_data">Get Chart Data</button>
     </div>
    
    <div id="msg" class="mb-20"> Chart data in the selected format will be displayed here.</div>
    <div id="chart-container" class="container">chart will render here.</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;
}
#data_format {
    height: 25px;
    font-size: 13px;
}
#get_chart_data {
    height: 25px;
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        type: 'line',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Total footfall in Bakersfield Central",
                    "subCaption": "Last week",
                    "xAxisName": "Day",
                    "yAxisName": "No. of Visitors",

                //Cosmetics
                "lineThickness": "2",
                    "paletteColors": "#0075c2",
                    "baseFontColor": "#333333",
                    "baseFont": "Helvetica Neue,Arial",
                    "captionFontSize": "14",
                    "subcaptionFontSize": "14",
                    "subcaptionFontBold": "0",
                    "showBorder": "0",
                    "bgColor": "#ffffff",
                    "showShadow": "0",
                    "canvasBgColor": "#ffffff",
                    "canvasBorderAlpha": "0",
                    "divlineAlpha": "100",
                    "divlineColor": "#999999",
                    "divlineThickness": "1",
                    "divLineIsDashed": "1",
                    "divLineDashLen": "1",
                    "divLineGapLen": "1",
                    "showXAxisLine": "1",
                    "xAxisLineThickness": "1",
                    "xAxisLineColor": "#999999",
                    "showAlternateHGridColor": "0"
            },
                "data": [{
                "label": "Mon",
                    "value": "15123"
            }, {
                "label": "Tue",
                    "value": "14233"
            }, {
                "label": "Wed",
                    "value": "23507"
            }, {
                "label": "Thu",
                    "value": "9110"
            }, {
                "label": "Fri",
                    "value": "15529"
            }, {
                "label": "Sat",
           ...