Using XML data embedded in HTML page |
In our previous examples, we had created charts by providing chart data through an external XML file. Here, we'll show you how to embed the XML directly into an HTML page. In our previous examples, we had used the JavaScript function setXMLUrl() to provide URL of the XML file to the chart. Hence, the term Data URL method is used for referring to the technique used earlier. |
Create a copy of weekly-sales.html
and save it as weekly-sales-xml-embed.html. Next, modify the code as shown below: |
<html> <head> <title>My First chart using FusionCharts XT - using XML data embedded in the page</title> <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> </head> <body> <div id="chartContainer">FusionCharts XT will load here</div> <script type="text/javascript"><!-- var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300", "0"); myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " + "yAxisName='Sales' numberPrefix='$'>" + "<set label='Week 1' value='14400' />" + "<set label='Week 2' value='19600' />" + "<set label='Week 3' value='24000' />" + "<set label='Week 4' value='15700' />" + "</chart>"); myChart.render("chartContainer"); // --> </script> </body> </html> See it live! |
In the above code, we have provided the entire XML data as a string inside the code itself and passed it to the chart using the setXMLData() method. There are certain pointers to be kept in mind when using the Data String method:
Existing Users: Prior to v3.2, while using this method, you will need to encode various characters. Since v3.2, except for a few characters listed in Using Currency Symbols and Using Special Punctuation pages (from Advanced Charting > Using Special Characters section), no character is required to be encoded while using this process. The new FusionCharts JavaScript class takes care of everything. |