Fusioncharts XML Getting Started Tutorial

Because the project needs to make a report, select Fusioncharts as the tool to use. Because there is no previous contact with the report, there is no more detailed online Fusioncharts tutorial, so decided to study fusioncharts, at the same time to do a relatively simple tutorial to provide reference. Due to limited capacity (fresh graduates of the rookie only), so the tutorial (study notes) inevitably there will be errors, hope not to spray, look correct. Of course, there are other sources of information that will inevitably be avoided.

1. 1. IntroductionFusioncharts is a product of Infosoft global, and fusioncharts Free is a complimentary version offered by Fusioncharts, although free, features remain strong and the graphics type is still rich. All of this is based on fusioncharts free.

Fusioncharts Free is a cross-platform, cross-browser flash charting component solution that can be called by ASP,. NET, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages and even PPT. We don't need to know anything about flash, we just need to know the programming language you're using.

Fusioncharts is powerful, so what can it do? The following one by one shows.

3D/2D Column Chart

Graph

3d/2d pie chart, ring chart

Area Map

Stack diagram

Union diagram

Above is just some of the features of the show, fusioncharts can do more things, here is not introduced. The following describes how to install using Fusioncharts.

1.2 Document Structure

Extract the downloaded fusioncharts to any directory, and the extracted folder will contain a document structure similar to this.

Charts: The bread has all the SWF files, and if your Web project needs to create an image, import the appropriate SWF file.

Code: It contains all the sample code.

Contents: Contains the documentation, which is the API, that contains the Fusioncharts usage method.

Gallery: Contains some examples of how images are created.

Jsclass:fusioncharts JavaScript files are placed in this directory, which helps us to insert images into the page in a friendly way.

1.3 Installation and use

After understanding the document structure of Fusioncharts, here's how to apply Fusioncharts to your application. In fact, the use of fusioncharts is very simple. It takes only three steps to get it done.

1. Import the SWF file that corresponds to the image you want to create.

2. Write XML data file.

3, write the HTML file, this file contains the corresponding code to display the image.

introduced so long, finally can create the first image. I'm going to create a 3D columnar graph in a relatively simple way to show the sales of a piece of merchandise each month.

2.1. Create the Project

Create a new folder named Fusioncharts, and then create a new two folder named Fusioncharts, Datas, respectively. These two files are used to store SWF files and XML data files, respectively.

2.2. Import Files

Copy the SWF:Column3D.swf of the corresponding 3D histogram image into the Fusioncharts folder.

2.3. Create an XML data fileCreate the XML file: Data1.xml, and put it in the Datas folder. The contents of the file are as follows: [HTML]View Plaincopyprint?

2. <chart yaxisname= 'sales number ' caption=' 2012 Annual Sales Statistics Analysis ' useroundedges=' 1 ' bgcolor= ' ffffff,ffffff ' showborder=' 0 '>
4. <set label=' January ' value= '25000 ' />
6. <set label=' February ' value= '35000 ' />
8. <set label=' March ' value= '42300 ' />
10. <set label=' April ' value= '35300 ' />
12. <set label=' May ' value= '31300 ' />
14. <set label=' June ' value= '25000 ' />
16. <set label=' July ' value= '35000 ' />
18. <set label=' August ' value= '42300 ' />
20. <set label=' September ' value= '35300 ' />
22. <set label=' October ' value= '31300 ' />
24. <set label=' November ' value= '25000 ' />
26. <set label=' December ' value= '35000 ' />
28. </Chart>

Here's a brief introduction to this XML file.

<chart> element as the root element, he has some basic properties, such as: set X, Y axis name, report title, numeric format. There are a lot of <set> elements in the <chart> element, which is used to describe the set of data, the label represents the name, and the value represents it.

2.4. Write HTML file code [HTML]View Plaincopyprint?

2. <html>
4. <head>
6. <title>my First fusioncharts</title>
8. </head>
10.        <body  bgcolor= "#ffffff" >      
12.           < Object classid= "Clsid:d 27cdb6e-ae6d-11cf-96b8-444553540000 " codebase=http ://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"  width= "  height= "  id=" column3d " >     
14. <param name="movie" value=". /fusioncharts/column3d.swf " />
16. <param name="flashvars" value= "&dataurl=. /datas/data.xml&chartwidth=600&chartheight=500 ">
18. <param name="quality" value="High" />
19. <embed src= flashvars=" &dataURL =.. /datas/data.xml&chartwidth=600&chartheight=500 " quality=" high " width="  height= " name=" "column3d"  type= " Application/x-shockwave-flash " pluginspage="/http Www.macromedia.com/go/getflashplayer " />     
21. </Object>
23. </Body>
25. </html>

The resulting Image:

Fusioncharts XML Getting Started Tutorial