FusionCharts Suite XT_From data to delight
//效果图：
Step 0: DownloadFusionCharts Suite XT
Click here todownload：http://www.fusioncharts.com/download/
Step 1:Installing FusionCharts Suite XT
The core ofFusionCharts Suite XT is a set of JavaScript files, which you include in yourweb pages. Installation merely involves copying and pasting the JavaScriptfiles from the download package into your project folder.
The steps toinstall are:
1. Create a folder called fusioncharts withinroot of your web application
2. Unzip the FusionCharts Suite XT download zip Package
3. Copy all contents within the js folder in the unzipped directory to the fusioncharts folder in your web application
4. The fusioncharts foldershould now contain six JavaScript files and two folders named maps and themes
That's it!You’ve successfully installed FusionCharts Suite XT for your web application.Let's move to the exciting part of building a chart now.
Step 2: Creatingthe first chart
Creating anychart, gauge or map using FusionCharts Suite XT involves these 4 simple steps:
1. Preparing your data in JSON or XML format
2. Including the FusionCharts JavaScript library in yourHTML page
3. Creating a container <div> forthe chart
4. Using the FusionCharts() constructorto create the chart instance, and calling the render() method
1. Preparingyour data in JSON or XML format
Our aim is toconvert the following table into a chart.
Month |
Revenue |
January |
$ 420,000 |
February |
$ 810,000 |
March |
$ 720,000 |
April |
$ 550,000 |
May |
$ 910,000 |
June |
$ 510,000 |
July |
$ 680,000 |
August |
$ 620,000 |
September |
$ 610,000 |
October |
$ 490,000 |
November |
$ 900,000 |
December |
$ 730,000 |
For the chartsto consume this data, you need to convert this into a pre-defined JSON or XMLformat. FusionCharts Suite XT accepts both data formats, and can read it as astring, or from a file, local or remote. If you have your data stored indatabase or other data sources, you can write server-side scripts to read thatdata, iterate through it, and use strings to generate the XML or JSON data.
The tabular dataabove, when converted to FusionCharts Suite XT JSON/XML format, looks as under:
<pre name="code" class="javascript">{
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "zune"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}We have the donethe following:
- Created a chart object/element and provided a list of key-value pairs to configure the functional and cosmetic attributes of the chart e.g., the caption of chart is set using"caption": "Harry's SuperMart".
- Apply the theme zune to style the chart, as a property of chart object/element. Themes let you control cosmetic and functional properties of various charts from a central location (like CSS).
- Each row of the tabular data is added to the data array, with name of month with key as label, and revenue with key as value.
2. Including theFusionCharts JavaScript library in your HTML page
Toinclude FusionCharts Suite XT JavaScript library in your HTML page, you use the <script> tagto include fusioncharts.js inthe page. Since we are using the external theme zune (shipped withFusionCharts), we also load that file. We recommend using relative URLs toavoid cross-domain security issues.
<html> <head> <title>My first chart using FusionCharts Suite XT</title> <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.zune.js"></script> </head> </html><span style="font-family: Arial, Helvetica, sans-serif;"> </span>
3. Creating a container <div> for the chart
Each chart in the page needs a container to reside in. A <div> elementworks well as a container for the chart, as defined below.
<body> <div id="chartContainer">FusionCharts XT will load here!</div> </body>
4.Using the FusionCharts() constructor to create the chartinstance, and calling the render() method
The final stepis to create an instance of the chart type as column2d, setthe width and height (in pixels or %), and finally specify the JSON data for thechart, either as string or URL. The following code does the trick.
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
type: "column2d",
renderAt: "chartContainer",
width: "500",
height: "300",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "zune"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
}
});
revenueChart.render("chartContainer");
});
In the abovecode, we:
- Create an instance of FusionCharts object in the revenueChart variable. Each chart or gauge in your HTML page needs to have a separate variable. The initialization code is wrapped within FusionCharts.ready method. This safeguards your chart instantiation code from being called before the FusionCharts Suite XT library is loaded and is ready to be used on the page.
- Next, we create an instance of column2d chart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart. In this case, we are creating an instance of column2d chart with dimensions of 500x300 pixels, and providing JSON data as a string.
- To specify the data format as JSON, we set the dataFormat parameter to 'json'. If you provided data to the chart in XML format, as explained in a later section, the value of this attribute would be 'xml'.
- The actual JSON data is embedded as string as value of dataSource parameter.
- Call the render method to draw the chart in chart-container <div> element.
Congrats!You've just built your first chart using FusionCharts XT.
Final:The entirecode for this example is as below:
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.zune.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
type: "column2d",
renderAt: "chartContainer",
width: "500",
height: "300",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "zune"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
});
revenueChart.render("chartContainer");
});
</script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>
原文出处： http://www.fusioncharts.com/getting-started/