Creating your First Chart > dataXML method

In our previous examples, we had used the dataURL method to provide data to FusionWidgets. In dataURL method, the data is contained in an external physical XML document (like Data.xml) or relayed by a URL (like ReturnXMLData.asp or ReturnXMLData.aspx or ReturnXMLData.php).

There also exists another method to provide the XML data to FusionWidgets - dataXML method.

In this method, the XML Data exists in the same HTML page in which FusionWidgets is embedded. When working with this method, you don't need to create the external XML document (like Data.xml). Instead you provide it in the HTML page.

Let's quickly see an example of the above.
 
Using dataXML method while embedding chart using JavaScript
If you're using FusionCharts JavaScript class to embed the chart, you can use dataXML with it as under:

<html>
<head>
<script language="JavaScript" src="../Charts/FusionCharts.js"></script>
</head>

<body bgcolor="#ffffff">
   <div id="chartdiv" align="center">
      The chart will appear within this DIV. This text will be replaced by the chart.
   </div>
   <script type="text/javascript">
      var myChart = new FusionCharts("Charts/AngularGauge.swf", "myChartId", "400", "200", "0", "0");
      myChart.setDataXML("<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='%25' tickValueDistance='20' showValue='1'><colorRange><color minValue='0' maxValue='75' code='FF654F'/><color minValue='75' maxValue='90' code='F6BD0F'/><color minValue='90' maxValue='100' code='8BBA00'/></colorRange><dials><dial value='92' rearExtension='10'/></dials></chart>");
      myChart.render("chartdiv");
   </script>

</body>
</html>

You can clearly see above, that instead of using setDataURL method to provide the path of XML file, here we've used setDataXML method to provide the full XML data itself.

Also, we've changed numberSuffix='%' to numberSuffix='%25', as when using dataXML method special characters need to be encoded. This has been explained in the section Advanced Charting > Using Special Characters.

When you now view the charts, you'll get the same output as before.
 
Using dataXML method in direct HTML embedding
If you're using direct HTML embed method, dataXML can be used as under:
<html>
<head>
   <title>My First FusionWidgets - using HTML Embed method with dataXML</title>
</head>
<body bgcolor="#ffffff">
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="200" id="MyFirstChart" >
   <param name="movie" value="Charts/AngularGauge.swf" />
   <param name="FlashVars" value="&dataXML=<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='%25' tickValueDistance='20' showValue='1'><colorRange><color minValue='0' maxValue='75' code='FF654F'/><color minValue='75' maxValue='90' code='F6BD0F'/><color minValue='90' maxValue='100' code='8BBA00'/></colorRange><dials><dial value='92' rearExtension='10'/></dials></chart>">
   <param name="quality" value="high" />
   <embed src="Charts/AngularGauge.swf" flashVars="&dataXML=<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='%25' tickValueDistance='20' showValue='1'><colorRange><color minValue='0' maxValue='75' code='FF654F'/><color minValue='75' maxValue='90' code='F6BD0F'/><color minValue='90' maxValue='100' code='8BBA00'/></colorRange><dials><dial value='92' rearExtension='10'/></dials></chart>" quality="high" width="400" height="200" name="MyFirstChart" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
   </object>
</body>
</html>

As you can see above, we have provided the complete data by appending it as a FlashVars attribute in the following format:
<PARAM NAME="FlashVars" Value="&dataXML=completeXMLData">

and in the EMBED tag, you'll have to add the following:
<EMBED ... FlashVars="&dataXML=completeXMLData">

This way you can have FusionCharts load data from the same page in which it's embedded.
 
With dataXML method, however, there can sometimes be problems when you're working with larger chunks of data. This problem happens due to the limitation on dataXML string length imposed by the browser. When you specify a larger chunk of data using dataXML method, 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.