In our previous examples, we had used the first method (dataURL method) of data communication to FusionCharts, in which an external data provider page/XML document (like our Data.xml) was required. However, there also exists an another way to provide the XML data to FusionCharts - the dataXML method.
In this method, the XML Data, to be provided to FusionCharts, exists in the same HTML container page in which FusionCharts is embedded. When working with this method, you don't need to create the external XML document (like Data.xml) to provide data to FusionCharts.
Let's quickly see an example of the above.
Once again, open your text editor, create an HTML file with the following
code and save it as SinglePageChart.html
under MyFirstChart folder.
<BODY bgcolor="#FFFFFF">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0" WIDTH="565" HEIGHT="420" id="FC_2_3_Column3D" ALIGN="">
<PARAM NAME=movie VALUE="../Charts/FC_2_3_Column3D.swf">
<PARAM NAME="FlashVars" VALUE="&dataXML=<graph caption='Monthly Sales Summary' subcaption='For the year 2004' xAxisName='Month' yAxisName='Sales' numberPrefix='$' showNames='1'>
<set name='Jan' value='17400' color='0099FF' />
<set name='Feb' value='19800' color='FF66CC' />
<set name='Mar' value='21800' color='996600' />
<set name='Apr' value='23800' color='669966' />
<set name='May' value='29600' color='7C7CB4' />
<set name='Jun' value='27600' color='FF9933' />
<set name='Jul' value='31800' color='CCCC00' />
<set name='Aug' value='39700' color='9900FF' />
<set name='Sep' value='37800' color='999999' />
<set name='Oct' value='21900' color='99FFCC' />
<set name='Nov' value='32900' color='CCCCFF' />
<set name='Dec' value='39800' color='669900' />
</graph>">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="../Charts/FC_2_3_Column3D.swf" FlashVars="&dataXML=<graph caption='Monthly Sales Summary' subcaption='For the year 2004' xAxisName='Month' yAxisName='Sales' numberPrefix='$' showNames='1'>
<set name='Jan' value='17400' color='0099FF' />
<set name='Feb' value='19800' color='FF66CC' />
<set name='Mar' value='21800' color='996600' />
<set name='Apr' value='23800' color='669966' />
<set name='May' value='29600' color='7C7CB4' />
<set name='Jun' value='27600' color='FF9933' />
<set name='Jul' value='31800' color='CCCC00' />
<set name='Aug' value='39700' color='9900FF' />
<set name='Sep' value='37800' color='999999' />
<set name='Oct' value='21900' color='99FFCC' />
<set name='Nov' value='32900' color='CCCCFF' />
<set name='Dec' value='39800' color='669900' />
</graph>" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FC_2_3_Column3D" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</BODY>
</HTML>
As you can see above, we have provided the complete data
(in XML format) to FusionCharts, by appending it as a FlashVars
attribute in the following format:
<PARAM NAME="FlashVars" Value="&dataXML=thecompleteXMLData">
and in the EMBED tag, you'll have to add the following:
<EMBED ... FlashVars="&dataXML=thecompleteXMLData">
This way you can have FusionCharts to load data from the same page in
which it's embedded.
When you view this page in your browser, you'll get the same output which you had previously seen (in dataURL method).
However, with this method, there can sometimes be a problem when you're working with larger chunks of data. This problem happens due to the length limitation of the browser. When you specify a larger chunk of data in the dataXML format, the browser ignores everything after a certain length. This causes FusionCharts to hang (nothing would be displayed on-screen) as the full data has not been supplied to it. Therefore, dataURL method is recommended for larger chunks of data (basically - multi-series charts).
Let's now quickly move and see the various elements that constitute a chart.