Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

1. Introducing FusionCharts > Time for action — embedding XML in the web page a...

Time for action — embedding XML in the web page and using the Data String method

Time for action — embedding XML in the web page and using the Data String method Create a copy of our FirstChart.html in the same location and name it as DataStringMethod.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&apos;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&apos;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&apos;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&apos;, &quot;, &amp;, &lt;, and&gt; 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.

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint