Fusioncharts simple tutorial (1) --- create the first fusioncharts Graph

For project requirements, you need to make a report and use fusioncharts as the tool. Because I have never been familiar with reports, and there are no specific fusioncharts tutorials on the internet, I decided to study fusioncharts well. At the same time, I would like to provide an additional test for a simpler tutorial than the others. Due to limited capabilities (cainiao for recent graduates), there may be errors in tutorials (Study Notes). Don't worry about it. Of course, it is inevitable that you will not be able to skip other materials.

I. Introduction and installation of fusioncharts 1.1. fusioncharts is a product provided by infosoft global, while fusioncharts free is a free version provided by fusioncharts. It is still powerful despite being free of charge, there are still many graphic types. It is based on fusioncharts free.

Fusioncharts free is a cross-platform, cross-browser flash chart 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 your programming language.

Fusioncharts is powerful, so what can it do? The following is a one-on-one demonstration.

3D/2D column chart

Graph

3D/2D pie chart and cycle chart

Area Chart

Stack Diagram

Union chart

The above is just a demonstration of some features. fusioncharts can also do many other things, which will not be described here. The following describes how to install and use fusioncharts.

1.2 document structure

Decompress the downloaded fusioncharts to a random directory. The extracted directory contains a document structure similar to this one.

Charts: contains all SWF files. If you need to create images for your web project, you can import the corresponding SWF file.

Code: contains all the Demo code.

Contents: includes documents, APIs, and fusioncharts usage.

Gallery: Includes sample images.

The jsclass: fusioncharts JavaScript files are stored in this directory. These files can help us insert images to the page in a friendly way.

1.3 Installation and Use

After learning about the document structure of fusioncharts, the following describes how to apply fusioncharts to applications. In fact, the usage of fusioncharts is very easy. Only three steps are required.

1. Import the SWF file corresponding to the image you want to create.

2. Compile an XML data file.

3. Compile an HTML file that includes the corresponding code for displaying the image.

2. My first fusioncharts

After so long introduction, we can finally create the first image. I will create a 3D columnar chart in a simpler way than a timeline to show the sales status of a product each month.

2.1 create a project

Create a directory named fusioncharts, and then name fusioncharts and datas in the two new directories. 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 columnar image to the fusioncharts directory.

2.3 create an XML data file create an XML file: data1.xml and put it into the datas directory. The file content is as follows:

<Chart yaxisname = 'sales number' caption = 'statistical analysis of annual sales in October 1' useroundedges = '1' bgcolor = 'ffffffff, ffffff 'showborder = '0'> <set label = '2013' value = '000000'/> <set label = '2016' value = '2016'/> <set label = 'february 42300 'value = '20160301'/> <set label = '20160301' value = '20160301'/> <set label = '20160301' value = '20160301'/> <set label = '20180101' value = '20180101'/> <set label = '20180101' value = '20180101'/> <set label = '20180101' value = '20180101'/> <set label = '20180101' value = '20180101'/> <set label = '20180101' value = '20180101'/> <set label = '20180101' value = '20180101' /> <set label = 'february 11' value = '000000'/> </chart>

Here is a brief introduction to this XML file.

<Chart> an element is a root element. It has some basic attributes, such as setting the name of X and Y axes, report title, and value format. There are many <set> elements in the <chart> element, which describes the set data. label indicates the name and value indicates the value.

2.4 compile HTML file code

Generated image:


The next section describes how to use js to load fusioncharts and dataxml to load data.




Fusioncharts simple tutorial (1) --- create the first fusioncharts Graph