Question

I’m writing a program that take a generated data set via Google API and displays it in PHP. This is perfectly fine and has been achieved, however I wish to add thumbnails to the code which displays different charts of the same dataset (in thumbnail form).

I am using the Google API to generate the data and display it, but I’m not sure how I would get it to change the visualisation type (currently using Pie as the main chart) so the user is able to view the different visualisations for that dataset.

Here is the code in question:

Load the AJAX API

 <script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'></script>

The data:

var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Number of Crimes');
data.addRows([
             ['Cardiff', 300],
             ['London', 900],
             ['Manchester', 500],
             ['Dublin', 400],
             ['Liverpool', 600]
             ]);

Draw the Graph:

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

Here are the thumbnails:

<div id="left">
  <p>Bar chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
  <p>Another chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
  <p>Another chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
</div>
<div id="right">
  <p>Scatter Chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
  <p>Another chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
  <p>Another chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
</div>

So basically, how would I get google.visualization.BarChart (and others) into the img src for the thumbnails?

IS this even possible?

Thanks

Answer 1

I’ve had to solve a similar problem, and there are two solutions (that I’m aware of), neither of which is perfect.

The first solution is to use Google’s image chart api to essentially re-create your SVG charts. You can pass in your dynamic data via the src URL of an image. The major drawbacks of this approach are (a) You have to re-create each chart via the image-chart api; and (b) Google Image Chart API is officially deprecated. However, Google has committed to maintaining the service at least through April 2015, so if you expect the site to evolve by then it’s a valid approach. One other thing to mention is that you’ll likely want to create relatively large thumbnails and then scale them down, so that the proportions (text size, for instance) match the relative proportions of the final SVG version.

The second solution (which I’m currently using) is to employ a screen-capture service like URL2PNG. Most screen capture APIs won’t work because they either ignore JS or take the screenshot before the JS has been applied, but url2png and a few other services are able to do this. Just create a simple caching system to store screenshots of each chart (you may want to have each chart be accessible via a URL that displays the chart on an otherwise blank template so that you don’t have to worry about screen position or cropping issues), and have this cache get cleared and rebuilt any time the data is altered (you’ll need a cache, though, as screen-capture services are inherently pretty slow). The major drawback of this approach is that you’ll have to pay for the service (I’m not aware of any free screen-capture service that can accurately capture google charts).

Personally, I’m disappointed that Google hasn’t created an easy way to create thumbnails, as it seems like a pretty common task, but to my knowledge some kind of workaround like this is necessary.