Google Chart Bundle for Symfony2
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Chart added pins (visualization), added MapTree and CandleStick (Chart tools) Oct 5, 2011
Controller Make the demo 3 chart a bit clearer Feb 14, 2018
DataTable Fix the format for dates to match the googleChartVisualisation template Feb 14, 2018
DependencyInjection Added Sep 26, 2011
Resources Fix syntax error Feb 19, 2018
Tests readme modification (C&P error) Sep 28, 2011
.gitignore Fix date time convention for all dates (not just Calendar, Interval, … May 19, 2016
LICENSE added LICENSE file Nov 9, 2013 mode instruction to view demo pages (symfony 3+) Feb 16, 2018
SaadTaziGChartBundle.php Added Sep 26, 2011
composer.json symfony 4.* support Feb 16, 2018

What is it?

This is a super simple Bundle that facilitates 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 below):

  • 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.


How to install it?

Thanks to AaronDDM, you can use composer to install the bundle.

composer require saad-tazi/g-chart-bundle

Note: Current version is 2.x. if you are using Symfony 2, use version 1.5.

Or you can use the following method:

  1. Add this bundle to your vendor/ dir:

    • Using the vendors script.

      Add the following lines in your deps file:


      Run the vendors script:

      ./bin/vendors install
    • Using git submodules.

      $ git submodule add git:// vendor/bundles/SaadTazi/GChartBundle
  2. Add the SaadTazi namespace to your autoloader:

          // app/autoload.php
                'SaadTazi' => __DIR__.'/../vendor/bundles',
                // your other namespaces
  1. Add this bundle to your application's kernel:

          // app/ApplicationKernel.php
          public function registerBundles()
              return array(
                  // ...
                  new SaadTazi\GChartBundle\SaadTaziGChartBundle(),
                  // ...

Demo pages

This is optional: If you want to see the demo page, add the following to your routing.yml:

        resource: "@SaadTaziGChartBundle/Resources/config/routing.yml"
        type:     yaml
        prefix:   /gchart

You should have templating installed (php ../composer.phar require templating) and should have activated it in `config/packages/framework.yml:

        engines: ['twig']

Then you should be able to go to

Don't forget to include the required javascript in your layout, for example:

        <script type="text/javascript">
            // adds the package you need. See
            google.charts.load('current', {packages:["corechart", 'table', 'gauge']});

How to use it?

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".

Using the added charts

Calendar, Interval and gantt (charts needing dates as datas) :

These are special charts see

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"]]);

Support for events

You can define your own callback functions and associate it to the corresponding chart event like this:

    <div id="calChart">&nbsp;</div>
        $(function() {
            var myMo = function (ee) {
                console.log('Mouse over');
            var myMou = function (ee) {
                console.log('Mouse out');
            var myR = function () {

            {{ 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'},
          ]) }}

Have fun with those mods ;-)



  • added composer support (thanks to AaronDDM)


  • removed jQuery dependency (and div output - needs to be done "manually" now... Provides more control)


  • zero value bug fix


  • Added DataTable::toStrictArray() that checks array keys (ticket #1)


  • Initial commit