Time for action — embedding XML in the web page and using the Data String method
- Create a copy of our
FirstChart.htmlin the same location and name it asDataStringMethod.html. - Change the following lines in 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.setXMLData("<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>\ <set label='2009' value='1487500' />\ <set label='2010' value='2100600' />\ <set label='2011' value='2445400' />\ </chart>"); myChart.render("chartContainer");// --> </script> </body> </html> - Open the page in a browser. You should see the same chart as earlier, but this time using data embedded in the page, and not
Data.xml.
What just happened?
You just used the Data String method of FusionCharts to power up your chart using XML data embedded in the page, instead of reading it from Data.xml. This was done by invoking the setXMLData() method on the chart instance.
myChart.setXMLData("<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>\ <set label='2009' value='1487500' />\ <set label='2010' value='2100600' />\ <set label='2011' value='2445400' />\ </chart>");
The entire XML string is passed to this method. Note how we are using the \ characters in JavaScript to split the XML data string into multiple lines for enhanced readability. Make sure there are no trailing spaces, when using this approach.
You can also define a JavaScript string variable, store XML data in it, and then assign the variable reference to the chart instance, as shown in the following code snippet:
<html> <body> <div id="chartContainer">FusionCharts will load here!</div> <script type="text/javascript"> <!-- var strData = "<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>" + "<set label='2009' value='1487500' />" + "<set label='2010' value='2100600' />" + "<set label='2011' value='2445400' />" + "</chart>"; var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" ); myChart.setXMLData(strData); myChart.render("chartContainer");// --> </script> </body> </html>
In the previous example, we had stored the entire XML string in the variable strData, and then passed its reference to the setXMLData() method, instead of the XML string directly.
When using this method to provide data, if your chart is not working or reporting Invalid data, check for the following:
- Make sure that the quotation marks specified in JavaScript to provide parameters and in XML to provide attributes are different. Otherwise, it will result in a JavaScript syntax error. To keep things easy to remember, use double quotation marks for JavaScript, and single quotation marks for XML attributes.
- Ensure that special characters such as
', ", &, <, and>present as XML attribute values are encoded to', ", &, <, and> respectively.
Now that you are familiar with both the ways of providing XML data to FusionCharts, let us explore the other data format supported by FusionCharts—JSON.