FusionCharts Part – 2
Using Fusion charts you can create different variety of charts two of them are single series chart and multiple series chart . As the name implies in case of single series chart you can only display single chart and in case of multiple series chart you can display multiple charts.
Now lets take an example to have better understanding of these chart.
Single series chart
In order to create single series chart you need to have a json in the following format:
[java]
{
"chart":{
"caption":"Monthly Revenue",
"xaxisname":"Month",
"yaxisname":"Revenue",
"numberprefix":"$",
"showvalues":"0"
},
"data":[{
"label":"Jan",
"Value":"420000"
},
{
"label":"Feb",
"Value":"910000"
},
{
"label":"Mar",
"Value":"720000"
},
{
"label":"Apr",
"Value":"550000"
},
{
"label":"May",
"Value":"810000"
},
{
"label":"Jun",
"Value":"510000"
},
{
"label":"Jul",
"Value":"680000"
},
{
"label":"Aug",
"Value":"620000"
},
{
"label":"Sep",
"Value":"610000"
},
{
"label":"Oct",
"Value":"490000"
},
{
"label":"Nov",
"Value":"530000"
},
{
"label":"Dec",
"Value":"330000"
}
],
"trendlines":{
"line":[{
"startvalue":"700000",
"color":"009933",
"displayvalue":"Target"
}
]
},
"styles": {
"definition": [
{
"name": "CanvasAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}
],
"application": [
{
"toobject": "Canvas",
"styles": "CanvasAnim"
}
]
}
}
[/java]
In the previous article I explained how to display fusion charts please refer to it if you don’t now how to create fusion charts by clicking Here.
Html you need to display fusion chart
[java]
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>Fusion chart</title>
<script src="../js/jquery.min.js"></script>
<script src="../js/FusionCharts.js"></script>
<script src="../js/FusionCharts.HC.js"></script>
<script src="../js/FusionCharts.HC.Charts.js"></script>
<script src="../js/FusionCharts.jqueryplugin.js"></script>
<script src="../js/FusionChartsExportComponent.js"></script>
</head>
<body>
<div id="chartDisplaydiv"></div>
<script>
$(document).ready(function(){
$("#chartDisplaydiv").insertFusionCharts({
swfUrl: "Line",
dataSource: ‘../demo/jsonData’,
renderer: ‘JavaScript’,
dataFormat: "jsonUrl",
width: "1000",
height: "600",
id: "Sschart"
});
});
</script>
</body>
</html>
[/java]
In the above code at dataSource ‘../demo/jsonData’ we have the required json in format for single series chart.
You will get the following chart as the result
Multiple series chart
In order to create single series chart you need to have a json in the following format:
[java]
{
"chart":{ "caption":"Business Results 2005 v 2006", "xaxisname":"Month", "yaxisname":"Revenue", "showvalues":"0", "numberprefix":"\$" },
"categories":[{
"category":[{ "label":"Jan"},
{ "label":"Feb" },
{ "label":"Mar" },
{ "label":"Apr" },
{ "label":"May" },
{ "label":"Jun" },
{ "vline":"true", "color":"FF5904", "thickness":"2" },
{ "label":"Jul" },
{ "label":"Aug" },
{ "label":"Sep" },
{ "label":"Oct" },
{ "label":"Nov" },
{ "label":"Dec" } ]
}
],
"dataset":[{
"seriesname":"2006",
"data":[{ "value":"27400" },
{ "value":"29800" },
{ "value":"25800" },
{ "value":"26800" },
{ "value":"29600" },
{ "value":"32600" },
{ "value":"31800" },
{ "value":"36700" },
{ "value":"29700" },
{ "value":"31900" },
{ "value":"34800" },
{ "value":"24800" }]
},
{
"seriesname":"2005",
"data":[{ "value":"10000" },
{ "value":"11500" },
{ "value":"12500" },
{ "value":"15000" },
{ "value":"11000" },
{ "value":"9800" },
{ "value":"11800" },
{ "value":"19700" },
{ "value":"21700" },
{ "value":"21900" },
{ "value":"22900" },
{ "value":"20800" }]
}
],
"styles":[{
"definition":[{
"style":[{ "name":"CanvasAnim", "type":"animation", "param":"_xScale", "start":"0", "duration":"1" }]
}
],
"application":[{
"apply":[{"toobject":"Canvas", "styles":"CanvasAnim" }]
}]
}]
}
[/java]
For html you need to do the following changes in the code:
[java]
<script>
$(document).ready(function(){
$("#chartDisplaydiv").insertFusionCharts({
swfUrl: "MsLine",
dataSource: ‘../demo/jsonData’,
renderer: ‘JavaScript’,
dataFormat: "jsonUrl",
width: "1000",
height: "600",
id: "Mschart"
});
});
</script>
[/java]
Now at dataSource ‘../demo/jsonData’ we have the json for Multiple series chart.
You will get following chart as result
