Fusioncharts localization 3-5 (chapter 3 completed)

Source: Internet
Author: User

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)
 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.