About
This is an attempt to build a multipurpose CakePHP plugin to interface with the Google Charts Javascript API., (*1)
I welcome any assistance for enhancing / fixing issues with this plugin!, (*2)
Requirements
- CakePHP 3.0+
- PHP 5.4.16+
- jQuery
Currently, this plugin only works with 2D charts (line, bar, pie, etc.), (*3)
Installation
Clone this repository or download a copy to your application's plugins directory. Be sure to name the folder GoogleCharts., (*4)
Be sure that you load the plugin in your application's bootstrap file using either of the following two lines:, (*5)
Plugin::loadAll();
Plugin::load('GoogleCharts');
Usage
There are two phases to using this plugin:, (*6)
- Building the data.
- Building the Javascript for display.
Controller Setup & Actions
Make sure that your application's composer.json file is updated to autoload the plugin., (*7)
"psr-4": {
(...)
"GoogleCharts\\": "./plugins/GoogleCharts/src"
}
Run composer dumpautoload if necessary., (*8)
Include the GoogleCharts class in your controller methods: require_once(ROOT.DS.'plugins'.DS.'GoogleCharts'.DS.'vendor'.DS.'GoogleCharts.php');. This class will help build the data for your charts., (*9)
Also, load the GoogleChartsHelper class in the beforeRender method of your controller so we can use it in the view: $this->getView()->loadHelper('GoogleCharts.GoogleCharts');, (*10)
The GoogleCharts class is meant to mimic the properties needed per the Google Chart API. Each chart that you want to display on your page needs it's own instance of this class. Once you have prepared the class with settings and data, then set for your view to pass to the View Helper., (*11)
//Get data from model
//Get the last 10 rounds for score graph
$rounds = $this->Rounds->find('all')
->select(['Round.score', 'Round.event_date'])
->where(['Round.user_id' => $this->Auth->user('id')])
->order(['Round.event_date' => 'ASC'])
->limit(10)
->toArray();
//Setup data for chart
$chart = new GoogleCharts();
$chart->type("LineChart");
//Options array holds all options for Chart API
$chart->options(['title' => 'Recent Scores']);
$chart->columns([
//Each column key should correspond to a field in your data array
'event_date' => [
//Tells the chart what type of data this is
'type' => 'string',
//The chart label for this column
'label' => 'Date'
],
'score' => [
'type' => 'number',
'label' => 'Score',
//Optional NumberFormat pattern
'format' => '#,###'
]
]);
//Loop through our data and creates data rows
//Data will be added to rows based on the column keys above (event_date, score).
//If there are missing fields in your data or the keys do not match, then this will not work.
foreach($rounds as $round) {
$chart->addRow($round);
}
//You can also use this way to loop through data and creates data rows:
foreach($rounds as $round) {
$chart->addRow([
'event_date' => $round['event_date'],
'score' => $round['score']
]);
}
//You can also manually add rows:
$chart->addRow([
'event_date' => '1/1/2012',
'score' => 55
]);
//Set the chart for your view
$this->set(compact('chart'));
View
- Create a div for the chart.
- You can use the default
chart_div as the id or set your own.
- If you set your own div ID (or need to for more than one chart) then update your chart object:
<?php $chart->div('div_id');?>
- Use the
GoogleChartsHelper to display your chart(s).
<div id="chart_div"><?php $this->GoogleCharts->createJsChart($chart);?></div>
- Make sure that you have a view block named 'script' in your layout.
License
Copyright 2012 Scott Harwell, (*12)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at, (*13)
http://www.apache.org/licenses/LICENSE-2.0, (*14)
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License., (*15)
Wallogit.com
