Generate dynamic chart using amchart and php
Introduction
Last week, I’ve been assigned new task to make my chart as interactive as possible, that is need to add some functionality like tooltip, animation, etc which is -almost- impossible to accomplished with javascript.
The last choice is to use SWF-generated chart. The only disadvantage of majority of swf chart out there are lack of capability of export to image file. Then I found amchart, with outstanding style, documentation, template, etc, and the story begin..
What is amchart?
AmCharts is a set of tools that lets you have good-looking and functional charts on your website. The tools use Adobe Flash technology for a compelling online experience. The charts can be simple and very quick to create, but they can also be elaborate and beautiful. You can display charts in any HTML page (web page), or inside another Flash movie. You can also use the charts in PowerPoint presentations
in the sort, amchart is swf chart that used many data source type (xml, csv, etc) as data series, with capability of export chart into JPEG filetype.
Where to get it?
You can freely download from Here. The bundle comes with tons of examples and tutorials.
Lets start
Here we will make chart that shows statistic of visitor of certain month. This task will be finished in following steps:
- Requirement
- Download amchart
- Put to our server
- Coding..
0. Requirement
To make this chart works, make sure you have right to read/write to your folderchart_app). And Your have to install flash player to make the chart runs well.
1. Download amchart
You can download the latest version of amchart via its site. This tutorial use amcolumn_1.6.1.2, but the latest version should work well.
The chart type we will use is amcolumn one, so we only have to copy the amcolumn folder for later use.
2. Put to our server
Make a folder on root of your server (htdocs, www, depend on your server). We will use chart_app/ for this tutorial.
Inside chart_app/ put amcolumn_1.6.1.2/.
All preparation is done, then..
3. Coding..
Now we will fetch visitor’s statistic for certain month using php. Make chart.php file using your favorite text-editor as described in Listing 1, then put on the chart_app/ folder.
Listing 1. Chart.php
<?php
/**
* File: chart.php
* author: imamiscool
* description: generate chart of visitor statistic for certain month
*/
/**
* Here we will fake the process of FETCH DATA from DATABASE
* to simplify the tutorial, the day of every month are equal to 30 days.
*/
$dummy_data = array(
array(66,95,40,93,48,88,70,63,62,36,24,36,80,74,50,22,25,86,45,81,69,7,55,22,32,20,77,4,87,60),
array(58,36,57,12,96,79,12,10,36,40,74,38,76,81,16,31,63,9,60,73,94,85,76,98,15,18,88,91,23,67),
array(67,86,65,42,35,67,39,2,63,70,90,56,74,77,16,63,40,25,64,34,81,96,30,27,72,26,62,52,32,99),
array(56,68,34,48,60,85,100,60,69,62,2,67,31,8,61,54,43,83,50,56,52,96,91,58,55,6,54,92,97,24),
array(63,44,77,7,89,49,42,66,53,90,87,60,28,2,60,98,36,69,58,40,49,25,28,95,88,56,66,23,25,95),
array(20,32,82,27,86,83,31,87,11,84,94,57,92,95,42,74,76,26,99,21,60,35,35,32,91,32,72,92,65,77),
array(82,36,30,79,88,48,82,97,60,62,68,40,22,62,85,68,44,83,80,91,49,10,50,68,8,76,42,7,44,66),
array(52,69,27,15,28,63,81,6,65,48,77,75,12,33,37,5,66,79,33,31,72,94,86,37,27,37,69,58,80,19),
array(3,77,26,98,60,31,13,84,63,2,36,36,82,25,44,64,40,85,33,27,9,15,50,34,11,1,92,45,17,77),
array(6,69,50,26,88,65,80,84,85,43,31,35,95,62,74,13,64,32,31,2,89,12,73,37,17,12,23,3,44,89),
array(53,33,19,56,84,12,37,69,88,75,45,39,87,5,41,26,54,38,71,38,9,57,32,35,25,97,71,27,23,42),
array(84,72,76,27,20,80,6,36,73,11,83,3,93,73,31,14,74,27,21,1,65,81,74,50,62,96,64,94,12,79)
);
/**
* Get from user request the number of month
* that will be displayed
*/
if( isset($_GET['month_number']) ){
$month_number = (int)$_GET['month_number'];
// fetch data,
// you can change this part by mysql_query or anything
// that suitable to your case
if( $month_number > 0 && $month_number < 13 ){
$data = $dummy_data[$month_number-1];
// title of chart
$chart_title = 'Number of visitor <br/> Month : '.$month_number;
// path to file of our chart_data.xml,
// that store the data of our chart
$xml_file = 'chart_data.xml';
// format data into xml data
$xml_data = ' <?xml version="1.0" encoding="UTF-8"?>'."\n";
$xml_data.= ' <chart>'."\n";
// generate data series
$xml_data.= ' <series>'."\n";
for($i=1; $i<=30; $i++){
$xml_data.= ' <value xid="'.$i.'">'.$i.'</value>'."\n";
}
$xml_data.= ' </series>'."\n";
// now, make the data
$xml_data.= ' <graphs>'."\n";
$xml_data.= ' <graph gid="1">'."\n";
$xml_data.= ' <type>column</type>'."\n";
$xml_data.= ' <title>Visitor</title> '."\n";
for($i=1; $i<=30; $i++){
$xml_data.= ' <value color="#FCD202" xid="'.$i.'">'.$data[$i-1].'</value>'."\n";
}
$xml_data.= ' </graph>'."\n";
$xml_data.= ' </graphs>'."\n";
// putting the title
$xml_data.= ' <labels>'."\n";
$xml_data.= ' <label lid="3">'."\n";
$xml_data.= ' <x>0</x>'."\n";
$xml_data.= ' <y>0</y>'."\n";
$xml_data.= ' <align>center</align>'."\n";
$xml_data.= ' <text><![CDATA[<b>'.$chart_title.'</b>]]></text>'."\n";
$xml_data.= ' </label>'."\n";
$xml_data.= ' </labels>'."\n";
$xml_data.= ' </chart>'."\n";
// save it
file_put_contents($xml_file, $xml_data);
// generate outputs
?>
<script type="text/javascript" src="amcolumn_1.6.1.2/amcolumn/swfobject.js"></script>
<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
</div>
<script type="text/javascript">
// <![CDATA[
var myChart = new SWFObject("amcolumn_1.6.1.2/amcolumn/amcolumn.swf", "amcolumn", "600", "300", "8", "#FFFFFF");
myChart.addVariable("chart_id", "my_id");
myChart.addVariable("path", "amcolumn_1.6.1.2/amcolumn/");
myChart.addVariable("settings_file", encodeURIComponent("chart_setting.xml"));
myChart.addVariable("data_file", encodeURIComponent("chart_data.xml"));
myChart.write("flashcontent");
// ]]>
</script>
<?php
}
else{
die("Month number invalid.");
}
}
else{
/**
* Display form
*/
echo "<form method='GET' action='chart.php'>
<label for='month_number'>Insert month number (1-12) here : </label>
<input type='text' name='month_number' id='month_number'/>
<input type='submit' value='Submit' />
</form>";
}
Now we have the script to generate the “xml” data dynamically, but we have to specified the xml setting for the chart we will generate, here is the minified version of the setting (we can modify or add/remove attributes to styling the chart, read the example to see more option on this setting).
Write these xml into file chart_setting.xml at the same folder of our previous chart.php
List 2. chart_setting.xml
<?xml version="1.0" encoding="UTF-8"?>
<settings>
<type>column</type>
<data_type>xml</data_type>
<font>Tahoma</font>
<colors>#fff000</colors>
<column>
<width>85</width>
<spacing>0</spacing>
<grow_time>1</grow_time>
<sequenced_grow>true</sequenced_grow>
<balloon_text>
<![CDATA[{value}]]>
</balloon_text>
<hover_brightness>30</hover_brightness>
</column>
<plot_area>
<margins>
<left>70</left>
<top>60</top>
<right>50</right>
<bottom>80</bottom>
</margins>
</plot_area>
<legend>
<enabled>false</enabled>
</legend>
<export_as_image>
<file>amcolumn_1.6.1.2/amcolumn/export.php</file>
</export_as_image>
<labels>
<label lid="0">
<x>10</x>
<y>260</y>
<rotate>true</rotate>
<width></width>
<align>center</align>
<text>
<![CDATA[<b>Number of visitor</b>]]>
</text>
</label>
<label lid="1">
<x>0</x>
<y>250</y>
<rotate>false</rotate>
<width></width>
<align>center</align>
<text>
<![CDATA[<b>Date</b>]]>
</text>
</label>
</labels>
</settings>
Now, we have the data-generator, the setting.. then?
try it out.. go to http://localhost/chart_app/chart.php
the page would looks like this:
then, enter the “Submit” see the result..
You will see a chart with interactive capability like this.
Export capability
Right-click anywhere on the chart. The export menu will appears.
Happy chart-ing…
Download source
You can download final version of this tutorial Here
What next?
Next week (I hope) we will continue to add drill-down feature into our chart.
Happy coding
