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. =)

Comment

28 I got the answer

the following code can produce a pie chart with data labeled.


<?php

    $data = array(0 => array('Animal' => array('id' => 1, 'name' => 'Rabbit', 'quantity' => 123)),

                  1 => array('Animal' => array('id' => 2, 'name' => 'mouse', 'quantity' => 78)),

                  2 => array('Animal' => array('id' => 3, 'name' => 'dog', 'quantity' => 98)),

                  3 => array('Animal' => array('id' => 4, 'name' => 'cat', 'quantity' => 65)),

                    );

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

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

    echo $flashChart->setData($data, '{n}.Animal.quantity', '{n}.Animal.name', 'stuff');

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

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

?>

<div id="chartDomId1"></div>

Comment

29 Pie Colors

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

u need replace :
$flashChart->pie(array('start_angle' => 59,'values' => 'true', 'tooltip' => '#val# of #total#
#percent# of 100%'));

to

$flashChart->pie(array(

'start_angle' => 59,
'values' => 'true',
'tooltip' => '#val# of #total#
#percent# of 100%',
'colours'=> array('#AA0aFF','#f1a334','#FFF333','#AAA333','#FAF333','#AAFA33')

));

$flashChart->pie(array('colours'=> array('#AA0aFF','#f1a334','#FFF333','#AAA333','#FAF333') ));

Question

30 Multiple Chart Labels

Hi,

Thanks for this nice helper.

I tried creating two charts on the same page by following the example in the flash chart helper but seems the second chart is using the x-axis labels of the first chart. How do I set different x-axis labels?

i'm using FlashChartHelper version 3.3.91, Cake 1.2.3




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

            $flashChart->setTitle('Status of Targets','{font-weight:bold;font-size:12px;padding-bottom:0px;}');

            $flashChart->setData($misTaskStatuses,'{n}.MisTaskStatus.tasks', '{n}.MisTaskStatus.name');

            echo $flashChart->chart('pie', array('colours' => array('#B30003', '#ECC729', '#59DC0B'), 'animate' => true, 'tooltip' => '#val# of #total# tasks<br>#percent# of 100%'));

            echo $flashChart->render(500, 300);



            $labels = array( 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun');

            $flashChart->setTitle('History','{color:#880a88;font-size:18px;padding-bottom:20px;}');

            $flashChart->setData(array(1,2,4,8, 15),'{n}',false,'Completed', 'history');

            $flashChart->setData(array(3,4,6,9),'{n}',false,'Pending', 'history');

            $flashChart->setData(array(2,3,7,4),'{n}',false,'Not Started', 'history');

            $flashChart->axis('x',array('labels'=> $labels, 'tick_height' => 10),array('colour'=>'#aaFF33', 'vertical' => false));

            $flashChart->axis('y',array('range' => array(0, 20, 5)));

            $flashChart->setLegend('x', 'Months', '{font-size:14px;color:#CCCCCC;}');

            $flashChart->setLegend('y', 'Tasks', '{font-size:14px;color:#CCCCCC;}');

            echo $flashChart->chart('bar_3d',array('colour'=>'#8CE624'),'Completed', 'history');

            echo $flashChart->chart('bar_3d',array('colour'=>'#FFB505'),'Pending', 'history');

            echo $flashChart->chart('bar_3d',array('colour'=>'#B30003'),'Not Started', 'history');

            echo $flashChart->render(500, 300, 'history');

Question

31 Prototype and script.aculo.us libraries for Ajax VS Flash Chart Helper

Comment

32 Prototype & Flashchart

First of all, excellent Helper.

But, I have a problem with that, if I include Prototype and script.aculo.us libraries for Ajax in my layout (called default.ctp), and If I try to display a Flash Chart it dont show. But if the Prototype and script.aculo.us libraries are not included in that layout the Flash Chart Works (shows), what could be the problem ?

Someone can Help me with that !!!

!! De antemano Gracias !!!
Hi,

If you're already using prototype in your application, make sure you tell the helper this through the begin call:

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

[FROM DOCUMENTATION].

Comment

33 Thanks

Hi,

If you're already using prototype in your application, make sure you tell the helper this through the begin call:

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

[FROM DOCUMENTATION].
Thanks , Now it Works

Comment

34 Help! Just get a default plot...

I have tried all the examples, and no matter what I do, I just get the default plot needing ../../data-files/x-labels-user-labels-br.txt. Does anyone have a clue of what this is indicating to me? I am using PHP v5.2.6 and the 3.3.91 of the FlashChartHelper.

Thanks,
Joey

Question

35 Stacked Bar

Hi Alex,
Thanks for the great helper! I am having a problem with the stacked bar chart, all of the other chart types work no problem - 3d, glass, etc, however when I change the chart to 'bar_stack' I get nothing, no error just a blank square. I have a very simple data set per your example here: http://code.google.com/p/alkemann/wiki/ExampleStacked and am using the link to prototype and swfobject as outlined above. I noticed you mentioned a bug with stacked bar on your google code page, did you release a fix? I am using helper v3.3.91

Matt

Question

36 Displaying time values in Yaxis

I'm tring to display time values in the Y-Axis, if I convert the time to a decimal value e.g. 27.5 = 27min 30sec, the line graph displays OK but the tip dispays 27.5 and I need it to dispay the actual time e.g. 27:30. Is there a way to do this ?
e.g.
$flashChart->setData(array(27.5,28.25,27.75,28.0,26.5));
$flashChart->setLegend('y','Time' );
$flashChart->axis('y',array('range' => array(20,30,1)));
echo $flashChart->chart('line');
echo $flashChart->render();

I want the tip to display 27:30,28:15,27:45,28:0,26:30 (or similar)

Any ideas I'm sure someone must of done something similar

Cheers, Colin

Comment

37 Time in Y axis

I worked out a way to do this after reading through the docs again I seen you could set custom tooltips so it was pretty easy, just set the tooltip to the original time before I converted it.

$chartTime=array(27.5,28.25,27.75,28.0,26.5);
$actualTime=array('27:30','28:15','27:45','28.00','26.:0');
for( $i=0; $i<5; $i++ ){
$tmp = new dot($chartTime[$i]);
$tmp->tooltip( "#x#
Time $actualTime[$i]" );
$chart[]=$tmp;
}
$flashChart->setData($chart);

Question

38 Number format in tooltips

I can't get the numbers to format properly in the tooltips. I am passing in money but it always drops zeros on the right. I have formatted the numbers before adding to the chart but nothing seems to work.

Any ideas how to force 2 decimal places in the tooltips?

Bug

39 some bugs and how i slove

IE6 cache bug

first time,the chart looks ok,but if you refresh the page in IE6,the chart will got error。and i hack the render function to slove this bug：




public function render($width = null, $height = null, $chartId = 'default', $domId = false) {

 if (! is_null ( $width )) {

 $this->settings ['width'] = $width;

 }

 if (! is_null ( $height )) {

 $this->settings ['height'] = $height;

 }

 $this->Chart = new open_flash_chart ( );

 //BUG! hack for IE cache bug!  add a timestamp to the swf address

 $this->swf .= '?t=' . mktime ();

 return $this->Flash->renderSwf ( $this->swf, $this->settings ['width'], $this->settings ['height'], $domId, array ('flashvars' => array ('get-data' => 'get_data_' . $chartId ) ) );

 }

line style can't set default dot style

because of the open flash chart's chaos APIs,this helper missing the default dot style method，need to add this method by hand：




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

 switch ($key) {

 case 'line_style' :

 $line_style = new line_style ( $setting [0], $setting [1] );

 $element->line_style ( $line_style );

 break;

 //BUG! line's befault dot style method!!

 case 'default_dot_style' :

 $default_dot = new dot ( );

 foreach ( $setting as $k => $v ) {

 $default_dot->$k ( $v );

 }

 $element->set_default_dot_style ( $default_dot );

 break;

 default :

 $set_method = 'set_' . $key;

 if (is_array ( $setting )) {

 $element->$set_method ( $setting [0], $setting [1] );

 } else {

 $element->$set_method ( $setting );

 }

 break;

 }

 }

visible_steps and rotate unavailable




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

 $set_method = 'set_' . $key;

 //BUG! without this，will skip the visible_steps and rotate config,foreach ( $labelsOptions as $key => $setting ) {

 $set_method = 'set_' . $key;

 //BUG! without this，will skip the visible_steps config。default method all start with 'set',but this two DIDN'T!

 if (in_array ( $key, array ('visible_steps', 'rotate' ) )) {

 $set_method = $key;

 }

 $x_axis_label->$set_method ( $setting );

 }

 if (in_array ( $key, array ('visible_steps', 'rotate' ) )) {

 $set_method = $key;

 }

 $x_axis_label->$set_method ( $setting );

 }

Hope it help.forgive for my poor english.
the detail is in my blog：http://www.fangyuqiang.com/archives/531,it's chinese.

Comment

40 Multiple chart

Hi,

The multiple chart part is not well documented as pointed Sola Ajayi, so I give the answer for those of you who don't want to waste there time :D

If you want to display multiple chart you must follow this :

View Template:




<?php



echo $flashChart->begin()); // only one call



