Location: Chapter 3 create your first chart> dataxml Method
Dataxml Method |
In the previous example, we used the dataurl method to provide data to fusioncharts. in the dataurl method, data is contained in an XML file of an external object (such as data. XML) or a URL (such as returnxmldata. ASP) In addition, there is another method to provide XML data to fusioncharts-dataxml. In this method, the XML data has the same page, and the fusioncharts is also embedded. When using this method, you do not need to create XML files (such as data. XML) that are provided on the HTML page. When using the dataxml method, you must be very careful about the quotation mark conflict. for example, if you use single quotation marks for attributes in XML documents, you must use double quotation marks to encapsulate the entire XML string on your htnl page as an attribute of the Object/EMBED element. conflicts with quotation marks often do not cause errors, but you may always wonder why the chart is not rendered (you will get a blank space instead of a chart) Let's take a quick look at the example above. |
|
Use the dataxml method on the directly embedded HTML page |
Create a chart.html sub-database and set it to chartdataxml.html. In addition, modifyCodeAs follows: |
|
Code < Html > < 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 = "900" Height = "300" ID = "Column3d" > < Param Name = "Movie" Value = "../Fusioncharts/column3d.swf" /> < Param Name = "Flashvars" Value = "& Dataxml = <chart caption = 'monthly sales summary 'subcaption =' for the year 2006 'xaxisname = 'month' yaxisname = 'sales' numberprefix =' $ '> <set label = 'january' value = '000000'/> <set label = 'february 'value = '000000'/> <set label = 'march' value = '2016'/> <set label = '0000l' value = '000000'/> <set label = 'may' value = '000000'/> <set label = 'june' value = '000000' /> <set label = 'july' value = '000000'/> <set label = 'August 'value = '000000'/> <set label = 'September' value =' 37800 '/> <set label = 'October' value = '000000'/> <set label = 'noember 'value = '000000'/> <set label = 'decimal' Value = '000000'/> </chart>" > < Param Name = "Quality" Value = "High" /> < Embed SRC = "../Fusioncharts/column3d.swf" Flashvars = "& Dataxml = <chart caption = 'monthly sales summary 'subcaption =' for the year 2006 'xaxisname = 'month' yaxisname = 'sales' numberprefix =' $ '> <set label = 'january' value = '000000'/> <set label = 'february 'value = '000000'/> <set label = 'march' value = '2016'/> <set label = '0000l' value = '000000'/> <set label = 'may' value = '000000'/> <set label = 'june' value = '000000' /> <set label = 'july' value = '000000'/> <set label = 'August 'value = '000000'/> <set label = 'September' value =' 37800 '/> <set label = 'October' value = '000000'/> <set label = 'noember 'value = '000000'/> <set label = 'decimal' Value = '000000'/> </chart>" Quality = "High" Width = "900" Height = "300" Name = "Column3d" Type = "Application/X-Shockwave-flash" Pluginspage = "Http://www.macromedia.com/go/getflashplayer" /> </ Object > </ Body > </ Html > As you can see above, we have provided the completed data by appending it as the flashvars attribute. The format is as follows: <Param name = "flashvars" value = "& dataxml = completexmldata"> In the embed tag, you need to add the following code: <Embed... flashvars = "& dataxml = completexmldata"> In this way, you can load data from the same page to display the fusioncharts chart. |
|
Use dataxml and JavaScript to embed charts |
If you use the Javascript class of fusioncharts to embed charts, you can use dataxml as follows: |
Code < Html > < Head > < Script Language = "JavaScript" SRC = "../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 ( " ../Fusioncharts/column3d.swf " , " Mychartid " , " 900 " , " 300 " , " 0 " , " 0 " ); MyChart. setdataxml ( " " );
MyChart. Render ( " Chartdiv " ); </ Script > </Body> </Html>
|
As you can see clearly above, the path of the XML file is not provided using the setdataurl method. Here we use the setdataxml method to provide the complete XML data itself. View the chart now and you will get the same output as before. |
|
This method is used. However, when the data size is very large, the problem may occur due to the browser's dataxml string length limit. When you use dataxml to perform operations on large data volumes, the browser ignores the data after a specified length. This will cause the fusioncharts to be suspended (nothing is displayed on the screen) and the complete data is not provided to it. Therefore, we recommend that you use the dataurl method when using large data volumes. (Basically, when using multiple series/combined charts) |
|