FlashChartHelper - version 3 (Articles) | The Bakery, Everything CakePHP

FlashChartHelper - version 3

The magic continues with this helper that lets you embed graphs and pie charts with just a few easy lines of code! This helper lets you take advantage of the awesome Open Flash Chart project by acting as a wrapper and let you plug cake directly into this great vendor.

Background

The sole purpose of this helper is to integrate OpenFlashChart2 (OFC)[1] with cake in a conventional way. To be honest, the php vendor's api is not great, so I have tried to make the helper protect you from the inconsistency as much as I can. It is based on the work of Joaquin Windmuller and his article on the bakery[2], which is a wrapper for the original OpenFlashChart.

There are some major changes in this helper. When I decided to make an effort in updating the helper to OFC2, it soon became apparent that there was major differences and api changes would have to be made. Since it would not be fully backward compatible, I decided to throw it all out and start over. That is why this version has its own api.

The three most mentionable upgrades is that chart types are now (mostly) interchangeable, that the helper can take direct use of the cake results of a find('all') and that all but "Horizontal Bar" is implemented in the helper.

The new way that the helper takes in datasets does away with the need for the behavior that I wrote for the Joaquin version.

What it does

The vendor is in it's core a flash file. In our case we use this helper to wrap to the php vendor to write javascript that in turn sends data to the flash. The OFC also includes other means of contact for the flash. The flash is very customizable and you should be able get the graph looking you want.

Requirements

This helper uses the FlashHelper [3][4] to embed the flash (using the javascript SwfObject). You also need to install the files from the vendor.

For simplicity's sake here is a list of files you should have and where they should be located:

