Creating your first chart > Single Page Charts
 
Till now, we had seen the first method of data communication to FusionCharts, in which an external data provider page/XML document was required. However, there also exists another way to provide the XML data to FusionCharts. In this method, the XML Data is provided to FusionCharts by the same page in which it's embedded. When working with this method, you don't need to create the external server side script/XML document to provide the 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.

<HTML>
<HEAD>
<TITLE>FusionCharts Sample Single Page Chart</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<CENTER>
<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="FC2Column" ALIGN="">
<PARAM NAME=movie VALUE="../Charts/FC2Column.swf">
<PARAM NAME="FlashVars" value="&dataXML=<graph caption='Decline in Net Interest Margins of Asian Banks (1995-2001)' subCaption='(in Percentage)' yaxisname='Points' xaxisname='Country' numdivlines='3' zeroPlaneColor='333333' zeroPlaneAlpha='40' > <set name='Taiwan' value='-0.33' color='F23456'/> <set name='Malaysia' value='-0.27' color='FF6600'/> <set name='Hong Kong' value='0.40' color='009966' /> <set name='Philippines' value='0.6' color='CC3399'/> <set name='Singapore' value='-0.8' color='FFCC33' /> <set name='Thailand' value='-2.2' color='F23456'/> <set name='India' value='1.2' color='FF6600'/> </graph>
">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="../Charts/FC2Column.swf" FlashVars="&dataXML=<graph caption='Decline in Net Interest Margins of Asian Banks (1995-2001)' subCaption='(in Percentage)' yaxisname='Points' xaxisname='Country' numdivlines='3' zeroPlaneColor='333333' zeroPlaneAlpha='40' > <set name='Taiwan' value='-0.33' color='F23456'/> <set name='Malaysia' value='-0.27' color='FF6600'/> <set name='Hong Kong' value='0.40' color='009966' /> <set name='Philippines' value='0.6' color='CC3399'/> <set name='Singapore' value='-0.8' color='FFCC33' /> <set name='Thailand' value='-2.2' color='F23456'/> <set name='India' value='1.2' color='FF6600'/> </graph>" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FC2Column"
ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</CENTER>
</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.

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 move on and see the different properties of the chart that can be customized using the XML data source.