JqPlot As Image

Question

In the latest JqPlot examples (see here, there are buttons underneath some charts that you can click, and a div slides down with the chart as an image, allowing you to right click and save as.

I've checked the source and I just can't see myself where this is happening. I've seen various discussions about this (see here however my javascript is basic at best. This is however something I would like to implement in my current project.

Is anyone aware of a complete tutorial as to how to do this, i.e. from the actual jquery code right down to implementation in html code.

Answer 1

Here's the simplest example I can code up:

//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ // append the img to the DOM

Fiddle here.