On saving interactive charts as static images

[Riccardo Govoni]

This is a topic that pops up frequently here in the forum. Many users have the need to convert/serialize the interactive charts they generate using the Google Charts Tools API into static images (PNGs or equivalent) for the user to download or further process.

Currently the interactive charts API do not offer this feature (unless you are in specific domains, such as within a Google Apps Script script), unless you are willing to regenerate your chart using the static image APIs --- which however have different semantics, making it difficult to support both.

A quick workaround for this is to convert the SVG chart to <canvas /> and then extract the image data from there. This allows for full client-side pure javascript image serialization, at the cost of cross-browser support. The solution works on Chrome,Safari,Firefox,IE9 and Opera, but IE8 and lower does not support the necessary features for this to work (server-side image serialization is also possible, although I won't discuss it here).

I have written a brief tutorial and example page to show how this work. Depending on the browsers your users use, and how flexible you can be, the solution might be good enough for your case.

Tutorial : http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html

Example page: http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html

Source code : https://gist.github.com/1333906

Please note that this is somewhat an hack that I put together in the spare time based on the popularity of topic and lack of support in the current official API, so use at your own risk. Have a look at the tutorial for the limitations. If I were to support image serialization for a production service, I'd still recommend using the static image APIs mentioned above.

Please discuss / comment / improve.

- R.

[Roni Biran]

Sounds interesting... will check

Great job R

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/8kJwHA9OQwsJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Allomorphy]

Hi

Is it possible or is there a way to produce vertical axis lines
on Area charts?
The workaround I am using now, which is very nice, is to move
the values to the next column and then this will automatically
show up in a different color.

My graph plots against an X-Axis of Date and Time.

I am not showing the time but would love to be able to show it,
is there also a workaround here.

I am tweaking the hAxis.showTextEvery to display the ideal
number of dates (like show only one date per day), but would really
like to have a second axis for time of day.

Thanks

--
Eric

[Roni Biran]

Just tested it......

This is absolutely mind blowing!!!!!

Amazing job R.

Now, all I have to do is see if I can make it run on a server.....

[Roni Biran]

Hi there,

In regard to vertical gridlines, at the moment only horizontal gridlines exist.

As for showing another axis, can you explain what you want to see? do you mean you want to see both date and time? or is it two lines of hAxis?

Can you give a sample URL with an image or something?

--
Eric

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

[Allomorphy]

Roni

Am I alowed to enclose images?
Here is the graph

As i mentioned, I tweaked hAxis.showTextEveryto give the result of one
label per day (there are about 100 data points per day).

I would like to show on the hAxis the time of day or at least some
labelling of it. I could program the data to interpolate time of day
into some of the points for the hAxis but I do not have no control of
the API heuristics to make it print what I want IYSWIM.

So I thought a seond hAxis would be great with time of day. I had some
fun and put the time in in 24 hour format as another coloured dataline
in the graph and it gave a sawtooth pattern to 24 and then back to
zero, fun but not presentable.

I also could not find how to add extra horizantal axes, is this
doable?

--
Eric

[Allomorphy]

Funny how it is, you ask a question and only then do you think of an
answer yourself.

An awful hack but what I could do is adjust the font size of the date
so that it is smaller and/or truncate the sdate string and then addd
some ascii art to the string with - and * and | to indicate morning,
midday, om, evening, or whatever.

But I am sure there is a better way?

I tried using html markup in this but if failed although I read
somewhere that you could use html.

--
Eric

[Michael Fever]

So if I wanted to include the PNG file into a PDF using TCPDF, my guess is that I would need to do a 2-step process.

Step 1 - generate all my charts

Step 2 - call my PDF generator code

The chart generation is all JavaScript so its done on the browser.

The PDF generation is pure PHP and is all backend, no frontend processing whatsoever.

Basically the best thing to do for me is to generate the images, save them either in a MySQL database or as image files.

