IE8 Printing issues with Jqplot

Question

I am testing jqplot with IE8. When I tried to print, the axes labels were offset. I used Andrew Bullock\'s Canvashack as a workaround.(http://blog.muonlab.com/2010/06/02/get

Answer 1

This answer worked great for me! I had to combine both the excanvas.js code change and then integrate the code that was posted here where the question originated. I will post my source below which uses JQPlot and functions correctly in IE 7. This is hosted in SharePoint, hence the SOAP envelope containing the CAML query.

Here is the basic layout:

• Function containing graph
  • call to canvas fix
• End of function containing graph

*Canvas Fix Function

Look for all the exclamation marks.

<script language="javascript" src="/code_lib/excanvas.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jquery-1.7.2.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jquery.jqplot.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script><link href="/code_lib/jquery.jqplot.css" type="text/css" rel="stylesheet"/><script language="javascript" src="/code_lib/json2.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jkl-parsexml.js" type="text/javascript"></script><script language="javascript" type="text/javascript">

$(document).ready(function() { //Required libraries: //jquery //jqplot - along with associated plugins //json2 //NOTE "FieldRef Name" values are column names that can be //extracted from URL by sorting the target list using these //columns in SharePoint

    var soapEnv =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
            <soapenv:Body> \
                 <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                    <listName>Produce</listName> \
                        <ViewFields> \
                           <FieldRef Name='Quantity' /> \
                           <FieldRef Name='Quantity2' /> \
                       </ViewFields> \
                </GetListItems> \
            </soapenv:Body> \
        </soapenv:Envelope>";
    $.ajax({
        //Use an ABSOLUTE reference to your target webservice
        url: "http://mydomain/Sandbox/bitest/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=\"utf-8\"",
        async: false //HORRIBLE idea, but only way it works in SP
    });

//BEGIN JQPLOT SECTION
//http://www.jqplot.com/
//Graph will render with below data
//NOTE REGARDING GRAPH DATA:
//All data input must be properly formatted JSON. Convert JScript array to
//JSON using json2.js library (JSONString = JSON.stringify(targetarray)).
//NEXT convery JSON string object to JSON array by using parse method:
//GraphArray = JSON.parse(JSONString) - use the string generated above.
//This new 'GraphArray' array can be passed into JQPlot as a chart series.
//json2.js library URL:
//https://github.com/douglascrockford/JSON-js/
//Regarding JSON Support in IE7: JSON stringify support does not exist
//hence the need to download and utilize the above library.

s1 = jsonArray;
s2 = jsonArray2;
// Clear the existing chart so that the data can be refreshed
// Other methods of doing this may be more efficient.
// RENAME THE TARGET DIV IF YOU REUSE THIS CODE!
// And remember to make the target div in the first place (see end of code)
jQuery('#chart1').empty(); 
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['Sum Quantity 1', 'Sum Quantity 2', 'Sum Quantity 3'];
    var plot1 = $.jqplot('chart1', [s1, s2], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesDefaults:{
        //dataRenderer: barRenderer,
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: true}
    },
    // Custom labels for the series are specified with the "label"
    // option on the series option.  Here a series option object
    // is specified for each series.
    series:[
        {label:'Sum Quantity 1'},
        {label:'Sum Quantity 2'},
        {label:'Sum Quantity 3'},
    ],
    // Show the legend and put it outside the grid, but inside the
    // plot container, shrinking the grid to accomodate the legend.
    // A value of "outside" would not shrink the grid and allow
    // the legend to overflow the container.
    legend: {
        show: true,
        placement: 'outsideGrid'
    },
    axes: {
        // Use a category axis on the x axis and use our custom ticks.
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        // Pad the y axis just a little so bars can get close to, but
        // not touch, the grid boundaries.  1.2 is the default padding.
        yaxis: {
            pad: 1.05,
            tickOptions: {formatString: '$%d'}
        }
    }
});
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!----------------------
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!----------------------
        //NOTE: This is the call to the print position fix
   $('body').CanvasHack();
});

//This function is intended to "fix" the positioning of graphs on print
(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);

function processResult(xData, status) {
        quantityOne = 0;
        quantityTwo = 0;
        quantityOneArray = [];
        quantityTwoArray = [];
        i=0;
        //Utilize asmx webservice to return list as XML
        //This routine can be modified to match the data structure
        //of that XML file.
        //The initial SOAP request returns the XML version of the list.
        //Utilize the below structure to access ALL xml data from the list:
        //{SITEURL}/_vti_bin/owssvr.dll?Cmd=Display&List={GUID}&XMLDATA=TRUE&Query=*
        $(xData.responseXML).find("z\\:row").each(function() {
           quantityOne += parseFloat($(this).attr("ows_Quantity"));
           quantityTwo += parseFloat($(this).attr("ows_Quantity2"));
           quantityOneArray[i] = parseFloat($(this).attr("ows_Quantity"));
           quantityTwoArray[i] = parseFloat($(this).attr("ows_Quantity2"));
           //JSON CONVERSION OCCURS BELOW
           jsonString = JSON.stringify(quantityOneArray);
           jsonString2 = JSON.stringify(quantityTwoArray);
           jsonArray = JSON.parse(jsonString);
           jsonArray2 = JSON.parse(jsonString2);
           i++;
    });
}</script>
<div class="jqplot-target" id="chart1" style="width: 400px; position: relative; height: 400px"></div>

Answer 2

The solution provided by Andrew didn't work for me. Instead, I had to modify excanvac.js as per, commenting out the following lines:

//var overlayEl = el.cloneNode(false);
// Use a non transparent background.
//overlayEl.style.backgroundColor = 'red';
//overlayEl.style.filter = 'alpha(opacity=0)';
//canvasElement.appendChild(overlayEl);

In my excanvas.js file (downloaded a couple days ago from jqplot) it's on about 596 to 600.

Hopefully this helps someone so they don't have to go through the painful process of trying to figure this out.

Answer 3

You need to use jQuery 1.4.2

Download the script and replace the link to 1.3.2 with 1.4.2.

Theres also a bug in your code, your div is called "chart1" but your script refers to "chart4".

Fix these and your singing :)