CakeCharts plugin for CakePHP
, (*1)
Purpose
This plugin is a CakePHP wrapper for plotly.js charting library. It offers you a simple way to draw charts in your CakePHP app using provided DrawChart
helper without having to write Javascript., (*2)
Installation
You can install this plugin into your CakePHP application using composer., (*3)
The recommended way to install composer packages is:, (*4)
composer require jtraulle/cake-charts
1. Load Plugin
Ensure the CakeCharts Plugin is loaded in your config/bootstrap.php
, (*5)
<?php
Plugin::load('CakeCharts', ['autoload' => true]);
2. Load Helper
Add this line into your initialize()
function from src/View/AppView.php
, (*6)
<?php
$this->loadHelper('CakeCharts.DrawChart');
3. Add view blocks into your default Layout
Add those lines just before closing the </body>
tag in your src/Template/Layout/default.ctp
, (*7)
= $this->fetch('cakeChartsLibrary');
$this->fetch('cakeChartsDefinition'); ?>
-
cakeChartsLibrary
view block will inject plotly-latest.min.js
Javascript file from Plot.ly CDN
-
cakeChartsDefinition
view block will contain generated plotly.js charts
Usage
From any template :, (*8)
- Single series functions signatures and phpDoc:
<?php
/**
* Function structure for single series charts
*
* @param array $x Values to be placed on X axis
* @param array $y Values to be placed on Y axis
* @param string $mode For line charts only.
* Can be either "markers", "lines" or "markers+line"
* @param array $layout Any layout option accepted by Plotly.js
* @see https://plot.ly/javascript/#layout-options for possible values
* @param array $configuration Any configuration option accepted by Plotly.js
* @see https://plot.ly/javascript/configuration-options for possible values and examples
* @param string|null $id HTML identifier of div where chart will be drawed
* @return string The generated chart
*/
$this->DrawChart->simpleBarChart(array $x, array $y, array $layout = [], array $configuration = [], string $id = null);
$this->DrawChart->pieChart(array $x, array $y, array $layout = [], array $configuration = [], string $id = null);
$this->DrawChart->singleLineChart(array $x, array $y, string $mode, array $layout = [], array $configuration = [], string $id = null);
- Multi series functions signatures and phpDoc:
DrawChart->stackedBarChart(array $series, array $layout = [], array $configuration = [], string $id = null);
$this->DrawChart->groupedBarChart(array $series, array $layout = [], array $configuration = [], string $id = null);
$this->DrawChart->multilineChart(array $series, array $layout = [], array $configuration = [], string $id = null);
// $series multi-dimensional array example
$series = [
[
['Apples', 'Tomatoes', 'Bananas', 'Cherries'],
[38, 22, 55, 96],
'Ripes',
'markers'
],
[
['Apples', 'Tomatoes', 'Bananas', 'Cherries'],
[11, 15, 22, 10]
'Unripes',
'markers'
]
];
```
### Bar charts examples
Because we all love examples !
#### Simple bar chart
```php
= $this->DrawChart->simpleBarChart(
['Apples', 'Tomatoes', 'Bananas', 'Cherries'],
[38, 22, 55, 96]
); ?>
, (*9)
Stacked bar chart
DrawChart->stackedBarChart($series);
```
![Stacked bar chart](doc/images/stack.png)
#### Grouped bar chart
```php
= $this->DrawChart->groupedBarChart($series); ?>
, (*10)
Pie charts
<?= $this->DrawChart->pieChart(
['Apples', 'Tomatoes', 'Bananas', 'Cherries'],
[38, 22, 55, 96]
); ?>
, (*11)
Line charts
Single line chart
<?= $this->DrawChart->singleLineChart(
['January', 'February', 'March', 'April'],
[1025, 1451, 1526, 2563],
'lines'
); ?>
, (*12)
Multi line chart
<?php
$months = ['January', 'February', 'March', 'April'];
$appleSold = [1025, 1451, 1526, 2563];
$tomatoesSold = [1542, 2325, 2515, 3609];
$bananasSold = [1242, 2695, 2875, 3219];
$cherriesSold = [1322, 1825, 2615, 4109];
echo $this->DrawChart->multilineChart([
[$months, $appleSold, 'Apples sold', 'markers'],
[$months, $tomatoesSold, 'Tomatoes sold', 'lines'],
[$months, $bananasSold, 'Bananas sold'],
[$months, $cherriesSold, 'Cherries sold']
]);
, (*13)
Error management
If you make a mistake, CakeCharts tells you exactly what's wrong so you can fix it quickly., (*14)
, (*15)