/app/views/helpers/flash_chart.php
/app/views/helpers/flash.php
/app/vendors/flashchart/open-flash-chart.php
/app/vendors/flashchart/*37 other files at the time of this writing*
/app/webroot/open-flash-chart.swf
/app/webroot/js/swfobject.js
/app/webroot/js/json/json2.js

The current version of the helper is found on page 4 of this article, but you may wish to download the whole package here[4] (select the newest FlashChartHelper version).

Feedback and updated code

As I update the code, I will post new versions to my Google-Code project[5] and you can also send any issues there[6]. I will only update this article for major fixes. Please leave a comment if you have any general issues or you can look me up in the IRC channel as 'alkemann'.

Links

Page 2: Usage and examples

Comments

CakePHP Team Comments Author Comments

Question

1 thanks

thanks a lot for this tutorial.

Comment

2 New beta

3.3.1 Beta is available on the google code project.

New features are better multiple independent charts and prototype compatibilities.

Comment

3 divDomId use

The div dom object is replaced, so there really isnt any need for it. It's just more stuff you have to write. If you can give me a good reason to put it back the way it was, I'll do that.
Here is my config : 4 blocs within a sortable div. Each have a sub div with a specific id. These 4 subdivs are where I draw the charts. In order for the code to be readable and nice, I first draw the divs, then add the SWF stuff. Therefore the divDomId is definitively something I need. Perhaps you can drop it the end of args so as it is not obstrusive.
Could you please report the tooltip issue you have there with a little bit more info?
Thanks for your feedback The problem with the tool tip happens if you set it to sometext with a
inside the text. The javascript->object of CakePHP is likely to be the responsible for addind a \ before the / and result in
passed to the swf and this is not something OFC likes... Using the HTML4
is working though as a workaround !

Thanks, and I'll get an eye on 3.3.1. :)

Comment

4 Re: divDomId use

Ok, it's back as of 3.3.2

About your tooltip thing, I'll look more into it, but yea, using just


<br>

works for the tooltip as per examples in the OFC2 docs.

Comment

5 newbie problems

Hi all,

Today was my first day trying Cake Helpers and OFC. After a couple of hours I've finally managed to display a simple chart. For anyone not familiar with the FlashChart helper, I think this information will turn out very helpful:
1. besides including the Flash helper (which you will not use yourself, but is used in the FlashChart helper), you need to include the swfobject.js in your page. I did this with a simple link('swfobject.js'); ?> in my view

2. now for the really tricky part, which I could not find in the online documentation (good think I peaked in the FlashChart helper source code):
after echoing the result of the chart() method call, YOU NEED TO echo the result of the render() method call like this:




echo $flashChart->chart();

echo $flashChart->render();

Of course you can add all the desired parameters to the chart method call. Also keep in mind that the render method accepts four parameters: $width = null, $height = null, $chartId = 'default', $domId = false.

Comment

6 Re: newbie problems

I am sorry you had problems getting started. I'll take the blame for that by not having good enough documentation and confusing people with two versions of the helper. The render() call is NOT used in the version of the helper that is talked about in this article. render() is reimplemented in version 3.3 found on the google code project.

If you download the package files from the google project, they should include both the FlashHelper and the swfobject.js files that is required, so you shouldn't have to include these yourself.

So to summarize. This article is consistent with version 3.1 (also available on the google code page), but NOT version 3.3 (which has some api changes). I keep the documentation in the file itself updated, so that is really the best place to find out how to use it.

Comment

7 3.3.2

Hello!

just one notice for starter - there is a bug in your helper at start, public $swf = 'flash/open-flash-chart.swf'; instead of public $swf = 'open-flash-chart.swf';
(in zip file, .swf file is in webroot so if this not removed it just shows white square without graph).

But, besides that, you said that this version works with prototype, but when i start it, flash debug window opens with this text (same as in previous versions):

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at JsonInspector$/has_pie_chart()
at main/build_chart()
at main/parse_json()
at main/find_data()
at main()

When not including prototype.js, everything works.
Am i overseeing something or there actually is some bug or whatever?

Thank you.

UPDATE: I noticed now options for begin method:

* @param array $options valid options are 'prototype'
* @example $flashChart->begin(array('prototype'=>true));

Just a suggestion, maybe to put it at the begining of the helper to emphasize it, so that people don't have to look through the code.

Thank you for your effort in making all this.

Comment

8 New release, new api

Some of you have been testing the new 3.3 version where I was testing some api changes to accommodate, among other things, multiple diagrams in one page. I have now updated the article to fit the new api. Important changes are the introduction of the render method that embeds the flash and the changes to the begin method, that now only takes in options (prototype compatibility).

Also I have set up an svn at the google code project : http://code.google.com/p/alkemann/source/checkout

Comment

9 Small mod

made a small mod to the helper to be able to use percent witdh and height values. Inside the render() method, in line 348:
if (is_numeric($width) || preg_match('/^\d+%$/', $width)) {

and in line 351:
if (is_numeric($height) || preg_match('/^\d+%$/', $height)) {

Thanks!

Question

10 Ruh roh no more!

nevermind the errors I posted before.. my json2.js file happened to sneak into the /js folder as opposed to /js/json :)

Works great! Thanks for a great helper!

Comment

11 Very handy

Excellent stuff. Thanks for making this available.

Question

12 Pie Chart

I wanted just display the code in my view :




echo $flashChart->begin(array('prototype'=>true));

$flashChart->setToolTip('#percent# of 100%');

$flashChart->setTitle('Cake chart','{color:#f1a334;font-size:25px;padding-bottom:20px;}');

$flashChart->setData(array(13,3));

echo $flashChart->pie(array('start_angle' => 59,'values' => 'true', 'tooltip' =>  '#val# of #total#<br>#percent# of 100%'));

echo $flashChart->render(400,250);

I was able to get the pie chart displayed, but how can I define my own colors and have a legend for the two parts of the pie

Thanks

Comment

13 IE Issue

I updated Flash Plugin to 10. it's working like a charm
Hi,
I was able to display all the charts nice and pretty looking in Firefox, but IE ( 7 and 8 ) is a nightmare, it could not diplay the charts.
I don't know if you guys have similar problem ? I am using :
Cakephp : 1.2.0.6311
Prototype : 1.6.0.3
PHP 5
OFC : version-2-ichor
Flash chart Helper : 3.3.7

Question

14 Problem when trying to load new JSON data

I've been banging my head over this for a few hours.
I'm trying to reproduce this example using this helper (http://teethgrinder.co.uk/open-flash-chart-2/tutorial/chart-5.php) Where clicking a link, this would load new JSON data into an existing chart, and generate a new chart. When I do this, I get the javascript error:
"tmp.load() is not a function"

I've been trying to compare the two flash objects that get created in the example, and the way cake makes it. The difference I see is that flash params are used as the data holder using the cake method, whereas the flash object in the example does not .

Has anyone else encountered this problem?
Sorry if this sounds like crazy rambling, let me know if anything needs clarifying.

Question

15 How to show keys

Hi, I made a line chart with 3 diferent set of data: red line for one set, blue line for set two and green line for set three. The lines show well, but I need the user to know what is the mean of each color. Searching the open flash chart docs I found that set_key do the trick, but how can I do that from FlashChartHelper? Thanks in advance

Comment

16 Rotated Labels

I tried to rotate the labels in the x-axis but it was not working, I realized that you check if (isset($options['vertical'] && $options['vertical'] == true) {...} so it never passes this point because the parameter vertical is in $labelsOptions and not in $options.




public function axis($axis, $options = array(), $labelsOptions = array()) {

        ..........



        if ($axis == 'x' && is_string($this->labelsPath) && !empty($this->labelsPath) ) {

            if (sizeof($labelsOptions) > 0) {            

                $labels = Set::extract($this->data, $this->labelsPath);

                $x_axis_label = new x_axis_labels;        

                foreach ($labelsOptions as $key => $setting) {   

                    $set_method = 'set_' . $key;

                    $x_axis_label->$set_method($setting);      

                }    

                $x_axis_label->set_labels($labels); 

                $axis_object->set_labels($x_axis_label);

            } else {

                $labels = Set::extract($this->data, $this->labelsPath);

                $axis_object->set_labels_from_array($labels);

            }

        } elseif (isset($options['labels']) && is_array($options['labels'])) {



// Here it should check vertical parameter using $labelOptions



            if (isset($labelsOptions['vertical']) && $labelsOptions['vertical'] == true) {            

                $x_axis_label = new x_axis_labels;           

                $x_axis_label->set_vertical();          

                $x_axis_label->set_labels($options['labels']); 

                $axis_object->set_labels($x_axis_label);

            } else {

                $axis_object->set_labels_from_array($options['labels']);

            }             

        } elseif (isset($options['labels'])) {

            $axis_object->set_labels($options['labels']);

        }

        

        $this->Chart->$axis_set_method($axis_object); 

    }

Question

17 Can't seem to set x-axis labels

I can get the chart to plot my data but cannot figure out how to make it show the x-axis labels that I want. From the examples I believe this should work but it doesn't:


$flashChart->setData($months, '{n}.totals.sum_qty_verified','{n}.month');

Here's my data ($months array): http://bin.cakephp.org/view/1970674324

It correctly plots the totals.sum_qty_verified but the x-axis labels are just numbered 0 to whatever no matter what I try. I am wanting to have them labelled with the $months[]['month'] value (the name of the month). Can someone suggest how to fix this? Do I need to re-structure my $months array?

Thanks
Chris

Comment

18 Answering my own question...

Seems I found the problem, it isn't clear from the instructions but for the x-axis labels to appear you must also have this:


$flashChart->axis('x',array('tick_height' => 5,'3d' => -20),array('vertical' => true));

Wasted an evening on that! Great helper though, so thank you!

Comment

19 distinct month, then chart doesn't show up

Hi, i'm trying to display the graph with x-axis as months and y-axis as the the total cost for each month. This is my code, the chart doesn't show up. But up it did show up when i tried the "$flashChart->setData(array(1,2,4,8));" so its not a problem of the files.

controller:

$this->set('datamonths',$this->Finance->find('all', array('fields' => array('DISTINCT MONTH(Finance.created) AS created','SUM(Finance.cost) AS cost'),'order' =>'created','group'=>'created')));

view:

echo $flashChart->begin();

$flashChart->setData($datamonths, '{n}.cost','{n}.created');

$flashChart->setLegend('x','Month');
$flashChart->setLegend('y','Expenditure', '{color:#AA0aFF;font-size:20px;}');

$flashChart->axis('x',array('tick_height' => 5,'3d' => -20),array('vertical' => true));

$flashChart->axis('y',array('range' => array(0,10000,1000)));

echo $flashChart->chart();
echo $flashChart->render();

Please help!

Question

20 How to solve IE issues ...

Hi,
I was able to display all the charts nice and pretty looking in Firefox, but IE (6, 7 and 8 ) is a nightmare, it could not diplay the charts.
I don't know if you guys have similar problem ? I am using :

PHP 5

Flash chart Helper : 3.3.7

Question

21 How to show key in chart?

In original multiple dataset in chart has


$bar->key('mykey');

in this tuterial i can't find that, help me please....T T

Comment

22 I can add it..but..

now i can add key by used:'key'=>'Computer'




echo $flashChart->chart('bar_glass',array('colour'=>'#33cc33','key'=>'Computer'),'Set1','dig');   

echo $flashChart->chart('bar_glass',array('colour'=>'#D54C78','key'=>'Computer2'),'Set2','dig');

echo $flashChart->chart('bar_glass',array('colour'=>'#3334AD','key'=>'Computer3'),'Set3','dig');

but my page show an error




Warning (2): Missing argument 2 for bar_base::set_key(), called in D:\wamp\www\024_kpi2\app\views\helpers\flash_chart.php on line 466 and defined [APP\vendors\flashchart\ofc_bar_base.php, line 13]



Code | Context



$text    =    "Computer"



     * @param $size as integer, size in pixels



     */



    function set_key( $text, $size )



