This is a super simple Bundle that facilitate the usage of Google Chart Tool, Google Chart Image API and Google Infographics.
It allows to render:
- QRCode
- Pie Chart (3 ways: canvas or svg, simple image from url, simple 3d image from url)
- Column Chart
- Bar Chart
- Area Chart
- scatter Chart
- Combo Chart
- Table
- Gauge
- Candlestick Chart
- Map tree
- Dynamic Icons
Added (special recommendations are bellow):
- Calendar
- Bubble Chart
- Donut Chart (you don't really need it as you can do it with Pie Chart and configuration but it is a shortcut)
- Gantt (beware gantt are betas)
- Geo Chart
- Histogram
- Interval
- Map
- Org Chart
- Sankey
- Stepped Area Chart
- Timeline
- Trendline
- Waterfall
- Word Tree
Make sure you read the Chart Image terms and Chart tool terms before using that bundle.
It also contains some Twig extension that facilitates the integration.
http://blog.fruitsoftware.com/a-propos/demo-gchartbundle/
Thanks to AaronDDM, you can use composer to instlall the bundle.
composer require saad-tazi/g-chart-bundle
Note: Current version is
2.x. if you are using Symfony 2, use version1.5.
Or you can use the following method:
-
Add this bundle to your
vendor/dir:-
Using the vendors script.
Add the following lines in your
depsfile:[SaadTaziGChartBundle] git=git://github.com/saadtazi/SaadTaziGChartBundle.git target=/bundles/SaadTazi/GChartBundleRun the vendors script:
./bin/vendors install -
Using git submodules.
$ git submodule add git://github.com/saadtazi/SaadTaziGChartBundle.git vendor/bundles/SaadTazi/GChartBundle
-
-
Add the SaadTazi namespace to your autoloader:
// app/autoload.php
$loader->registerNamespaces(array(
'SaadTazi' => __DIR__.'/../vendor/bundles',
// your other namespaces
));- Add this bundle to your application's kernel:
// app/ApplicationKernel.php
public function registerBundles()
{
return array(
// ...
new SaadTazi\GChartBundle\SaadTaziGChartBundle(),
// ...
);
}Optional: If you want to see the demo page, add the following to your routing.yml (requires Twig):
_demo:
resource: "@SaadTaziGChartBundle/Resources/config/routing.yml"
type: yaml
prefix: /gchartThen you should be able to go to http://your.site.com/gchart/demo
Don't forget to include the required javascript in your layout, for example:
<script type="text/javascript">
// adds the package you need
google.load("visualization", "1", {packages:["corechart", 'table', 'gauge']});
</script>
Mmm, please check the Controller\DemoController to see how to build DataTable, and Resources\views\Demo\demo.html.twig
I implemented almost all the corechart chart types from the Google Chart Tool.
But I only implemented 3 Google Chart Image types, because
(they are ugly and) almost all of them can be built using
the Google Chart Tool.
From the Visualization, I only implemented the marker.
Ohh, please feel free to fork, add to it and send me pull requests!
Note: You don't have to use the Twig functions: you can use the php classes (in DataTable and or in Chart). But you will probably find it a little bit "painful".
Calendar, Interval and gantt (charts needing dates as datas) :
These are special charts see https://developers.google.com/chart/interactive/docs/gallery/calendar#a-simple-example
These charts needs javascript Date Objects in first column.
As the Js Date Object need to be written (in json) like :
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
I encountered issues with PHP and Json_encode. To avoid this you had to make your datas like this :
$datas = array(
array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-01"), 'md' => 3),
array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-02"), 'md' => 5),
array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-03"), 'md' => 1),
array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-04"), 'md' => 9),
array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-10"), 'md' => 24),
);
$res = new DataTable();
$res->addColumn('date', 'Date', 'date');
$res->addColumn('my_datas', 'My Datas', 'number');
foreach($datas as $data) {
// js month starts at 0 for Jan !
$date => $data['date']->format("Y, ").(intval($data['date']->format("m"))-1).$data['date']->format(", d");
$res->addRow([['v' => "new Date[[[{$date}]]]"], ['v' => $data['md']]);
}It gives the following json (don't get scared by the '"new Date[[[' and ']]]"', they are substituded when needed in the twig) :
[ "new Date[[[2016, 2, 1]]]", 3 ],....
You can had a Tooltip to your datas by using this code :
// 'role_tooltip' must be written as i showed because it makes all the magic.
$res->addColumn('role_tooltip', 'Tooltip', 'string');
// ....
foreach($datas as $data) {
// js month starts at 0 for Jan !
$date => $data['date']->format("Y, ").(intval($data['date']->format("m"))-1).$data['date']->format(", d");
$res->addRow([['v' => "new Date[[[{$date}]]]"], ['v' => $data['md'], ['v' => "My wonderfull Tooltip for this row"]]);
}You can define your own callback functions and associate it to the corresponding chart event like this:
<div id="calChart"> </div>
<script>
$(function() {
var myMo = function (ee) {
console.log('Mouse over');
}
var myMou = function (ee) {
console.log('Mouse out');
}
var myR = function () {
console.log('Ready');
}
{{ gchart_calendar(calDatas, 'calChart', 950, 180, 'My cal datas', {tooltip:{isHtml: true,trigger: 'selection'}},
[{'eventName': 'ready', 'callbackFunc': 'myR'},
{'eventName': 'onmouseover', 'callbackFunc': 'myMo'},
{'eventName': 'onmouseout', 'callbackFunc': 'myMou'},
]) }}
});
</script>
Have fun with those mods ;-)
2012-03-20
- added composer support (thanks to AaronDDM)
2011-10-23
- removed jQuery dependency (and div output - needs to be done "manually" now... Provides more control)
2011-09-22
- zero value bug fix
2011-09-06
- Added DataTable::toStrictArray() that checks array keys (ticket #1)
2011-06-23
- Initial commit