Open Flash Chart Helper: draw charts the Cake way
Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart/) is a nice solution to drawing charts from data on your applications. This helper makes using Open Flash Chart with CakePHP simple.
Note. spanish translation of this tutorial can be found here: http://aikon.com.ve/open-flash-chart-helper-graficos-al-estilo-cake/
Inside it there are two files needed to use this helper:
- open-flash-chart.swf place this file in your [app]/webroot/ directory
- php-ofc-library/open-flash-chart.php place this file in your [app]/vendors directory.
Download code
If you don't use svn you can fetch it directly from that url.
Download code
The examples below are all placed on a view file: [app]/views/pages/charts.ctp (so you must modify PagesController to use the Helper) and generate random data (but using data from database is equally easy).
This view generates a simple bar graph with the random data generated in a loop. To generate another graph in the same view you must allways call FlashChartHelper::begin to reset all data.
Tip: change 'graph_style' => 'bar' to one of the following to see all types of bar graphs that are available:
Tip: Flash Chart Helper automatically selects colors for each element in data if you don't set them explicitly.
Some enhancements could be done:
If you find anything missing, please report it: http://trac2.assembla.com/cakeopenflashchart/newticket
Prerequisites
To make use of this helper, first you need to download Open Flash Chart zip file from http://teethgrinder.co.uk/open-flash-chart/download.phpInside it there are two files needed to use this helper:
- open-flash-chart.swf place this file in your [app]/webroot/ directory
- php-ofc-library/open-flash-chart.php place this file in your [app]/vendors directory.
The Helper File:
To get the latest version of the helper fetch it from the subversion repo:Download code
svn co http://svn2.assembla.com/svn/cakeopenflashchart/trunk/flash_chart.php
If you don't use svn you can fetch it directly from that url.
Usage
Now, to use this helper do as in any other helper:Download code
<?php
var $helpers = array('FlashChart');
?>
The examples below are all placed on a view file: [app]/views/pages/charts.ctp (so you must modify PagesController to use the Helper) and generate random data (but using data from database is equally easy).
Example 1 - Bar Graphs
View Template:
Download code
<?php
// Sets height and width
$flashChart->begin(400, 250);
// Title
$flashChart->title('Example 1 - Bars: Hits per Day');
// Configure Grid style and legends
$flashChart->configureGrid(
array(
'x_axis' => array(
'step' => 1,
'legend' => 'Day'
),
'y_axis' => array(
'legend' => '#Hits',
)
)
);
// Prepare some random data (10 points)
$random_hits = array();
for ($i=0; $i < 10; $i++) {
$random_hits[] = rand(10,100);
}
// Register each data set with its information.
$data = array(
'Hits' => array(
'color' => '#afe342',
'font_size' => 11,
'data' => $random_hits,
'graph_style' => 'bar',
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange('y', 0, 100);
$flashChart->setRange('x', 0, 10);
// Show the graph
echo $flashChart->render();
?>
This view generates a simple bar graph with the random data generated in a loop. To generate another graph in the same view you must allways call FlashChartHelper::begin to reset all data.
Tip: change 'graph_style' => 'bar' to one of the following to see all types of bar graphs that are available:
- 'graph_style' => 'bar_sketch'
- 'graph_style' => 'bar_glass'
- 'graph_style' => 'bar_filled'
- 'graph_style' => 'bar_3D'
- 'graph_style' => 'bar_fade'
Example 2 - Line Graphs
To draw lines instead of bars, the only change needed in the example above is 'graph_style' => 'bar' to one of the following:- 'graph_style' => 'line'
- 'graph_style' => 'line_hollow'
- 'graph_style' => 'line_dot'
View Template:
Download code
<?php
// Sets height and width
$flashChart->begin(400, 250);
// Title
$flashChart->title('Example 2 - Lines: Hits per Day');
// Configure Grid style and legends
$flashChart->configureGrid(
array(
'x_axis' => array(
'step' => 1,
'legend' => 'Day'
),
'y_axis' => array(
'legend' => '#Hits',
)
)
);
// Prepare some random data (10 points)
$random_hits = array();
for ($i=0; $i < 10; $i++) {
$random_hits[] = rand(10,100);
}
// Register each data set with its information.
$data = array(
'Hits' => array(
'color' => '#00aa42',
'font_size' => 11,
'data' => $random_hits,
'graph_style' => 'lines',
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange('y', 0, 100);
$flashChart->setRange('x', 0, 10);
// Show the graph
echo $flashChart->render();
?>
Example 3 - Scatter (Points) Graphs
This type of graph uses a different syntax to define the data. It requires data to be set as points (pairs x,y), here is the example:View Template:
Download code
<?php
// Sets height and width
$flashChart->begin(400, 250);
// Title
$flashChart->title('Example 3 - Scatter: Some Random Points');
// Configure Grid style and legends
$flashChart->configureGrid(
array(
'x_axis' => array(
'step' => 1,
'legend' => 'Day'
),
'y_axis' => array(
'legend' => '#Hits',
)
)
);
// Prepare some random data (10 points)
$random_points = array();
for ($i=0; $i < 10; $i++) {
// Each point is represented as a pair (x,y)
$random_points[] = array('x' => $i, 'y' => rand(0,100));
}
// Register each data set with its information.
$data = array(
'Random Points' => array(
'color' => '#00aa42',
'font_size' => 11,
'data' => $random_points,
'graph_style' => 'scatter'
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange('y', 0, 100);
$flashChart->setRange('x', 0, 10);
// Show the graph
echo $flashChart->render();
?>
Example 4 - Pie Graphs
This type of graph also uses a different syntax, here is the example:View Template:
Download code
<?php
$flashChart->begin(400, 250);
$flashChart->title('Example 4 - Pie Chart: My imaginary Browser Stats');
$browser_data = array(
'Firefox' => array(
'value' => 30
),
'Opera' => array(
'value' => 7
),
'IE' => array(
'value' => 38
),
'Other' => array(
'value' => 25
)
);
$flashChart->pie($browser_data);
echo $flashChart->render();
?>
Tip: Flash Chart Helper automatically selects colors for each element in data if you don't set them explicitly.
Example 5 - Mixed Graphs
Open Flash Chart allows to draw various data sets inside one graph, you can mix bars with lines and scatter, here are some examples that extend the first example.View Template:
Download code
<?php
// Sets height and width
$flashChart->begin(400, 250);
// Title
$flashChart->title('Example 5 - Mixed: Hits per Day vs. # Visits');
// Configure Grid style and legends
$flashChart->configureGrid(
array(
'x_axis' => array(
'step' => 1,
'legend' => 'Day'
),
'y_axis' => array(
'legend' => '#Hits',
)
)
);
// Prepare some random data (10 points)
$visits = array();
$random_hits2 = array();
for ($i=0; $i < 10; $i++) {
$visits[] = rand(10,50);
$random_hits2[] = rand(50,100);
}
// Register each data set with its information.
$data = array(
'Hits' => array(
'color' => '#afe342',
'font_size' => 11,
'data' => $random_hits2,
'graph_style' => 'line_dot',
),
'Visits' => array(
'color' => '#324aef',
'font_size' => 11,
'data' => $visits,
'graph_style' => 'bar',
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange('y', 0, 100);
$flashChart->setRange('x', 0, 10);
// Show the graph
echo $flashChart->render();
?>
Results
The results from this examples can be found at http://aikon.com.ve/flashchart/What's Missing
At this point there are two types of charts that Open Flash Chart allows that the Helper doesn't implement:- High Low Close: http://teethgrinder.co.uk/open-flash-chart/gallery-hlc.php
- Candle: http://teethgrinder.co.uk/open-flash-chart/gallery-candle.php
Some enhancements could be done:
- Some higher level function to encapsulate many of the lines used in the examples can be written.
- Automatically choosing the ranges of the axis.
If you find anything missing, please report it: http://trac2.assembla.com/cakeopenflashchart/newticket
Comments
Comment
1 nice
Comment
2 thank you
Now the chart shows up :)
Comment
3 Chartable Behavior
http://bakery.cakephp.org/articles/view/chartable-behavior
Comment
4 Does not seems to work with Safari 3
from Safari's inspect element debugger, it shows the following error:
ReferenceError: Can't find variable: SWFObject
after this:
var so = new SWFObject("/open-flash-chart.swf", "ofc", "780", "390", "9", "#FFFFFF");
swfobject.js is placed in webroot/js folder, and apache virtual server set cake as home directory.
However, it works with Firefox 3 on my Mac.
Anyone can help?
Rgds,
chiacy
Question
5 Update for Open flash chart ver. 2?
Would it be easy to update the helper to used with version 2 of Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart-2/)?
/Anders
Comment
6 Version 2
http://bakery.cakephp.org/articles/view/flashcharthelper-version-3
Note that the new helper is not backward compatible, but hopefully it is even easier to use, so the upgrade work should not be too hard.
Comment
7 Does not find graph class
I m new to open flash chart.I copied all the files to the location as stated above.Now I m getting error "Class 'graph' not found in /opt/lampp/htdocs/reportgenerator/app/views/helpers/flash_chart.php on line 56".
Any solution would be appreciated
Comment
8 Json error
I have put all the files in the directory as u told in the article.
I m getting this error.Please brief any solution.Any help would be appreciated.
"
Open Flash Chart
JSON Parse Error [Syntax Error] Error at character 0, line 1:
0:
"
Comment
9 Re: Hijack
And I solved your issue in the google code issue you submitted (missing echo).
Comment
10 Help with IE
Basically if I have 1 pie chart (the only graph type I want) on a page it works beautifully in all browsers. However, if I try and render a second pie chart on the same page IE and safari kick up a fuss and won't load. Firefox, google chrome and opera all work as expected (hoped).
I am using this to render a chart in one of my views:
$flashChart->begin(400, 250);
$flashChart->title('Rewards By Year');
$flashChart->pie($year_data);
echo $flashChart->render();
and then further down the page this:
$flashChart->begin(400, 250);
$flashChart->title('Rewards By Subject');
$flashChart->pie($subject_data);
echo $flashChart->render();
If i comment out from $flashChart->pie($subject_data); IE loads fine, if I have that line or the render line in I get the following error...
'Internet Explorer cannot open the Internet site.
Operation aborted.'
I have been trying and trying to fix this but truth be told I don't know enough about javascript or any of this stuff to try and resolve the issue. Please can someone give me some help so I can move on and get on with other work for the site?
Thank you very much in advance.
OJBizzle
Question
11 Thanks for the sweet helper.
Otherwise, it works like a dream. Thanks again!
Comment
12 You have the wrong version of OFC
http://bakery.cakephp.org/articles/view/flashcharthelper-version-3
Frank
Comment
13 need help
I am getting following error? would you kindly guide me, what am i missing?
Fatal error: Class 'graph' not found in C:\wamp\www\testchart3\views\helpers\flash_chart.php on line 56
Thanks
Comment
14 Not showing the graph--error
i follwed all the steps stated above....
when i open the url....am getting this....
&title=Example+4+-+Pie+Chart%3A+My+imaginary+Browser+Stats,{font-size:14px;color:#333333;}& &x_legend=X,12,#666666& &x_label_style=9,#666666,0,#000000& &x_axis_steps=1& &y_legend=Y,12,#666666& &y_label_style=9,#666666& &y_ticks=5,10,5& &line=3,#87421F& &x_min=0& &x_max=0& &y_min=0& &y_max=0& &bg_colour=#ffffff& &x_axis_colour=#666666& &x_grid_colour=#dddddd& &y_axis_colour=#666666& &y_grid_colour=#dddddd& &pie=60,#505050,{font-size:12px;color:#333333;}& &values=30,7,38,25& &pie_labels=Firefox,Opera,IE,Other& &colours=#b663c8,#b6632d,#1b632d,#1bc72d& &links=& &tool_tip=%23x_label%23%3Cbr%3E%23val%23%25&
am not able to see the chart....
please help ASAP
Thanks,
Guru
Comment
15 same problem
Please help