// First 

$flashChart->setTitle('Sample 01');

$flashChart->setData(...); // and others things you want to customize

echo $flashChart->chart('bar', array(), 'default', 'sample1');

echo $flashChart->render(null, null, 'sample1');



// Second

$flashChart->setTitle('Sample 02');

$flashChart->setData(...); // and others things you want to customize

echo $flashChart->chart('bar', array(), 'default', 'sample2');

echo $flashChart->render(null, null, 'sample2');



?>

Don't know if it does the same to you but, in my case, i had to specify a name for each chart(). If i don't, the same datas, titles, ... were repeated in each chart.

Comment

41 multiple charts....and increments?

kemo is correct in his/her code, however i ran into trouble when doing this for pie graphs. Apparently the pie graph follows some different conventions and I had a lot of trouble getting two different pie charts to work. After stripping it down to this, I got them both to work:




$flashChart->begin();

.

.

.

$flashChart->setTitle('Title');

        $flashChart->setData($data, '{n}', false, 'stuff','chart1');

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

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



$flashChart->setTitle('Title 2');

        $flashChart->setData($data2, '{n}', false, 'stuff2', 'chart2');

        echo $flashChart->pie(array(), 'stuff2', 'chart2');

        echo $flashChart->render(500,500, 'chart2');

Anything else and it wouldn't work (I tried more stuff like axis labels etc. nothing worked unless it was exactly like this).