Then my PDF generator can recall the images.  I have about 3 charts per page, 2 page report.

Thanks

Mike

[Michael Fever]

I managed to create a page that has a form on it that generates the google API chart, copies it to a hidden form element and then saves it to a MySQL database.

The image is inserted into the database as a base64 encoded image.  I wrote a small PHP to export the image from the db, like img src='showimage.php?id=7'

Happy to report is all works.

[asgallant]

Cool, glad to hear it.

[Shahbaz Aslam]

Hi Michael Fever 

I am facing the same problem here. can you give me the code for doing that. It will be great help.

Regards,

Shahbaz

[Travis Stude]

I have tried your example page on ...

http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html

I have tried Chrome, FF, and IE (All latest versions) and I could not get the images to generate.  I always see "Image will be placed here".  This seems like the best resource to convert SVG to image and it sounds like it is working for others.  Is this still working for you?

Thanks,
TJ

[asgallant]

That code was for an older version of the API that held all charts inside iframes; the new version of the API does not use iframes for the SVG-based charts (most charts are SVG-based when viewed in browsers other than old versions of IE [8 and below, which use VML instead]).  The fixed version is here: http://jsfiddle.net/SCjm8/1/.  Note that this code will never work in older versions of IE; to the best of my research capabilities, I have never found any way to convert VML code to an image.

[Travis Stude]

Thank you so much for a WORKING demo.  I will get to work on it right away.

[tirumalesh killamsetty]

Hi Michael Fever,

Is it possible to share your code  or sample code if any , as I am facing similar issue (saving the Images into a PDF file and save it into mysql database)

Regards,
Tiru

[Pedro Guimarães]

Hi,

Im using that fiddle, but I cant see/convert to image/download in Firefox20 and IE10 some charts like line,bar,column. It is only working for pie chart, scatter chart, etc..


What is causing trouble?

[asgallant]

That code is quite finicky; I find it generally works the best in Chrome (all of the examples work in Chrome, at least).  As far as this code is concerned, there is no difference between LineCharts, ColumnCharts, and PieCharts - they are all SVG structures.  If you are having problems, there may be some local code that is interfering - can you post your code so I can take a look and see what might be the problem?

[Pedro Guimarães]

asgallant,

Iv tried with chrome and works perfect, safary too.

Altougth, with Firefox and IE both last version, i cant open that chart types i said in last post. Ive tried with other computers too, same result.

[asgallant]

