使Google Visualization API从https://charts.googleapis.com/*（而不是http://charts.apis.google.com/*）返回呈现的可视化效果

Question

The issue I am trying to solve is serving line charts prepared by Google visualization API on secure websites. I have read a couple of forums & blog posts but haven't come up with a workable solution.

One solution mentioned here is to get the image through server-side code, save it locally & then serve it. But the problem for me is how to generate the image URLs on the fly? I currently use visualization API to just feed my data to "google.visualization.ImageSparkLine" constructor & it does the rest.

Anyways after looking at the response generated by this method I get that an image is returned with a url pattern http://chart.apis.google.com/chart , which is the main cause of the problem on sites served via SSL. These causes warning to show up in FF, IE, Chrome.

Now I figured that if I just replaced the "http://chart.apis.google.com" WITH "https://chart.googleapis.com" everything works fine.

So any help for either 1. converting the image URL before it is fetched by the browser or 2. Getting secure response to begin with; will be great.

Answer 1

I finally got this resolved by constructing the Chart Images URLs.

Now before making a call to google visualization API for generating the visualization, the JavaScript code checks if the location.protocol has "https" or not. If it does have https than it does,

1. It encodes the raw values string using "extended encode" standard. (see http://code.google.com/apis/chart/docs/data_formats.html )
2. Then it merges different parameters to construct a https://chart.googleapis.com/ * URL (see http://code.google.com/apis/chart/docs/making_charts.html#multichart & http://code.google.com/apis/chart/docs/chart_params.html#gcharts_cht )
3. Dynamically generates the image using that URL & then attaches to the parent container.

Tested on FF3.6, Chrome, IE8 (w & w/o compatibility mode) without generating security warning messages or popups.