There is a very slick flash charting tool out there called amCharts (www.amcharts.com). If you are in need of some reporting or charting UI for your application, I strongly recommend it.
This is a quick guide on how to get it working with CakePHP.
For this example, I’ll show you how to get the amLine setup, but the rest (amPie, amColumn, etc.) are pretty similar.
1. First create a directory in your webroot called ‘amcharts’.
2. Next, download the zip with Line and Area chart.
3. There should be two folders in the archive (amline and examples).
4. Extract the following files into your ‘amcharts’ directory:
– amline.swf
– amline_settings.xml
5. The rest you really don’t need to worry about for right now.
6. Also, extract the ‘plugins’ and ‘fonts’ folders right into your ‘amcharts’ directory.
So basically you should have something like this:
amcharts
|- fonts (directory with fonts)
|- plugins (directory with value_indicator.swf)
|
|- amline.swf
|- amline_settings.xml
Now create an empty file called amcharts_key.txt and place it in your ‘amcharts’ directory (it will save you some headache in the future). This file is required to hold the key if you purchsase a license for your charts (otherwise you’ll see a tiny text along the lines of ‘chart by amcharts.com’), without this file present I ran into all sorts of silly problems, the cause of which wasn’t very obvious.
Lastly, extract the swfobject.js file into your ‘js’ directory (in your webroot, where you keep all your JavaScript includes).
Let’s say that you already have a model and a controller setup (if not, you shoud create some for testing).
Let’s create a view and call it chart.ctp. You will need to include the swfobject.js, so at the top of view do:
[sourcecode language=’php’] link(‘swfobject’, false); ?> [/cc]
Now, in the view you will need to include the amCharts code, here’s a sample:
[sourcecode language=’php’]
[/cc]
Couple of things to note here… You’ll notice the echo microtime() after the amline_settings.xml, this little trick will ensure that whenever you update the settings file, amCharts will use a fresh copy (rather than the one you have in cache, leaving your wondering why none of your changes are taking effect).
Then you’ve got $seriesXML and $valuesXML variables. This is actual data to be displayed on the chart. Of course, these variables will have to come from your controller as XML strings.
So, what kind of data are we going to display on this chart? Well, for the sake of example let’s say we will display the date on X-axis (our series) and the number of log-ins into your application on the y-axis (our values).
You did your ‘find’ in the controller and now you have an array that looks something like this:
[0] => Array
(
[thedate] => Apr 4, 2008
[count] => 375
)
[1] => Array
(
[thedate] => Apr 5, 2008
[count] => 412
)
[2] => Array
(
[thedate] => Apr 6, 2008
[count] => 407
)
[3] => Array
(
[thedate] => Apr 7, 2008
[count] => 415
)
… and so on…
You will now need to step through this array and convert it to simple XML strings, then pass the resulting strings to the view as $seriesXML and $valuesXML. (Remember those variables in the view you’ve setup earlier?)
Setup this function in the controller:
[sourcecode language=’php’]
function __buildXMLstring ($data, $type) {
$counter = 0;
$xmlString = ”;
foreach($data as $key => $value) {
$xmlString .= ‘
$counter++;
}
return $xmlString;
}
[/cc]
So you’ve already used the ‘find’ method and got the data (in the format as the array above) stored in the $myData array variable.
$this->set(‘seriesXML’,$this->__buildXMLstring($myData, ‘thedate’));
$this->set(‘valuesXML’,$this->__buildXMLstring($myData, ‘count’));
Note, that as a second parameter you are passing the array key, so that correct values will be used for both axis of your graph.
This will generate the appropriate XML for your data array that should now display nicely in your chart.
Note, that if you are displaying huge amounts of data, it might be best to write it to a file instead of passing it to the view. Anything passed to the view will be rendered by the browser and if you’ve got thousands of rows of data it could cause some serious problems with performance.
There are a lot great features in amCharts, but you’ll have to dig around the documentation to get the full benefits. Good news is that it’s relatively easy to follow once you get the basics down.
Good luck!
