donmcarthur.com

posted: Sat 30 May 2009 12:09 pm

Hello, World!

I'm finding a huge number of uses for the Google Chart API. In a nutshell, you embed an image tag in your web page whose source element points to Google servers. Within the url querystring you encode chart type, color, size, dynamic data, dynamic labeling and other properties of the chart. Google creates the chart image and returns it for display on your page. And it happens in the blink of an eye. Yep, that's a live instance there on the left.

The problem is Microsoft's POS Internet Explorer web browser (what a surprise, eh?) when using the Google Chart API from pages the user is accessing using SSL (eg., a business's corporate dashboard). Since the call to the API is not using SSL, IE issues a warning for each image. Neither Firefox (on either Windows or a competent o/s), Chrome nor Safari responds with such hysterics.

IE SucksThe clumsy and unworkable solution is to convince individual users to add the target site to some security listing within their IE browser. Considering that most IE users are not rocket scientists to begin with, that was a non-starter. A more useful workaround I have found is to use my application code to create the url, and then run the unix utility curl to retrieve the image from Google and store it locally on the webserver. I then use the local file as the image source, and IE doesn't complain. And you would be pleasantly surprised at how fast the whole process is.

Here's some sample code (using php):

Google Chart API, SSL and Microsoft Internet Explorer Workaround

// We're using the Google Chart API to create images representing our regional numbers.
// We need to download and store the image instead of using an <img> tag because
// Internet Explorer browsers throw confusing warnings when that is done from
// an SSL directory.

// Use the php microtime() function to generate the filename
// to avoid duplicate filenames when the application is under heavy load.
list ($usec, $sec) = explode(" ", microtime());
$filename_pie_chart = 'dyna_' . $sec . $usec . '.png';

// Build the url to retrieve the chart image.
$url = "http://chart.apis.google.com/chart?cht=p&chs=500x250&chtt=Regional+Representation|All+States&chd=t:$data&chl=$label";

// Use the unix utility curl to retrieve the image and store it locally.
system("/usr/bin/curl --silent --output ~/public_html/images/$filename_pie_chart --url \"$url\"");

// The variable that will be used to display the pie chart.
$reg_rep_pie_chart = "<img src=\"../images/$filename_pie_chart\" alt=\"Regional Representation\" />";



...you end up with a new image with a filename like dyna_12436249460.90394400.png every time the page is called. I use a cron job to regularly delete dyna*.png images from that directory to keep the size manageable...

Comments:

On Sat 30 May 2009 3:49 pm Tom said:
You are truly the man. You should ask for a raise!

On Sat 30 May 2009 3:52 pm Don McArthur said:
Hahaha .. don't tempt me, Boss...


Add a Comment

  Remember me?:


Previous Item - Return to donmcarthur.com

Top
Mail to mcarthurweb at yahoo dot com
On Freenode IRC #MySQL Channel
as threnody
DIY Blogware by Don McArthur
© 2007 - 2010 Donald W. McArthur