" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
|
Many applications need graph implementation because its a good way of representing data. It is also very eye catching. So here,I am going to describe various ways of creating Graphs(simple to animated). There are many sites which provide garphs. But here I am going to discuss about 2 libraries i.e. libchart and Fusion Chart.
Lib Chart :-
The Link is
The code can be downloaded from here. After downloading there is also a manual which describes each and every option. There are also some demo pages showing different types of charts i.e. Bar, Line, Pie, Multiple Bar, Multiple Line. These are the basic charts.
One has to just copy the whole class folder and the font folder and then include that class file( classes/ libchart.php ) in the page in which we want the graph. The font files path should be changed in file ( classes/view/test/Text.php ) in line 40 and 41. The base directory file path should be changed on line 37. Then in the page in which graph needs to be implemented, we have to place this code.
header(“Content-type: image/png”);/* This creates the chart as an image*/
$chart = new PieChart(500, 300);/* This calls the object for pie chart with specific width and height */
$dataSet = new XYDataSet();/* This creates a data set(Array) that will be mapped in the graph. */
$dataSet->addPoint(new Point(“Bleu d’Auvergne”, 50));/* Creates the point in the pie */ $dataSet->addPoint(new Point(“Tomme de Savoie”, 75)); $dataSet->addPoint(new Point(“Crottin de Chavignol”, 30)); $chart->setDataSet($dataSet);/* Bind the data set to the chart object */ $chart->setTitle(“Preferred Cheese”);/* Show title of the graph */ The interesting thing is the calculation for the area occupied by each element is done by the class automatically. In the above for ‘ Bleu d’Auvergne ‘ the value is 50. So it will occupy ( 50/(50+75+30) ) * 100 % of the total pie chart.
Other chart can be easily prepared by this. There aree many samples available in the downloaded file.
|
|
Fusion Chart :-
The link is
One has to register there. No charges applied. Just give the name and email id and it will redirect to the download page. This contains demos with source code and a very useful manual.
Here one just have to include 2 class files present in (FusionChartsFree/Fusion_Charts/Code/PHP/Includes ) i.e. FC_Colors.php( For assigning different colors to the graph ) and FusionCharts.php( For creating animated graphs ). Then include the javascript file FusionCharts.js (FusionChartsFree/Fusion_Charts/FusionCharts ) and then include those swf files ( FusionChartsFree/Fusion_Charts/FusionCharts ) . These swf files are ShockWave flash files for animation.Fusion chart convert the xml data into the graph. So the data should be in xml format.
Then in your page write the below code :-
/* Creates an array for the data */
$arrData[0][1] = “Product A”;
$arrData[1][1] = “Product B”; $arrData[2][1] = “Product C”; $arrData[3][1] = “Product D”; $arrData[4][1] = “Product E”; $arrData[5][1] = “Product F”; //Store sales data $arrData[0][2] = 567500; $arrData[1][2] = 815300; $arrData[2][2] = 556800; $arrData[3][2] = 734500; $arrData[4][2] = 676800;
$arrData[5][2] = 648500;
//Now, we need to convert this data into XML. We convert using string concatenation.
//Initialize <graph> element $strXML = “<graph caption=’Sales by Product’ numberPrefix=’$’ formatNumberScale=’0′ decimalPrecision=’0′>”; //Convert data to XML and append foreach ($arrData as $arSubData) $strXML .= “<set name='” . $arSubData[1] . “‘ value='” . $arSubData[2] .”‘ color='”. getFCColor() .”‘ />”; //Close <graph> element
//Create the chart – Column 3D Chart with data contained in strXML
//Here the flash file is incuded and the graph is rendered of specific height and width.
echo renderChart(“FCF_Column3D.swf”, “”, $strXML, “productSales”, 600, 300); There are many more options present in the manual( FusionChartsFree/Fusion_Charts/Index.html ).
The graph implementation is complete with little animation.
|