A Symfony Plugin for Generating Charts using Googles Visualization API (sdInteractiveChartPlugin)

Last week I released the first (beta) version of my interactive charting plugin for the Symfony PHP framework. It is currently only version 0.1.2 so it’s a bit rusty round the edges, but over the next couple of weeks I will be improving it and adding extra functionality to it. I also intend to package up another version (which I will host on my blog) for anyone not using Symfony to use in there PHP projects. Below are just a few details on the plugin:

UPDATE: The plugin has been updated to version 0.2.0 (Available on the Symfony website), more of the APIs options have been implemented along with an improved callback function and more streamlined code.

Overview:

The plugin allows you to insert Javascript powered charts into any page of your site without writing any Javascript. It is especially useful when the data for the chart and possibly even the type of chart is based upon an authenticated users preferences (i.e. creating different charts for each user). The plugin handles the loading of the required libraries and creation of the correct chart object as well loading the data in via AJAX if you want. It also helps to keep your HTML page code as neat and tidy as possible by only writing exactly what’s needed into the dynamic page and storing all the rest in a general JS file which is the same for all users.

Chart Types:

It can create a number of different charts:

  • Area Charts
  • Bar Charts
  • Column Charts
  • Gauges
  • Line Graphs
  • Pie Charts

Usage:

Head to: http://www.symfony-project.org/plugins/sdInteractiveChartPlugin

“b[0] is undefined” error when using Google’s Visualization API

When playing around with google’s visualization API I came across the following error, which just appeared in the place of lovely colourful chart. No javascript errors were thrown or anything else.

b[0] is undefined

After searching the internet a bit I did not manage to find any answers, at which point I decided it was time to change values passed to the API at random and see when it started working.

The Fix:

It turns out is was the width and height properties it didn’t like, apparently they were too small?!?

Original Code:

function drawVisualization() {
var data = new google.visualization.DataTable();
 data.addColumn('string', 'fruit');
 data.addColumn('number', 'quantity');
 data.addRows(4);
 data.setValue(0, 0, 'Oranges');
 data.setValue(0, 1, 3);
 data.setValue(1, 0, 'Bananas');
 data.setValue(1, 1, 4);
 data.setValue(2, 0, 'Grapes');
 data.setValue(2, 1, 2);
 data.setValue(3, 0, 'Apples');
 data.setValue(3, 1, 6);
 
 var chart = new google.visualization.BarChart(document.getElementById('visualization'));
 chart.draw(data, {width: 150, height: 200, title: 'Fruit',
 vAxis: {title: 'Type of Fruit', titleTextStyle: {color: 'blue'}}
 });
 
}

When I modified width and height values I gave to the draw function (as so):

chart.draw(data, {width: 190, height: 200, title: 'Fruit',
 vAxis: {title: 'Type of Fruit', titleTextStyle: {color: 'blue'}}
 });

It started working again. Not quite sure why setting small sizes on the charts causes this, or why it only produces are fairly useless error message.

By the way: At first I was just testing out the API using Googles Code Playground, which is quite smart!

Any way this is how my chart looked after the fix (and I bit more resizing)

Flat image of bar graph created using Google's Visualization API

Flat image of bar graph created using Google's Visualization API