Time for action — powering a chart using JSON data embedded in the page
- Create a copy of
DataStringMethod.htmlin theFirstChartfolder and name it asDataStringMethodJSON.html. - 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> - 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.
- Oracle WebLogic Server 12c：First Look
- Node.js Design Patterns
- Ceph Cookbook
- MongoDB for Java Developers
- 程序員數學：用Python學透線性代數和微積分
- 面向對象程序設計(Java版)
- Flux Architecture
- 用Python實現深度學習框架
- Illustrator CC平面設計實戰從入門到精通（視頻自學全彩版）
- C++編程兵書
- Python物理建模初學者指南（第2版）
- SQL Server實例教程（2008版）
- jMonkeyEngine 3.0 Beginner’s Guide
- Twitter Bootstrap Web Development How-to
- Learning Bitcoin