bar_base::set_key() - APP\vendors\flashchart\ofc_bar_base.php, line 13

FlashChartHelper::chart() - APP\views\helpers\flash_chart.php, line 466

include - APP\views\mains\index.ctp, line 22

View::_render() - CORE\cake\libs\view\view.php, line 662

View::render() - CORE\cake\libs\view\view.php, line 376

Controller::render() - CORE\cake\libs\controller\controller.php, line 799

Dispatcher::_invoke() - CORE\cake\dispatcher.php, line 230

Dispatcher::dispatch() - CORE\cake\dispatcher.php, line 194

[main] - APP\webroot\index.php, line 88



Notice (8): Undefined variable: size [APP\vendors\flashchart\ofc_bar_base.php, line 17]

How to solve it?............

At last I can do it by


'key'=>array('Computer',12)




echo $flashChart->chart('bar_glass',array('colour'=>'#33cc33','key'=>array('Computer',12)),'Set1','dig');   

echo $flashChart->chart('bar_glass',array('colour'=>'#D54C78','key'=>array('Computer2',12)),'Set2','dig');

echo $flashChart->chart('bar_glass',array('colour'=>'#3334AD','key'=>array('Computer3',12)),'Set3','dig');

Question

23 How to set a label in the chart data

i use the following code to generate the pie chart and it is ok.


