Load with JS
This JS file is in the fusionchartsfree> jsclass folder, and we copy it to C: fusionchartsfusioncharts.
Now let's copy the original chart.htmlfile and name it jschart.html. To avoid direct modification to chart.html,
The following is an example of jschart.htmlCode.(Please send an email to the freeget.one@gmail.com for strong software .)
<HTML>
<Head>
<Script language = "JavaScript" src = "../fusioncharts. js"> </SCRIPT>
</Head>
<Body bgcolor = "# ffffff">
<Div id = "chartdiv" align = "center"> the image will appear in this Div, and the word here will be replaced by the image. </Div>
<SCRIPT type = "text/JavaScript">
VaR MyChart = new fusioncharts ("../fusioncharts/fcf_column3d.swf", "mychartid", "600", "500 ");
MyChart. setdataurl ("data. xml ");
MyChart. Render ("chartdiv ");
</SCRIPT>
</Body>
</Html>
The above code is explained as follows.
First, we use the following statement to load the fusioncharts. js file.
<Script language = "JavaScript" src = "../fusioncharts. js"> </SCRIPT>
Then, we define a div with an ID.
<Div id = "chartdiv" align = "center"> the image will appear in this Div, and the word here will be replaced by the image. </Div>
Our graph is displayed in this Div.
Then, we use four parameters to create a fusioncharts object,
VaR MyChart = new fusioncharts ("../fusioncharts/fcf_column3d.swf", "mychartid", "600", "500 ");
The first parameter is the address of the SWF file.
The second is the image ID. You can call this ID as needed, but note that this ID must be unique when there are multiple images in a page.
The third parameter is the image width.
The fourth parameter is the image height.
We also need to set the data file address.
MyChart. setdataurl ("data. xml ");
Finally, we render the image in a specified place.
MyChart. Render ("chartdiv ");
"Chartdiv" is the ID of the previous Div, which indicates render the image to "chartdiv ".
Now you can run jschart.html to see the same effect as chart.html. Obviously, using JavaScript to load images is more convenient and intuitive.
Multiple images
Sometimes we need to display multiple images on a single page. For example, we use pie chart, bar chart, graph, and area chart to show the sales situation of each month, users can choose the desired one.
How can I load multiple images? It's easy. Let's take a look.
<HTML>
<Head> <title> multiple images </title>
<Script language = "JavaScript" src = "../fusioncharts. js"> </SCRIPT>
</Head>
<Body bgcolor = "# ffffff">
<Div id = "chartdiv1" align = "center"> first chart container pie 3D </div>
<SCRIPT type = "text/JavaScript">
VaR mychart1 = new fusioncharts ("../fusioncharts/fcf_pie3d.swf", "mychartid1", "600", "400 ");
Mychart1.setdataurl ("data. xml ");
Mychart1.render ("chartdiv1 ");
</SCRIPT>
<Div id = "chartdiv2" align = "center"> second chart container column 3D </div>
<SCRIPT type = "text/JavaScript">
VaR mychart2 = new fusioncharts ("../fusioncharts/fcf_column3d.swf", "mychartid2", "600", "300 ");
Mychart2.setdataurl ("data. xml ");
Mychart2.render ("chartdiv2 ");
</SCRIPT>
<Div id = "chartdiv3" align = "center"> third chart Container Line 2D </div>
<SCRIPT type = "text/JavaScript">
VaR mychart3 = new fusioncharts ("../fusioncharts/fcf_line.swf", "mychartid3", "600", "300 ");
Mychart3.setdataurl ("data. xml ");
Mychart3.render ("chartdiv3 ");
</SCRIPT>
<Div id = "chartdiv4" align = "center"> fourth chart container area 2D </div>
<SCRIPT type = "text/JavaScript">
VaR mychart4 = new fusioncharts ("../fusioncharts/fcf_area2d.swf", "mychartid4", "400", "250 ");
Mychart4.setdataurl ("data. xml ");
Mychart4.render ("chartdiv4 ");
</SCRIPT>
</Body>
</Html>
carefully compare the above four graphic codes, which are actually the div id, fusioncharts object name, and image ID, the SwF address of the image has changed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
