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.
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');
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.
//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).
Make sure that you have a view block named 'script' in your layout.
License
Copyright 2012 Scott Harwell
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
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.
请发表评论