echo $flashChart->begin(array('prototype'=>true));

$flashChart->setTitle('title', '{color:#f1a334;font-size:25px;padding-bottom:20px;}');

echo $flashChart->setData(array(1,3,6,9), '{n}', false, 'stuff');

echo $flashChart->chart('pie', array(), 'stuff', 'chart1'); 

echo $flashChart->render(400, 400, 'chart1', 'chartDomId1');

but instead of showing numbers, i want to display the label of the data. i tried to create the label following the example below. but it doesn't work.
http://code.google.com/p/alkemann/wiki/ExampleCustomize
anyone can help? thanks very much for your help.

Kit

Comment

24 Easy to show label in your chart...

i use the following code to generate the pie chart and it is ok.


echo $flashChart->begin(array('prototype'=>true));

$flashChart->setTitle('title', '{color:#f1a334;font-size:25px;padding-bottom:20px;}');

echo $flashChart->setData(array(1,3,6,9), '{n}', false, 'stuff');

echo $flashChart->chart('pie', array(), 'stuff', 'chart1'); 

echo $flashChart->render(400, 400, 'chart1', 'chartDomId1');


echo $flashChart->chart('bar_glass',array('colour'=>'#33cc33','key'=>array('Computer',12)),'Set1','dig');


'key'=array('your label',12)

that is label you can set...

Comment

25 how about labeling a particular value?

You can add


echo $flashChart->chart('bar_glass',array('colour'=>'#33cc33','key'=>array('Computer',12)),'Set1','dig');


'key'=array('your label',12)

that is label you can set...
but what about if i want to label the particular value? for example, in the pie chart. there are 4 sectors
rabbit = 1
mouse = 3
cat = 6
dog = 9

i want to show the name of each animal together with its corresponding value in the pie chart.

is that possible? thanks.

Comment

26 Full concept in a chart...

You can add


echo $flashChart->chart('bar_glass',array('colour'=>'#33cc33','key'=>array('Computer',12)),'Set1','dig');


'key'=array('your label',12)




<?php  

//print_r($data1);  

echo $flashChart->begin();    

$flashChart->setTitle('Title Name',array('{font-size:20px}'));   

$flashChart->setData($data1,'{n}.Point.point','{n}.Indicator.code','Set1','dig');                

$flashChart->setData($data2,'{n}.Point.point','{n}.Indicator.code','Set2','dig');

