WHAT'S NEW?
Loading...

How To create bar chart using OPEN FLESH CHART in PHP



 
     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