4

I am currently using http://www.flotcharts.org/ for a graphing plugin. I am trying to achieve the ability to print a flot graph off a page surrounded by content. I am trying to open up a new window and print a canvas object so I can print JUST the flot graph and I have successfully done that. However, to do, that I need to make the canvas an image so I can open it in a new window because I could not get the flot to work on a new window.

canvas.toDataURL();

In internet explorer 8 I get the error that there is no method toDataURL(). I believe this is because internet explorer 8 does not support the canvas tag and flot must use a workaround. So how do I print JUST the flot graph from a page in new browsers and internet explorer 8?

jacksonfiverniner
  • 92
  • 7

2 Answers2

4

I had the same problem when I was trying to print flot charts. An alternative to opening a new window is to move the canvas to the top of the page and hide everything else, print, then put everything back. This should work in modern browsers and also in IE8. Also, this will keep your external styles and libraries(jquery/flot) referenced since it is on the same page.

with the html structure:

<body>
    <div id="wrapper">
        <div id="some-element></div>
        <canvas id="my-canvas"></canvas>
        <button type="button" id="print-button">PRINT</button>
        <div id="some-other-element></div>
    </div>
</body>

and the javascript function:

function printContent(whatToPrint, priorSibling, afterSibling) 
{

    $('#wrapper').hide();//hide content wrapper inside of body

    //take what to print out of wrapper and place directly inside body
    $(whatToPrint).appendTo('body');

    window.print();//print the window

    //put everything back
    $('#wrapper').show();

    if (priorSibling != null) 
    {
        $(whatToPrint).insertAfter(priorSibling);
    }
    else if (afterSibling != null)
    {
        $(whatToPrint).insertBefore(afterSibling);
    }

}

and the javascript print button event

$('#print-button').click(function(){

    printContent($('#my-canvas'), $('#some-element'), null);

});

NOTE: printing in chrome, without using system dialog printing, might mess with your styles. This is just chrome though. If anyone has a solution to that, let me know.

itsstephyoutrick
  • 216
  • 1
  • 7
1

You might also want to try Flashcanvas (flashcanvas.net) instead of Excanvas; it should support toDataURL.

DNS
  • 37,249
  • 18
  • 95
  • 132