$flashChart->setData($data3,'{n}.Point.point','{n}.Indicator.code','Set3','dig');

$flashChart->setData($data4,'{n}.Point.point','{n}.Indicator.code','Set4','dig');

$flashChart->setLegend('x','X Legend  ');   

$flashChart->setLegend('y','Y Legend' ); 

$flashChart->axis('y',array('range' => array(0, 3, 1),'labels' => array('','1','2','3'))); 

$flashChart->axis('x',array('range' => array(0, 14, 1),'labels' => array('','1','2','3','4','5','6','7','8','9','10','11','12','13','14')));       

$flashChart->setBgColour('FFFFE1');

//$flashChart->ready = 'alert("ready");' ;    

//$flashChart->loading = 'alert("Processing");' ;

$flashChart->setToolTip(false, array( 

        'proximity' => true,  

        'colour' => '338833',  

        'stroke' => 3,  

        'hover' => true));

      

echo $flashChart->chart('bar_glass',array('colour'=>'#33cc33','key'=>array('Rabit ','13')),'Set1','dig');   

echo $flashChart->chart('bar_glass',array('colour'=>'#D54C78','key'=>array('Mouse ','13')),'Set2','dig');

echo $flashChart->chart('bar_glass',array('colour'=>'#3334AD','key'=>array('Cat ','13')),'Set3','dig');

echo $flashChart->chart('bar_glass',array('colour'=>'#333333','key'=>array('Doc  ','13')),'Set4','dig'); 



   

    

echo $flashChart->render('100%',500,'dig');

?>

1.1 data set = 1 bar
2.a chart has id(dig) it's mean morethan 1 chart per page.


'key'=>array('Doc  ','13'

13=font size

Comment

27 how to define the data field?




<?php  

//print_r($data1);  

echo $flashChart->begin();    

$flashChart->setTitle('Title Name',array('{font-size:20px}'));   

$flashChart->setData($data1,'{n}.Point.point','{n}.Indicator.code','Set1','dig');                

$flashChart->setData($data2,'{n}.Point.point','{n}.Indicator.code','Set2','dig');

$flashChart->setData($data3,'{n}.Point.point','{n}.Indicator.code','Set3','dig');

$flashChart->setData($data4,'{n}.Point.point','{n}.Indicator.code','Set4','dig');

$flashChart->setLegend('x','X Legend  ');   

$flashChart->setLegend('y','Y Legend' ); 

$flashChart->axis('y',array('range' => array(0, 3, 1),'labels' => array('','1','2','3'))); 

$flashChart->axis('x',array('range' => array(0, 14, 1),'labels' => array('','1','2','3','4','5','6','7','8','9','10','11','12','13','14')));       

$flashChart->setBgColour('FFFFE1');

//$flashChart->ready = 'alert("ready");' ;    

//$flashChart->loading = 'alert("Processing");' ;

$flashChart->setToolTip(false, array( 

        'proximity' => true,  

        'colour' => '338833',  

        'stroke' => 3,  

        'hover' => true));

      

echo $flashChart->chart('bar_glass',array('colour'=>'#33cc33','key'=>array('Rabit ','13')),'Set1','dig');   

echo $flashChart->chart('bar_glass',array('colour'=>'#D54C78','key'=>array('Mouse ','13')),'Set2','dig');

echo $flashChart->chart('bar_glass',array('colour'=>'#3334AD','key'=>array('Cat ','13')),'Set3','dig');

echo $flashChart->chart('bar_glass',array('colour'=>'#333333','key'=>array('Doc  ','13')),'Set4','dig'); 



   

    

echo $flashChart->render('100%',500,'dig');

?>

1.1 data set = 1 bar
2.a chart has id(dig) it's mean morethan 1 chart per page.


'key'=>array('Doc  ','13'

13=font size
i followed your sample. but i would like to ask what does the $data look like? i define the$data1, ... $data4 as follow


    $data1 = array('key1' => array('Point' => array('point' => 1), 'Indicator' => array('code' => 'rabbit')));

    $data2 = array('key2' => array('Point' => array('point' => 2), 'Indicator' => array('code' => 'mouse')));

    $data3 = array('key3' => array('Point' => array('point' => 3), 'Indicator' => array('code' => 'cat')));

    $data4 = array('key4' => array('Point' => array('point' => 4), 'Indicator' => array('code' => 'dog')));

but only a graph without data is shown.
thanks for your kind help. =)

The Bakery Everything CakePHP