1

We are working on an application which makes extensive use of the HighCharts library.

Unfortunately, it has been difficult finding a way to generate "thumbnail images" on the client-side using JavaScript.

I have attempted to use the HTML2Canvas library, but found that it is does not interpret HighCharts very well.

Assume we have this chart:

$(function () {
$('#container').highcharts({

credits: {
    enabled: false
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

});

It is centered neatly in the middle of the page.

On the left hand side of the page, I would like to generate a thumbnail image representing that chart.

In order to do this, I need to somehow convert this chart to a PNG, or JPG. And than I need to embed it inside of the HTML.

Google hangouts is the only application I've seen that does a good job of doing this on the client-side.

Here is a JS fiddle of the example chart if it helps: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-getsvg/

If anyone knows how to approach this, please help!

Thanks.

Andrew
  • 995
  • 6
  • 10
  • Have you tried this answer from a similar question? http://stackoverflow.com/questions/8995177/render-highcharts-canvas-as-a-png-on-the-page/8997520#8997520 – itinance Dec 04 '14 at 20:08
  • Yes, but unfortunately that snippet uses a legacy version of exporting.js and does not seem to function the same anymore. Additionally, we need an entirely client side solution - and exporting requires Phantom.JS. – Andrew Dec 04 '14 at 20:18
  • Maybe [this](http://jsfiddle.net/syp0ggg7/) example will be fine for you, lets check. – Sebastian Bochan Dec 05 '14 at 11:19

0 Answers0