28
Sep
9

Google chart over HTTPS/SSL

The google charts API does not support the https protocol. If your website is being delivered through a secure connection, the chart will cause a SSL error. Here’s a quick way to deliver google chart images over ssl.

To start off with, the chart image must be delivered from a secure connection. Google doesn’t allow this plain and simple, so we need to figure out how to host it from our own site. We accomplish this by fetching the image from google using the standard API, writing it to a file, and then calling it on our own script. We basically make a image handling proxy.

Let’s take a simple google chart to experiment with.

$chart_image = 'http://chart.apis.google.com/chart?chs=500x50&chf=bg,s,ffffff&cht=ls&chd=t:23.52,20.58,26.47,23.52,23.52,23.52,100.00,0.00,23.52,23.52,27.94,20.58,23.52&chco=0066ff';

Next we need to make a function to fetch and save the google chart locally. It will check the chart against the local copy and save it if the chart doesn’t exist, or the image has changed. This way we aren’t re-writing the same chart on every request, but if the chart changes, it will be updated appropriately.

 
	public static function saveImage($chart_url,$path,$file_name){
            if(!file_exists($path.$file_name) || (md5_file($path.$file_name) != md5_file($chart_url)))
            {
                file_put_contents($path.$file_name,file_get_contents($chart_url));
            }
 
            return $file_name;
	}

Lastly we tie it all together so that it is usable in our application. Im using this within a class, but this could just be used as a function as well. Your image directory will need to be writable for this to work.

 
public function doSomething()
{
 
$local_image_path = '/path/to/images/charts/';
$image_name = 'some_chart_image.png';
$chart_url = 'http://chart.apis.google.com/chart?chs=500x50&chf=bg,s,ffffff&cht=ls&chd=t:23.52,20.58,26.47,23.52,23.52,23.52,100.00,0.00,23.52,23.52,27.94,20.58,23.52&chco=0066ff';
 
$image = self::saveImage($chart_url ,$local_image_path,$image_name);
 
}

You’ll need to implement your own error handling, and adjust this to meet the paths and specifics of your server, but the image can now be called from:
<img src="/images/charts/some_chart_image.png" alt="" />

If you need help creating your base chart image, this tool is a great place to start.

Enjoyed reading this post?
Subscribe to the RSS feed and have all new posts delivered straight to you.
9 Comments:
  1. mikosh 1 Dec, 2009

    Thank you! That’s what i was looking for! i didn’t need to use https, but i needed to grab image chart and then include in pdf (with fpdf). Your trick works great.

    $chart_image_url=’http://chart.apis.google.com/chart?…’;
    $local_charts_path = ‘../img/charts/’;
    $chart_image_name = ‘chart.png’; file_put_contents($local_charts_path.$chart_image_name,file_get_contents($chart_image_url));

    then, after:

    $pdf->Image($local_charts_path.$chart_image_name,10,10,120,20);

  2. Brandon 5 Jan, 2010

    Great code!! Exactly what I needed. Thank you for posting for everyone use.

  3. [...] then loading the file over https from your own site, indeed an example has already been published here but that example uses functions disabled on many web hosts (including mine) : file_get_contents() [...]

  4. Alon Raskin 27 Aug, 2010

    Perhaps I am missing something but this doesnt really resolve the security question. Right? I mean the data is still transmitted in clear text between the server and the google charts server? Right?

  5. jestep 27 Aug, 2010

    It eliminates the error that the user would typically see. But, it is a non-secure connection between the server and google on the back-end.

  6. [...] then loading the file over https from your own site, indeed an example has already been published here but that example uses functions disabled on many web hosts (including mine) : file_get_contents() [...]

  7. dominic sd the clef kipper 3 Nov, 2010

    anything about internet protocol?

  8. Jeremy Glover 19 Jan, 2011

    It looks like Google finally updated their API to allow HTTPS. All you need to do is switch the hostname to chart.googleapis.com so that the base URL is something like https://chart.googleapis.com/chart and it works fine. Enjoy!

  9. jestep 19 Jan, 2011

    Thanks for the update. Took them plenty long. I wouldn’t thing the additional processing overhead would be of any concern to someone with as many servers and bandwidth as google.

Post your comment




Copyright © 2014 SayNoToFlash, Jamie Estep, All Rights Reserved · Theme design by Themes Boutique