I am also having trouble with increments on the bar chart. I set a variable to be 1/6th that of the maximum value in the array data, so that it would always be a reasonable range (start,max,increments). But when I send it the data it doesnt set those increments. It is only after refreshing the page (F5) that it realigns itself according to my preset increments...?

Edit: The increments problem didnt occur on another machine I was using, which leads me to believe it may be a flash problem, or a config problem with my machine.

Comment

42 FCH for 1.1

For those of you still using v1.1 of CakePHP here's a simple guide for conversion:

in /app/views/helpers/flash_chart.php change the lines




App::import('Vendor', 'flashchart/open-flash-chart');

class FlashChartHelper extends AppHelper {

...




vendor('flashchart/open-flash-chart');

class FlashChartHelper extends Helper {

...

and in /app/views/helpers/flash.php change the line




class FlashHelper extends AppHelper {

...




class FlashHelper extends Helper {

...

and in the init function of the same file, replace all this




    $view =& ClassRegistry::getObject('view'); 

    if (is_object($view)) { 

        $view->addScript($this->Javascript->link('swfobject')); 

        return true;

    } else {

        return $this->Javascript->link('swfobject');

    }

with this




    return $this->Javascript->link('swfobject');

And that's it! HTH

Question

43 IE 8 Problem

I have a problem with loading the graphs in IE 8. It works in IE 7 as expected but in IE 8 it breaks.

I get the following error:

Open Flash Chart

JSON Parse Error [Syntax Error] Error at character 0, line 1:

0:

Comment

44 Awesome, thanks!

Thanks for this - I was looking at XMLSWF charts, and came across OpenFlashCharts, and this helper sold me. I'm glad to be able to use OS stuff instead.

The Bakery Everything CakePHP