Fusioncharts free User Guide Chapter 4-fusioncharts free loading graphics using JavaScript

Source: Internet
Author: User

In the previous articleArticleWe made the first graphic report, we directly use the <Object> and <embed> tags in HTML to load the image (fusioncharts free use document tutorial Chapter 3-fusioncharts free my first image ). In fact, we can also use a javascript class provided by FCF to load graphics. There are several advantages to using JavaScript:CodeThe amount is greatly reduced, especially when there are several images on a page. Second, the code is more intuitive. Third, you can avoid the prompt "click to activate using this control" on IE.

Load with JS

This JS file is in the fusionchartsfree> jsclass folder, and we copy it to c: \ fusioncharts.
Now let's copy the original chart.htmlfile and name it jschart.html. To avoid direct modification to chart.html,
The following describes the jschart.html code.

View sourceprint?
01 <Html>
02 head
03 script language =< /code> "JavaScript" SRC = ".. /fusioncharts. JS " > script >
04 </Head>
05 <Body Bgcolor="# Ffffff">
06 Div id =< /code> "chartdiv" align = " center " the image appears in the div, the word here will be replaced by the image Generation. Div
07 <Script Type="Text/JavaScript">
08 VaR MyChart = new fusioncharts ("../fusioncharts/fcf_column3d.swf", "mychartid", "600", "500 ");
09 MyChart. setdataurl ("data. xml ");
10 MyChart. Render ("chartdiv ");
11 </Script>
12 </Body>
13 </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 graph will appear in this Div, and the word here will be replaced by the graph.</Div> 

Our graph is displayed in this Div.
Then, we use four parameters to create a fusioncharts object,
VaRMyChart =NewFusioncharts ("../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.

View sourceprint?
<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 =< /code> "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 =< /code> "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 =< /code> "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>

The above four graphic codes are actually the ID of the DIV, the name of the fusioncharts object, the ID of the image, and the SWF address of the image. The final effect is as follows:

Related documents:Fusioncharts3v cracked Version Download

Detailed description and features of fusioncharts Parameters

Fusioncharts free User Guide Chapter 1-Introduction to fusioncharts free

Fusioncharts free User Guide Chapter 2-fusioncharts free installation

Fusioncharts free User Guide Chapter 3-fusioncharts free my first graph

Address: http://www.cnblogs.com/ATree/archive/2010/06/22/FusionCharts-Free-JavaScript.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.