scottharwell / googlecharts Goto Github PK

View Code? Open in Web Editor NEW

26.0 12.0 30.0 45 KB

CakePHP Plugin for Google Charts Javascript API

PHP 100.00%

googlecharts's Introduction

About

This is an attempt to build a multipurpose CakePHP plugin to interface with the Google Charts Javascript API.

I welcome any assistance for enhancing / fixing issues with this plugin!

Requirements

CakePHP 3.0+
PHP 5.4.16+
jQuery

Currently, this plugin only works with 2D charts (line, bar, pie, etc.)

Installation

Clone this repository or download a copy to your application's plugins directory. Be sure to name the folder GoogleCharts.

Be sure that you load the plugin in your application's bootstrap file using either of the following two lines:

Plugin::loadAll();

Plugin::load('GoogleCharts');

Usage

There are two phases to using this plugin:

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.

"psr-4": {
    (...)
    "GoogleCharts\\": "./plugins/GoogleCharts/src"
}

Run composer dumpautoload if necessary.

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).
- <div id="chart_div"><?php $this->GoogleCharts->createJsChart($chart);?></div>
Make sure that you have a view block named 'script' in your layout.

License

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

http://www.apache.org/licenses/LICENSE-2.0

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.

googlecharts's People

Contributors

Stargazers

Watchers

googlecharts's Issues

Fatal error: Class 'GoogleChart' not found in /app/Controller/(...)

Hey,

I have basic problem I think:

When I try to use this plugin i get:
Fatal error: Class 'GoogleChart' not found in /app/Controller/(...)

I installed the plugin in the plugins direcotry.
Also added:

App::uses('AppController', 'Controller', 'GoogleChart', 'GoogleChart.Lib');

Controller Code:

class ReportsController extends AppController {

public $helpers = array('GoogleChart.GoogleChart');

public function index() {

    $Clients = $this->Report->Client->find(
        'all',
        array(
            'order' => array('Client.date' => 'ASC'),
            'limit' => 10,
            'fields' => array(
                'Client.date',
                'Client.email'
             )
       )

);

$chart = new GoogleChart();

(...)

Am I doing something wrong?

$ is not defined

Hi,

I had this error in the console when I tried to display the chart, any idea why ?

I think I already included JQuery in my view, so I don't know what's not working.

Thanks a lot !

Cake 3

Hey,

Are you working on a new version for Cake 3.x?

Greetz

Bob

There isn't errors but my view is empty.

Could you help me?
http://stackoverflow.com/questions/33596277/cakephp-2-7-googlechart-plugin#new-answer

Switching x and y axis

Hi,

First of all, this is a really great plugin and its working perfectly,

I just wanted to know is there any way to switch the x-axis and the y-axis so when I choose to display a barchart the bars are displayed vertically (currently the bars are displayed horizontally)

Any help would be greatly appreciated

Documentation issue

There's an issue on documentation where you say: <?php $chart->div = 'div_id';?>

it should be: <?php $chart->div('div_id');?>

because cakephp said that it was an private property:

Add support for data formatters

I think this is the only way to apply number type formatting to the values in tooltips, such as currency, percentage, and adding commas to break up long numbers.

I'll send a pull request with a solution shortly.

Reference: https://developers.google.com/chart/interactive/docs/reference?csw=1#formatters

Need help resizing.

How do i change the width and height using your plugin?

Can't connect to the Data

Hope you can help me out, I'm trying to set the data for the chart but I can't get it,

it works with the Manual data entry but not with the database, whenever I try foreach cakephp throw some erros,

here is my code.

public function index() {
$this->Result->recursive = 0;
$this->set('results', $this->Paginator->paginate());

    //Get data from model
    $this->set('result', $this->Result->find('first'));
    $this->set('result', $this->Result->find('all');

           //Setup data for chart
           $chart = new GoogleCharts();

$chart->type("LineChart");
//Options array holds all options for Chart API
$chart->options(array('title' => "Recent Scores"));
$chart->columns(array(
//Each column key should correspond to a field in your data array
'event' => array(
//Tells the chart what type of data this is
'type' => 'string',
//The chart label for this column
'label' => 'Date'
),
'number' => array(
'type' => 'number',
'label' => 'result',
//Optional NumberFormat pattern
'format' => '#'
)
));

foreach($results as $result){
$chart->addRow(array('event' => $row['Result']['event'], 'score' => $row['Result']['score']));

}
//Set the chart for your view
$this->set(compact('chart'));

GoogleCharts class not found

i have copy them all so my folder structure is App/Plugins/GoogleCharts/GoogleCharts/(Lib,View folder)
and i copy GoogleChartsHelper.php into my my helper folder in view, but when i try to do $chart = new GoogleCharts error is happen and say GoogleCharts class not found..

Rename repository to GoogleChart for Composer support

Is it possible to rename your repository to GoogleChart for Composer support? I you rename the repository, I will add a composer file for you (this won't break anything, but then it will be easier to install the plugin)

Just adding a composer file right now won't work, because the cloned folder will take the name of the repository, since this folder name must match the name of the plugin...

More info about composer and CakePHP

$this->GoogleChart->createJsChart($chart) returns null

After setup and loading the GoogleChart helper return a null value in the view.