Fusioncharts Simple Tutorial (ii)-----loading data using JS load image and Setdataxml ()

The previous article gave a brief introduction to Fusioncharts and built our first graph, but that was to use <OBJECT> and <EMBED> tags to load graphics in HTML, but doing so was not "sensible". This is done in addition to the amount of code, and not all of them can read the code above. But after using JS can avoid the above several problems.

first, use JS load fusioncharts graphics

Here is a five-step tutorial on how to use JS to load Fusioncharts graphics.

First step: Import the Fusioncharts.js file

[JavaScript]View Plaincopyprint?

1. <script language="JavaScript" src= ". /fusioncharts/fusioncharts.js "></script>

Step two: Define a Div, which must have an element: ID

[JavaScript]View Plaincopyprint?

1. <div id="chartdiv_01" align="center" ></div>

Step Three: Create a Fusioncharts object

[JavaScript]View Plaincopyprint?

1. var mychart = New Fusioncharts ("Para1", "Para2", "Para3", "Para4");

PARA1: Represents the address of the SWF file

PARA2: The ID of the graph, this can be casually named, but need to ensure that its uniqueness
PARA3: The height of the graph.

PARA4: The length of the graph.

[JavaScript]View Plaincopyprint?

1. var mychart = New Fusioncharts ("..  /fusioncharts/doughnut3d.swf ", " mychartid_02 ", " n ", " 500 ");

Fourth Step: Set up the data file

[JavaScript]View Plaincopyprint?

1. Mychart.setdataurl ("Data.xml");

Fifth Step: Specify the location of the graphics rendering.

[JavaScript]View Plaincopyprint?

1. Mychart.render ("chartdiv_01");

through the above five steps is the completion of JS loading Fusioncharts graphics. If you need to load multiple graphics, you only need to repeat the second-fifth step, but you need to ensure that the IDs of the Div and Fusioncharts objects are unique. such as:

[JavaScript]View Plaincopyprint?

1.             <div id= "chartdiv_02"  align= "center" ></div>   
2. <script type= "Text/javascript" >      
3.        new fusioncharts (" mychartid_02 ",  " 600 ",  
4. mychart.setdataurl ( "Data.xml");      
5. mychart.render (

< Span style= "color: #ff0000; font-size:14px; " >

second, load data using DataXML

The preceding XML data file is a separate XML file that may be used by one or more programs, and the file is static. But we may not be allowed in real demand. Individual files and the data is dynamic, then we can use the DataXML method to make the call. Note: Dataurl can also use Dynamic Data files.

Both DataXML and Dataurl can provide data, except that dataurl the data file in the form of a URL address, while DataXML is in the form of XML text. The straightforward point is that Dataurl will tell FCF the address of the XML file, and DataXML is to tell FCF the contents of the XML data file.

The following example uses DataXML to load a data file. where the Setdataxml () parameter is a complete XML string.

[JavaScript]View Plaincopyprint?

2. Mychart.setdataurl (<graph caption=' Monthly Sales Column chart ' xaxisname=' month ' yaxisname= ' Units 'shownames= '1 ' decimalprecision=' 0 ' formatnumberscale=' 0 ' >
4. <set name=' January ' value= 'color=' afd8f8 '/>
6. <set name=' February ' value= 'color= 'f6bd0f '/>
8. <set name=' March ' value= 'color=' 8bba00 '/>
10. <set name=' April ' value= 'color= 'ff8e46 '/>
12. <set name=' May ' value=' color=' 008e8e '/>
14. <set name=' June ' value=' color=' D64646 '/>
16. <set name=' July ' value=' color= '8e468e '/>
18. <set name=' August ' value=' 544 ' color= ' 588526 '/>
20. <set name=' September ' value=' 565 ' color= ' b3aa00 '/>
22. <set name=' October ' value=' 754 ' color= ' 008ed6 '/>
24. <set name=' November ' value=' 441 ' color= ' 9d080d '/>
26. <set name=' December ' value=' 654 ' color= ' a186be '/>
28. </graph> ");

iii. problems with Setdataxml ()

We know that the browser to get the parameters of the general has a length limit, if the XML string data is too large, may cause problems, it seems to drill down to the time if there is a problem in Chinese (in this project, the next drill Chinese is always passed, do not know if you have encountered such a problem, solve!! )。

So in practical applications it is generally recommended this way: the Setdataurl () method, which uses JavaScript to load graphics. However, when using Setdataurl, if the address contains "?", "&" and other characters, the transcoding operation is required. For Java, it is recommended to use Urlencoder.encode () for encoding.

Fusioncharts Simple Tutorial (ii)-----loading data using JS load image and Setdataxml ()