Save the entire flot chart to image

Question

I am trying to save entire flot chart to image. I found this link: Stackoverflow question, it works to some degree -- only save the curves. It didn't save the ticks on axis. Any help is appreciated.

Edit: flot chart will create two canvases:

url = $("canvas")[0].toDataURL("image/png");

I converted the first one to image, and it contains just the curves for the graphs. Don't see ticks, don't y-axis label.

Update:

Found a solution by using html2canvas. First assign the container div to have id like "theChart".

<div class="demo-container" id="theChart">
    <!--<div style="vertical-align:top"><span style="float:left;vertical-align:top">Server Response in millisecond</span><span style="float:right;vertical-align:top">Http Response Rate</span></div> -->
    <div id="placeholder" class="demo-placeholder"></div>
</div>

Now we can create an image:

$('#theChart').html2canvas({
    onrendered: function (canvas) {
        z = canvas.toDataURL("image/png");
        myWindow = window.open('', 'header', 'menubar=0', 'toolbar=0');
        myWindow.document.write('Right click to save image<br/><img src="' + z + '"/>');
    }
});