FusionCharts API-Methods: dataReady

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 dataReady() method -->
<div id="indicatorDiv">Method Name: <strong>dataReady()</strong>
   
   <p>Determines whether a chart will render properly with the data set on it. This includes data that is set using the <a href="https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#setChartData" target="_blank">setChartData()</a> or <a href="https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#setChartDataUrl" target="_blank">setChartDataUrl()</a> methods.</p>
   <p>For this implementation, we have a column 2D chart and a drop-down from which the user selects the data to plot on the chart. As the chart used is a single-series column 2D chart, the method is configured to show a <i>Data invalid</i> message every time multi-series data is passed to the chart.</p>

		<div class="text-center mb-20">
			<h5 class="mb-20">Select the data to plot on the column 2D chart:	</h5>		       
	        <select id="data">
	            <option value="qra">Quarterly revenue analysis-2014</option>
	            <option value="qrc">Quarterly revenue comparision-2013 and 2014</option>
	            <option value="qrfp">Quarterly revenue from food products-2014</option>
	            <option value="qrnfp">Quarterly revenue from non-food products-2014</option>
	            <option value="rcfnfp">Quarterly revenue comparison for food and non-food products-2014</option>
	        </select>
		</div>
  
       
        <div class="text-center mb-20"><button id="rend">Render the chart</button> 
        	<div id="msg"><i>Message...</i></div>
       </div>
       
        <div id="chart-container" class="container">FusionCharts will render...

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 {
    height: 25px;
    font-size: 12px;
}
#rend {
    height: 25px;
    font-size: 13px;
}
#msg {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var qra_data = {
        "chart": {
            "caption": "Quarterly revenue analysis-2014",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Quarter",
                "yAxisname": "Revenue",
                "numberPrefix": "$",
                "theme": "fint",
                "captionFontSize": "13",
                "subCaptionFontSize": "12"
        },

            "data": [{
            "label": "Q1",
                "value": "2850400"
        }, {
            "label": "Q2",
                "value": "1463300"
        }, {
            "label": "Q3",
                "value": "1050700"
        }, {
            "label": "Q4",
                "value": "4910000"
        }]
    };

    var qrc_data = {
        "chart": {
            "caption": "Quarterly revenue comparision-2013 and 2014",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Quarter",
                "yAxisName": "Revenue",
                "numberPrefix": "$",
                "theme": "fint",
                "captionFontSize": "13",
                "subCaptionFontSize": "12"
        },
            "categories": [{
            "category": []
        }],
            "dataset": []
    };

    var qrfp_data = {
        "chart": {
            "caption": "Quarterly revenue from food products-2014",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Quarter",
                "yAxisname": "Revenue",
                "numberPrefix": "$",
                "theme": "fint",
                "captionFontSize": "13",
                "subCaptionFontSize": "12"
        },

            "data": [{
            "label": "Q1",
                "value": "175000"
        }, {
            "label": "Q2",
                "value": "646520"
        }, {
            "label": "Q3",
                "value": "245000"
        }, {
            "label": "Q4",
                "value": "345690"
        }]
    };

 ...