Skip to content Skip to sidebar Skip to footer
Home / Flot / Html / Javascript / Jquery

Printing Flot Graph In Ie 8

Post a Comment
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 ope

Solution 1:

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.

Solution 2:

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

Post a Comment for "Printing Flot Graph In Ie 8"