Do you have the same problem when running the demo code (http://jsfiddle.net/SCjm8/1/)?  I tried that in Firefox and it worked fine for all chart types (converting to image works in IE 9, but saving does not - this is a known limitation).

[Pedro Guimarães]

Yes, im just talking about that fiddle only. I cant convert all charts with firefox, just the Pie one.

[asgallant]

What happens when you click the "Convert to image" buttons on the other charts?  Check the Firefox error console to see if there are any messages appearing there.

[Pedro Guimarães]

A white or empty image appears, looks like it has nothing.

http://s13.postimg.org/hq468d5fb/fiddle.png

[asgallant]

Check Firefox's error console to see if there are any error messages.

[Pedro Guimarães]

I Will, but I ve tried it in 3 diferent computers by far and result is the same.

[asgallant]

Are you using the latest version of Firefox?  I ran it today in FF 20.0.1 without any problems.

[Pedro Guimarães]

Yes, last version. 20.0.1.

When i click "convert to image", error console outputs this: [10:17:54.412] ERROR: Element 'parsererror' not yet implemented. But i dont believe it is causing the problem

[Pedro Guimarães]

I might have found the cause!

My FF 20.0.1 Win7 can't convert any chart when Y-axis is > 1000!

Another possible cause:

FF 19.0 ENG - Perfect
FF 20.0.1 ENG - Perfect
FF 19.0 PT (Portugal) - Not working
FF 20.0.1 PT - Not working
FF 20.0.1 FR (France) - Not working

So, I would say that is a problem related to special characters like `´^~ç . It could be causing the trouble. But its weird, because in this fiddle example, there is any chart thar uses that chars. I supose that, somewhere in conversion function is using it?

[asgallant]

I don't know enough about the differences in the localized versions of Firefox to say whether that could be the cause or not, but clearly something isn't working right in the non-English versions.

[Pedro Guimarães]

Another thing:

Ive checked the FF console error:

Timestamp: 09-05-2013 15:08:01
Error: undifined entity
Line: 1, Col: 3540

<svg style="overflow: hidden;" height="250" width="400"><defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_30">

(...)1&nbsp;000(..)1&nbsp;300(...)</text></g></g><g></g></svg>

The error points to: 1&nbsp;000 and 1&nbsp;300.

This wont happen if I use ENG version of FF. But using another one, that is the error that wont let convert image.
Have you ever heard about this?

[asgallant]

Is that for displaying numbers with a space-separator in the 1000's place, eg "3 000" for 3000?  That might be the cause of the problem if the SVG to PNG parser doesn't interpret the "&nbsp;" correctly.

[Pedro Guimarães]

Yes! I've figured it out!

THe problem is all about the thousand numers.

60 000 or 60,000 or 60000

THe 1st one doenst work with the canvg scripts!

So, the solution is add to google chart opt {vAxis: #.###;}

If anyone has this problem, feel free to contact me!

Regards

[George Risvas]

Hi asgallant,

 

I have developed a few months ago a cross-browser solution including old versions of IE (8 and earlier)  which can transform with success all google charts to image. Also provides many auto procedures like upload graph to server,

download ,save,copy to clipboard etc.It's pure javascript.For more details look at http://www.chartstoimage.eu/.

 

Thanks,

George

[asgallant]

That's fantastic, if it works - unfortunately, your own site doesn't use the version with IE 8 support for the demos, so I can't test it.

[malla reddy]

Thanks for The great example. Basically I am a salesforce developer I tried this in salesforce but it is not working is require any changes to run it in salesforce please suggest me.
Coming to my requirement I have a page with two Google visualization API column charts and one table i want to save it as image all in one click instead of giving separate buttons for each chart is it possible to this . If possible can you please help me.

[malla reddy]

Thanks for The great example. Basically I am a salesforce developer I tried this in salesforce but it is not working is require any changes to run it in salesforce please suggest me.
Coming to my requirement I have a page with two Google visualization API column charts and one table i want to save it as image all in one click instead of giving separate buttons for each chart is it possible to this . If possible can you please help me.

On Wednesday, 2 November 2011 22:53:42 UTC+5:30, Riccardo Govoni wrote:

This is a topic that pops up frequently here in the forum. Many users have the need to convert/serialize the interactive charts they generate using the Google Charts Tools API into static images (PNGs or equivalent) for the user to download or further process.

Currently the interactive charts API do not offer this feature (unless you are in specific domains, such as within a Google Apps Script script), unless you are willing to regenerate your chart using the static image APIs --- which however have different semantics, making it difficult to support both.

A quick workaround for this is to convert the SVG chart to <canvas /> and then extract the image data from there. This allows for full client-side pure javascript image serialization, at the cost of cross-browser support. The solution works on Chrome,Safari,Firefox,IE9 and Opera, but IE8 and lower does not support the necessary features for this to work (server-side image serialization is also possible, although I won't discuss it here).

I have written a brief tutorial and example page to show how this work. Depending on the browsers your users use, and how flexible you can be, the solution might be good enough for your case.

Tutorial : http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html

Example page: http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html

Source code : https://gist.github.com/1333906

Please note that this is somewhat an hack that I put together in the spare time based on the popularity of topic and lack of support in the current official API, so use at your own risk. Have a look at the tutorial for the limitations. If I were to support image serialization for a production service, I'd still recommend using the static image APIs mentioned above.

Please discuss / comment / improve.

- R.