Hello, friends here we will learn to create flesh chart using PHP. Gor this purpose we will use OPEN FLESH CHART to create chart. OPEN FLESH CHART is
opensource charting libraries and
Provides more then 30 diffrent charts like Bar Chart, Line Chart, Spider Chart,
Pie Chart, 3D Chart etc.
OPEN FLESH CHART use Flesh to display chart and import
data and config parameters (chart width,Height,legend,values of X-Axis
& Y-Axis,background etc.) and Juery
to attach chart with webpage.
We will use version OPEN FLESH CHART 2.
First of all we will create
index.php page as below.
Index.php
<script type="text/javascript"
src="js/swfobject.js"></script>
<script type="text/javascript">swfobject.embedSWF(
"open-flash-chart.swf",
"TOTAL",
"100%", "350", "9.0.0",
"expressInstall.swf",
{"data-file":"total.txt"}
);
</script><body>
<div
id="TOTAL"></div>
</body>
We have added total.txt inwhich our
chart parameter is declared using JQuery with default hight, width, our flesh
(.swf) file.
Our parametters in total.txt areas
below
Total.txt
{
"bg_colour":
"#ffffff",
"title":{
"text": "",
"style": "{font-size: 12px;}"
},
"x_legend":{
"text":
"Year",
"style":
"{color: #736AFF;}"
},
"y_legend":{
"text": "Amount (Millions)",
"style": "{color: #736AFF;}"
},
"elements":[
{
"type":
"bar_3d",
"alpha": 0.99,
"colour":
"#2D89EF",
"text":
"Comapny 1",
"tip": "Comapny 1
Amount: #val#",
"font-size": 10,
"on-show":
{"type": "grow-up", "cascade":5,
"delay":0.5},
"values" :
[1229.869024,934,1312,567.508,3234]
},
{
"type":
"bar_3d",
"alpha": 0.99,
"tip": "Comapny 2
Amount: #val#",
"colour":
"#CD950C",
"text":
"Comapny 2",
"font-size": 10,
"on-show":
{"type": "grow-up", "cascade":5,
"delay":1},
"values" :
[781,995,241,222,344]
},
{
"axis":
"right",
"type":
"line",
"colour":
"#736AFF",
"text":
"Ratio",
"font-size": 10,
"width": 1,
"dot-style": {
"type":"anchor", "sides":4,
"alpha":1,
"hollow":true,
"background-colour":"#ffffff",
"background-alpha": 0.4,
"width":1,
"tip":"#val# %" },
"values" :
[22.80,75.87,32.2,71,69]
}
],
"x_axis":{
"stroke": 0,
"tick_height": 9,
"colour":
"#808080",
"grid-visible": false,
"steps": 5,
"labels":{
"steps":1,
"labels":[
"2007-08",
"2008-09",
"2009-10",
"2010-11",
"2011-12"
]
},
"3d":
15
},
"y_axis":{
"stroke": 0.2,
"tick_length": 100,
"colour":
"#808080",
"grid-colour":"#ccddcc",
"offset": 0,
"steps": 500,
"max": 2500
},
"y_axis_right":{
"tick-length": 5,
"stroke": 0.9,
"colour":
"#d0d0d0",
"min":
0,
"max":
100,
"steps": 20,
"grid-visible":
false
}
}
 |
| Output |
we have added three two Bar columns
and single line with multiple Y-AXIS.
Our Flesh Chart will look as below
To Download Source click here
0 comments:
Post a Comment