JQplot issue - Printing with IE 8

Question

I have an issue with printing pages in IE that have jqPlot on them. I have been trying to solve this for a while and have seen several posts which speak to fixes; however, they do not solve my problem.

I have attempted both the CanvasHack and the edit to excanvas.js of commenting out overlayE1 logic (from this post - Print issue with JQplot on IE). From all the solutions, I have seen nothing works so I there must be a solution out there that has not been publicized.

To state the issue, the jqPlot is correct in all browsers (IE,Chrome, Firefox); however, when I preform Print Preview or Print (PDF or to a printer), some of the divs have shifted. Sees to effect

Below is my HTML.

<!DOCTYPE HTML>
<html>
<head>
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="dist/excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="dist/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="dist/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="dist/plugins/jqplot.highlighter.min.js"></script>
    <script type="text/javascript" src="dist/plugins/jqplot.cursor.min.js"></script>
    <script type="text/javascript" src="dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <link rel="stylesheet" type="text/css" href="dist/jquery.jqplot.css" />

    <script language="javascript" type="text/javascript">
         (function($) {
         $.fn.CanvasHack = function() {
          var canvases = this.find('canvas').filter(function() {
           return $(this).css('position') == 'absolute';
          });

          canvases.wrap(function() {
           var canvas = $(this);
           var div = $('<div />').css({
            position: 'absolute',
            top: canvas.css('top'),
            left: canvas.css('left')
           });
           canvas.css({
            top: '0',
            left: '0'
           });
           return div;
          });

          return this;
         };
        })(jQuery);

 </script>
 </head>
 <body>
   <div id="displaysection" style="width:400px;height:400px;"></div>
    <script>
       $.jqplot.config.enablePlugins = true;
       $(document).ready(function () {
                        var sinPoints = []; 
                          for (var i=0; i<2*Math.PI; i+=0.1){ 
                             sinPoints.push([i, 2*Math.sin(i-.8)]); 
                        }                            

                        plot = $.jqplot("displaysection", [sinPoints], {
                          title: {
                            text: "Title",
                            textAlign: "center",
                            fontSize: 20
                          },
                          legend: {
                            show: false
                          },
                          axes: {
                            xaxis: {
                              label: "x-Axis",
                              min: 0//,
                              //labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                            },
                            yaxis: {
                              label: "y-Axis"//,
                              //labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                            }
                          },
                          highlighter: {
                            show: true,
                            sizeAdjust: 3
                          },
                          cursor: {
                            show: true,
                            tooltipLocation:"nw",
                            zoom:true
                          },
                          seriesDefaults:{
                            showMarker: false,
                            showLine:true,
                            showLabel: true,
                            shadow: false,
                            lineWidth:3
                          },
                          series:[
                            { 
                              label: "Sin Curve",
                              color: "purple"
                            }                   
                          ]
                        });
            });
    $('body').CanvasHack();
   </script>
</body>
</html>

nick_w · Accepted Answer · 2013-12-12T11:14:25.770

Disclaimer: tested in IE9 under IE8 browser mode. This mode did have a problem where the curve was offset to the left.

When I debugged your code I found that var canvases = this.find('canvas')... always returned a jQuery object that did not contain anything, despite there being several canvas objects to find.

Looking at the code, $('body').CanvasHack(); is actually not executing within the $(document).ready block. I found that moving that call so that it was executing directly after the graph is created seemed to do the trick.

In the above code, this:

        });
});
$('body').CanvasHack();

Needs to be:

        });
    $('body').CanvasHack();
});

I also found that the modifications to excanvas.js were not needed - it didn't seem to make a difference either way.

JQplot issue - Printing with IE 8

1 Answers1