How to print flot graph

Question

Can any body help me to find out, how to print dynamic graph as example generated by flot. I tried this one but it's printing whole page, but I want only graph portion.

function printGraph(){
    $('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) {                        
        //Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
        //canvas.toDataURL("image/png");
        window.print('placeholder');
    });
}

Ignoble

canvas2image may be this is what you are looking for – Flare

Answer 1

This article describes how to copy the canvas to a normal img which can then easily be printed or saved as an image.

The important part:

img.src = canvas.toDataURL();

See the great answer below from Ignacio Correia for more details.

Thermostatics

Answer 2

Launch a new window with only the graph or with alternate css similar to what google maps does when you print.

Longitudinal

Answer 3

Attention this post have been edited, please see all possible solutions

---

From what I have searched and found you have only 2 choices or try to print the CANVAS, or EXPORT as an image or my idea is to separate the image from the content and try to print only the graph. Here is a FAQ by Flot, how can you export the image: Question Number 3

Q: Can I export the graph?

A: You can grab the image rendered by the canvas element used by Flot as a PNG or JPEG (remember to set a background). Note that it won't include anything not drawn in the canvas (such as the legend). And it doesn't work with excanvas which uses VML, but you could try Flashcanvas.

SOLUTION 1 - Export image:

Export image to computer and then print it

SOLUTION 2 - FLOT to CANVAS:

• Saving canvas as images - By Mozilla
• Save as Image Flot Plugin
• Related question - Problem printing in IE8

SOLUTION 3 - My own, Modal printing

This is not the best solution by far but it works, here is a demo:

• JSFIDDLE Normal Demo
• JSFIDDLE Fullscreen Demo

Steps

1. Load Fancybox
2. Open using INLINE FRAME the graph
3. PRINT on callback after show
4. Reload the page after print to redesign the page

Here is the necessary code:

$(document).ready(function() {
  $(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    afterShow   : function() {
        alert('You are about to print the graph!');
        window.print();
    },
    afterClose  : function() {
        alert('We need to refresh the page!');
        window.location.reload(false); 
    }        
  });
});

Extra This related question is about exporting Flot to PDF, don't know if you may be interested: Export Flot to PDF

EDIT - WORKING SOLUTION Here is a working demo of how to export the image: FLOT to IMAGE

Archil

Answer 4

You could hide the parts of the page you don't wish to print by using a separate stylesheet that has media="print". This would also allow you to tweak the final printed output of the graph itself, for example making it larger.

Merriott

Answer 5

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

<div class="box" id="theChart">
    <div id="placeholder"></div>
</div>

Now we can create an image:

html2canvas($('#theChart')).then(function(canvas) {
    image = canvas.toDataURL("image/png");
    document.location.href=image;
});

This will also solve the problem when canvas.toDataURL() does not render axis labels.

Elvieelvin