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/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/) It still did not fix the issue. I am new to scripting. Is there anything wrong with my code? Please help.
Thanks, Shu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script language="javascript" type="text/javascript" src="jqplot/dist/excanvas.min.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="jqplot/dist/jquery.jqplot.css" />
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="jqplot/dist/jquery-1.3.2.min.js"></script>
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="jqplot/dist/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<!-- END: load jqplot -->
<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 class="jqPlot" id="chart1" style="height:320px; width:540px;"></div>
<script language="javascript" type="text/javascript">
line1=[[1,1], [1.5, 2.25], [2,4], [2.5,6.25], [3,9], [3.5,12.25], [4,16]];
line2=[25, 12.5, 6.25, 3.125];
xticks = [[0, 'zero'], [1, 'one'], [2, 'two'], [3, 'three'], [4, 'four'], [5, 'five']];
yticks = [-5, 0, 5, 10, 15, 20, 25, 30];
plot4 = $.jqplot('chart4', [line1, line2], {
legend:{show:true},
title:'Customized Axes Ticks',
grid: {background:'#f3f3f3', gridLineColor:'#accf9b'},
series:[
{label:'Rising line', markerOptions:{style:'square'}},
{label:'Declining line'}
],
axes:{
xaxis:{rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
ticks:xticks, tickOptions:{angle: -30}
},
yaxis:{rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
ticks:yticks, tickOptions:{formatString:'%d', angle: -30}
}
}
});
$('body').CanvasHack();
</script>
</body>
</html>