Fusioncharts free (3)

 

Let's look at an example of specifying a chart data source using dataurl:

< Div ID = "Chartdiv" Align = "Center" > </ Div >
< Script Type = "Text/JavaScript" >
VaR Chart =   New Fusioncharts ( " ../Charts/fcf_column2d.swf " , " Chartid " , " 600 " , " 350 " );
Chart. setdataurl ( " Data/column2d. xml " );
Chart. Render ( " Chartdiv " );
</ Script >

 

MainCodeIs a JS script. first declare and instantiate an object fusionchaets, and then use the setdataurl method of this object to specify an XML file containing chart data as the data source for the chart, finally, use the render method of the object to generate a chart in the DIV element with the ID attribute chartdiv.

The constructor and two methods of the above object are implemented in the fusioncharts. js file. Therefore, the pages that contain the above Code should first contain references to the fusioncharts. js file.

Of course, the column2d. xml here is not a casual XML file, it needs to use specific labels, attributes, etc., otherwise, the corresponding SWF file will not be able to parse and display chart data normally.

Let's take a look at the content of column2d. xml:

< Graph Caption = 'Monthly unit sale' Xaxisname = 'Month' Yaxisname = 'Units' Decimalprecision = '0' Formatnumberscale = '0' >
< Set Name = 'Jan' Value = '000000' Color = 'Afd8f8'   />
< Set Name = 'Feb' Value = '000000' Color = 'F6bd0f'   />
< Set Name = 'Mar' Value = '000000' Color = '8bba00'   />
< Set Name = 'Apr' Value = '000000' Color = 'Ff8e46' />
< Set Name = 'May' Value = '000000' Color = '8e8e' />
< Set Name = 'Jun' Value = '000000' Color = 'D64646' />
< Set Name = 'Jul' Value = '000000' Color = '8e468e' />
< Set Name = 'Aug' Value = '000000' Color = '000000' />
< Set Name = 'Sept' Value = '000000' Color = 'B3aa00' />
< Set Name = 'Oct' Value = '000000' Color = '8ed6' />
< Set Name = 'Nov' Value = '000000' Color = '9d080d' />
< Set Name = 'Dec' Value = '000000' Color = 'A186be' />
</ Graph >

 

The content in such an XML file is relatively easy to understand, the fusioncharts documentation provides reference for XML file tags and attributes that are acceptable to different chart types. For more information, see the "chart XML reference" section in the documentation.

By comparing the XML data formats of different types of charts, you may find that apart from the funnel chart, K-line chart, Gantt chart, and other special charts, common charts in the same category (such as 2D, 3D, 2d, 2d, 2d, and 2d) the XML file format is similar. In this way, when you need to change the chart type in a specific application, you only need to re-instantiate the fusioncharts object in Js, you do not need to change the specific XML data source. If the above 2D bar chart is changed to a 2D bar chart, we can use the following functions:

< Script Type = " Text/JavaScript " >
Function Changecharttypetobar ()
{
Chart =   New Fusioncharts ( " ../Charts/fcf_bar2d.swf " , " Chartid " , " 600 " , " 350 " );
Chart. setdataurl ( " Data/column2d. xml " );
Chart. Render ( " Chartdiv " );
}
< / SCRIPT>

 

In this case, the entire page does not need to be refreshed. You only need to refresh the chart area. Obviously, this is a relatively simple operation. Note the following:

• The XML data sources of different types of charts may have specific XML labels or attributes. Therefore, when you need to change the chart type, try to use the commonly used labels or attributes in different chart types.
• It should be emphasized that different types of charts have different meanings. Although they can be easily converted between different chart types, if the type of the chart is incorrectly selected, it is likely to be superfluous. If you use a pie chart for the time series data shown above, it may not be appropriate. Although it is very easy to convert the chart into a pie chart

In addition, using dataurl to specify a data source for a chart is not required to be an actual physical XML file. It can be an HTTP request that returns an XML file or segment, we can easily retrieve the data required for a chart from the database based on specific query conditions or filter expressions first on the chart. Obviously, this method can only pass the parameters required by the HTTP request through post. Note that fusioncharts is sensitive to special characters. When you specify parameters for the fusioncharts object using setdataurl, it is recommended that this parameter string contain only English characters, numbers, and ,? , & And-, of course, it is best to use the escape Function in JavaScript to encode it.