Added google dashboard library #19

merged 7 commits into from May 15, 2012


None yet

4 participants


Adds the google dashboard library.



Add your google api credentials in your configuration (see the above link how to set it up):

        # .... other settings 
            api_key:    your-api-key
            client_id:  your-client-id
            table_id:   your-table-id


In your dashboard, simply include the dashboard.html.twig template with an optional initCallback parameter:

  {% include "GoogleBundle:Analytics:dashboard.html.twig" with { 'initCallback' : 'myDashCallback' } %}

The myDashCallback is a name of a javascript function which is being called after the google dashboard library has been initialized.


The dashboard library needs a button to initialize the google authorization, this defaults to the id authorize-button:

<button id="authorize-button" style="visibility:hidden">Authorize Google Analytics</button>

The id of the element can be configured by passing a authorizeButton parameter to the dashboard twig template.

Drawing charts

Once the user is authorized at google, you can start drawing your analytics charts in your templates:

<div class="gadash-container">
    <div id='dataOverTimeConfig'></div>

<script type="text/javascript">

function adminInit() {

    // Create new Chart.
    var dataOverTime = new gadash.Chart({
        'last-n-days': 30,
        'chartOptions': {
            width: 700
        'divContainer': 'dataOverTimeConfig',
        'type': 'LineChart',
        'query': {
          'dimensions': 'ga:date',
          'sort': 'ga:date',
          'metrics': 'ga:visitors, ga:visits, ga:pageviews',
          'ids' : gadash.tableId      
        'chartOptions': {
            height: 300,
            legend: {position: 'bottom'},
            hAxis: {title:'Date'},
            curveType: 'function'


Note that you need to pass the gadash.tableId in each chart, otherwise you'll get an api error.

@pulse00 pulse00 referenced this pull request May 11, 2012

Added composer.json #14

@kriswallsmith kriswallsmith commented on an outdated diff May 11, 2012
@@ -0,0 +1,23 @@
+<script src=""></script>
+<script src="{{ asset('/bundles/google/js/gdash-1.0.js') }}"></script>
kriswallsmith May 11, 2012

Removing the leading slash so this becomes…

{{ asset('bundles/google/js/gdash-1.0.js') }}
@kriswallsmith kriswallsmith commented on the diff May 11, 2012
@@ -0,0 +1,23 @@
+<script src=""></script>
+<script src="{{ asset('/bundles/google/js/gdash-1.0.js') }}"></script>
+<script src=""></script>
+ var config = {
+ 'apiKey': '{{ google_analytics.apiKey }}',
+ 'clientId':'{{ google_analytics.clientId }}',
+ 'tableId': '{{ google_analytics.tableId }}'
+ };
+ {% if authorizeButton is defined %}
+ config.authorizeButton = '{{ authorizeButton }}';
+ {% endif %}
kriswallsmith May 11, 2012

All of these string literals should be escaped for Javascript…

'{{ google_analytics.apiKey|e('js') }}'

@kriswallsmith your feedback is implemented. also, i've moved the information from the PR to the docs section of the bundle.

@matthewfitz ping ;)

@matthewfitz matthewfitz merged commit 8cadb31 into antimattr:master May 15, 2012

Hi, im haveing trouble with this.

Firebug sais:

"NetworkError: 400 Bad Request -"

I'm sure I've got the right client_id, table_id and api_key in config.

But I'm not sure about Google API Console client settings Redirect URIs:

Could you please help me or point me to some docs/tutorial?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment