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.