Time for action — powering a chart using JSON data embedded in the page
1. Create a copy of
DataStringMethod.htmlin theFirstChartfolder and name it asDataStringMethodJSON.html.2. Change the following lines of code, as highlighted:
<html> <body> <div id="chartContainer">FusionCharts will load here!</div> <script type="text/javascript"> <!--var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId","400", "300", "0", "1" ); myChart.setJSONData('{\"chart": {\ "caption": "Harry\'s SuperMart",\ "subcaption": "Revenue by Year",\ "xaxisname": "Year",\ "yaxisname": "Amount",\ "numberprefix": "$"\ },\"data": [{\ "label": "2009",\ "value": "1487500"\ },{\ "label": "2010",\ "value": "2100600"\ },{\ "label": "2011",\ "value": "2445400"\ }]}'); myChart.render("chartContainer");// --> </script> </body> </html>3. View the page in the browser. You should see the same chart as the previous one.
What just happened?
You changed the setXMLData() function to the setJSONData() function and provided JSON data instead of XML data. Also, note how the apostrophe in Harry's SuperMart was escaped in JavaScript so as to form Harry\'s SuperMart. Otherwise, there would have been a conflict of quotes leading to invalid JavaScript syntax.
You can also provide the JSON data to the setJSONData() method as an object, instead of a string, as shown in the following code:
<html>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">
<!-- var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
myChart.setJSONData({
"chart": {
"caption": "Harry\'s SuperMart",
"subcaption": "Revenue by Year",
"xaxisname": "Year",
"yaxisname": "Amount",
"numberprefix": "$"
},
"data": [{
"label": "2009",
"value": "1487500"
},{
"label": "2010",
"value": "2100600"
},{
"label": "2011",
"value": "2445400"
}]});
myChart.render("chartContainer");// -->
</script>
</body>
</html>
Here, we have converted the JSON string to a JavaScript object by removing the enclosing string quotation marks and even the \ character that was used for concatenating the string distributed across multiple lines. And that does it all!
Bingo! You are now adept with the basics of FusionCharts. You have learned how to create a FusionCharts, provide XML or JSON data as either URL or string, and even render the chart using pure JavaScript. Now, we are all set to explore additional charts in FusionCharts. First, we will create a chart with more than one series of data, called a multi-series chart in FusionCharts parlance.
