CakePhp and Google Charts Plugin

Question

Hello i'm using Google Charts Plugin to my CakePHP application.

In my Controller i do: There are two functions that return two graphs.

function statistics() {
    $this->timePerClient();
 $this->timePerProjectChart();  
}

FUNCTION timePerProject

    function timePerProjectChart() {
        $totalProjeto = $this->timePerProject();
        $tempoTotalGasto = $this->tempoTotalInvestido();

        //Setup data for chart
        $timePerProjectChart = new GoogleChart();
        $timePerProjectChart->type("PieChart");
        $timePerProjectChart->options(array('title' => "Percentagem de Tempo (horas) investido por Projeto"));
        $timePerProjectChart->columns(array(
            //Each column key should correspond to a field in your data array
            'projects' => array(
                'type' => 'string',        
                'label' => 'Projeto'
            ),
            'tempoGasto' => array(
                'type' => 'time',
                'label' => '% horas'
            )
        ));
//You can also use this way to loop through data and creates data rows: 
        foreach ($totalProjeto as $row) {
            $percentagemTempoGasto = ($this->timeToHour($row[0]['tempogasto']) / $tempoTotalGasto[0][0]['tempogasto']) * 100;
            $timePerProjectChart->addRow(array('tempoGasto' => $percentagemTempoGasto, 'projects' => $row['Project']['pname']));
        }
//Set the chart for your view
        $this->set('timePerProjectChart', $timePerProjectChart);

    }

In my view (statistics) i do :

<div id="chart_div" ><?php $this->GoogleChart->createJsChart($timePerProjectChart); 
 $this->GoogleChart->createJsChart($timePerClientChart);
?></div>

but I just can not see a single graph. I tested (individually) each and are functioning. I'll wish to put multiple charts on the same view.

Is it possible?

thanks

Answer 1

What is happening in your statistics action in your controller? $this is an object.

There are a couple steps required to use the plugin: '

1. Get data. Use a find or other model method to get the data you want.

2. Set up the chart:

   $chart->type("LineChart");

   $chart->options(array('title' => "Recent Scores"));

   $chart->columns(array( //Each column key should correspond to a field in your data array 'event_date' => array( //Tells the chart what type of data this is 'type' => 'string',
   //The chart label for this column
   'label' => 'Date' ), 'score' => array( 'type' => 'number', 'label' => 'Score' ) ));

3. Add rows to your chart by looping through data, an example is given below

   foreach($model as $round){ $chart->addRow($round['Round']); }

4. Set the chart for your view- this is the same name that must be then called in <div id="chart_div"><?php $this->GoogleChart->createJsChart($chart);?></div> in the view.

   $this->set(compact('chart'));

To display more than one chart in a single view, you need to not just use the default chart_div as the id of your div. You need to set two different divs and update the objects accordingly:

set

<?php $timePerProjectChart->div('projectChart');?>
<?php $timePerClientChart->div('clientChart');?>


<div id="projectChart"><?php $this->GoogleChart->createJsChart($timePerProjectChart);?></div>

<div id="clientChart"><?php $this->GoogleChart->createJsChart($timePerClientChart);?></div>