FusionCharts simple tutorial (2) ----- use js to load images and setDataXML () to load data

The previous article gave a brief introduction to FusionCharts and created our first image, but the one that uses the <OBJECT> and <EMBED> tags in HTML to load the image, however, this is irrational. In addition to the large amount of code, not all people can understand the above Code. However, after using JS, you can avoid the above issues.

1. Use JS to load FusionCharts graphics

The following describes how to use js to load FusionCharts graphics in five steps.

Step 1: import the FusionCharts. js File

<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>

Step 2: Define a DIV, which must have an element: id

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

Step 3: Create a FusionCharts object

 var myChart = new FusionCharts("para1", "para2", "para3", "para4");  

Para1: the address of the SWF file.

Para2: the ID of the image. You can name it as needed, but you must ensure its uniqueness.
Para3: the height of the image.

Para4: the length of the image.

 var myChart = new FusionCharts("../FusionCharts/Doughnut3D.swf", "myChartId_02", "600", "500");  

Step 4: Set Data Files

myChart.setDataURL("Data.xml");

Step 5: Specify the rendering position of the image.

myChart.render("chartdiv_01");

The preceding five steps are used to load the FusionCharts graph in js. To load multiple images, repeat Step 2-Step 5, but ensure the uniqueness of the IDs of the DIV and FusionCharts objects. For example:

             <div id="chartdiv_02" align="center"></div><script type="text/javascript">           var myChart = new FusionCharts("../FusionCharts/Doughnut3D.swf", "myChartId_02", "600", "500");    myChart.setDataURL("Data.xml");    myChart.render("chartdiv_02");

Ii. load data using dataXML

The preceding xml data file is a separate xml file, which may be used by one or more programs and static. However, we may not allow you to use separate files and the data is dynamic. In this case, you can use the dataXML Method for calling. Note: dynamic data files can also be used in dataURL.

Both dataXML and dataURL can provide data, except that dataURL takes the form of a data file as a URL address, while dataXML uses the form of XML text. To put it bluntly, dataURL informs FCF of the address of the xml file, while dataXML notifies FCF of the content in the XML data file.

The following example uses dataXML to load data files. The setDataXML () parameter is a complete XML string.

MyChart. setDataURL (<graph caption = 'sales per month' xAxisName = 'month' yAxisName = 'unit' showNames = '1' decimalPrecision = '0' formatNumberScale = '0'> <set name = '20180101' value = '20180101' color = 'afd8f8'/> <set name = '20180101' value = '20180101' color = 'f6bd0f'/> <set name =' 'value = '20180101' color = '8bba00'/> <set name = '20180101' value = '20180101' color = 'ff8e46'/> <set name = '20180101' value = '000000' color = '8e8e'/> <set name = '000000' value = '000000' color = 'd64646 '/> <set name = '000000' value = '000000' color = '8e468e '/> <set name = '000000' value = '000000' color = '000000'/> <set name = '000000' value = '000000' 'color = 'b3aa00'/> <set name = '2013' value = '000000' color = '008ed6 '/> <set name = '2016' value = '000000' color = '9d080d'/> <set name = '20180101' value = '20180101' color = 'a186be'/> </graph> ");

Iii. setDataXML () Problems

We know that the browser generally has a length limit on obtaining parameters. If the XML string data is too large, it may cause problems, it seems that there will be problems with Chinese characters when you drill down. (In this project, Chinese characters cannot be passed down. I wonder if you have encountered such a problem !!).

Therefore, this method is generally recommended in practical applications: setDataURL () method, using javascript to load graphics. However, when setDataURL is used, if the address contains "?" . URLEncoder. encode () is recommended for java encoding.