Hello,
I'm having an issue with printing and print preview in that the chart is shifting upwards from what is displayed on the screen. I'm not sure if it is a bug or if there is something wrong with my code. Could someone see if they can replicate the same scenario with my code (below). Of course HREFs have to be changed to point to your jqChart library.
I made sure I have the latest version jqchart version (3). Just open in Explorer (I'm on 8.0), do a print preview and see if the chart doesn't noticeably shift upwards, almost off the grid.
Thanks...
Greg
Oh...the tablesorter.css is just a prettify thing and a hide print thing. In case you are wondering...here is that css...it does the same thing with or without that css so you could cut it out. Just looks crappier.
#tabs ul li {
display: inline;
font-size: 8px;
}
.ui-tabs .ui-tabs-hide {
position: absolute;
top: -10000px;
display: block !important;
}
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}@media print { .noprint { display:none; }
.sz_cont { float:none;
width:auto;
display: block !important;
margin:10px 35px 15px 0px;
font-size: 8pt;
}
}
TD{font-family: Arial; font-size: 10pt;}
h1 { text-align: center }
h2 { text-align: center }
h3 { text-align: center }
h4 { text-align: center }
h5 { text-align: center }
Here is the HTML.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Results Reporting</title>
<link href="http://tstisrv.internal.upsher-smith.com:8080/sap/public/bsp/sap/public/bc/webrfc?_function=www_get_mime_object&_object_id=zjquery_ui" rel="stylesheet" type="text/css"/>
<script src="http://tstisrv.internal.upsher-smith.com:8080/sap/public/bsp/sap/public/bc/webrfc?_function=www_get_mime_object&_object_id=zjquery_min"></script>
<script src="http://tstisrv.internal.upsher-smith.com:8080/sap/public/bsp/sap/public/bc/webrfc?_function=www_get_mime_object&_object_id=zjquery_ui_min"></script>
<link href="http://tstisrv.internal.upsher-smith.com:8080/sap/public/bsp/sap/public/bc/webrfc?_function=www_get_mime_object&_object_id=ztablesorter" rel="stylesheet" type="text/css"/>
<script src="http://tstisrv.internal.upsher-smith.com:8080/sap/public/bsp/sap/public/bc/webrfc?_function=www_get_mime_object&_object_id=zjqchart" type="text/javascript"></script>
<!--[if IE]>
<script type="text/javascript" src="http://tstisrv.internal.upsher-smith.com:8080/sap/public/bsp/sap/public/bc/webrfc?_function=www_get_mime_object&_object_id=zexcanvas"></script>
<![endif]-->
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container01').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01211-99-50 : TABLET, WARFARIN SOD 1MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '267685','269533','270347','271200','275382','272053','276744','276745','278578']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 99.0,96.8,97.7,98.3,98.3,99.4,99.7,98.7,98.8] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 100.4,98.5,98.7,99.1,99.8,100.2,100.3,99.7,99.5] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 97.0,95.0,96.7,97.1,97.7,98.2,98.4,97.6,97.8] }
]
});
$("#tabs").tabs();
});
</script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container02').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01212-99-50 : TABLET, WARFARIN SOD 2MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '267675','267676','270353','271185','271186','273833','275380','278694','280722','280725']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 99.1,97.5,99.0,99.2,99.1,99.6,100.2,98.6,99.0,97.2] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 101.6,98.2,99.6,100.1,100.7,100.4,101.9,100.6,100.8,98.7] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 97.2,96.1,97.9,98.4,98.2,98.7,98.4,96.6,97.4,95.8] }
]
});
$("#tabs").tabs();
});
</script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container03').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01213-99-50 : TABLET, WARFARIN SOD 2.5MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '265385','267689','270557','270558','276763','282851','281012']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 100.1,98.9,98.4,98.6,100.0,98.4,97.4] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 102.4,100.1,99.5,99.4,101.5,99.7,98.1] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 98.4,97.5,97.2,97.5,98.1,97.1,96.5] }
]
});
$("#tabs").tabs();
});
</script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container04').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01216-99-50 : TABLET, WARFARIN SOD 5MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '267691','265491','267698','267699','270319','270322','270323','271028','271029','271061','272197','272198','272199','274334','275350','275351','275930','276749','276750','278205','280736','280737','280738']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 99.0,98.6,99.4,100.7,99.5,100.8,98.3,98.4,98.6,101.0,100.3,100.0,100.3,100.7,100.7,100.2,100.3,100.6,99.3,100.6,99.9,99.2,99.9] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 100.9,101.9,101.3,102.9,101.2,102.2,99.8,99.5,100.2,102.9,101.0,101.1,101.2,101.4,102.3,102.1,101.5,103.6,100.4,103.5,103.3,100.5,101.9] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 97.7,97.6,97.9,99.6,98.0,98.0,97.2,96.9,97.2,99.5,99.4,99.0,99.5,99.8,98.5,99.0,99.1,98.3,96.7,99.0,97.8,96.8,97.7] }
]
});
$("#tabs").tabs();
});
</script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container05').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01217-99-50 : TABLET, WARFARIN SOD 6MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '267342','269147','270653','272852','275381','278206','280713','280712']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 98.4,99.3,99.3,101.0,99.7,98.5,99.1,97.2] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 100.8,100.7,100.8,102.2,101.3,103.6,101.4,99.2] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 96.7,97.3,97.4,99.7,98.4,96.8,97.0,94.5] }
]
});
$("#tabs").tabs();
});
</script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container06').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01214-99-50 : TABLET, WARFARIN SOD 3MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '268211','270328','272250','275383','276757']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 99.6,98.1,99.4,101.1,98.4] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 101.2,99.1,101.2,103.0,98.9] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 97.7,97.7,98.3,99.0,97.6] }
]
});
$("#tabs").tabs();
});
</script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container07').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01215-99-50 : TABLET, WARFARIN SOD 4MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '267688','270390','275378','275379']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 98.5,97.5,100.4,100.9] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 100.7,98.2,101.2,101.8] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 97.4,96.2,98.5,99.6] }
]
});
$("#tabs").tabs();
});
</script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container08').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01218-99-50 : TABLET, WARFARIN SOD 7.5MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '267705','270329','271195','275337','275338','277924']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 99.3,98.5,101.1,99.8,101.7,101.2] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 102.8,99.9,102.0,101.7,104.0,105.0] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 97.0,97.7,99.9,97.6,99.3,99.7] }
]
});
$("#tabs").tabs();
});
</script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#container09').jqChart({
width: 1000,
height: window.innerHeight,
title: { text:'01219-99-50 : TABLET, WARFARIN SOD 10MG'},
tooltips: { type:'shared'},
axes: [{
type:'category',
location:'bottom',
labels: { fillStyle:'blue', font:'10px sans-serif', angle : -45 },
title:'Batch Number',
categories: [ '267660','270333','275355','275900']
}],
series: [ {
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 99.0,100.1,100.3,100.0] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 101.0,102.6,101.3,102.4] }
,{
type:'spline',
title:'Uniformity of Dosage Unit',
data: [ 97.2,97.9,96.6,98.8] }
]
});
$("#tabs").tabs();
});
</script>
</head>
<body>
<h1>body/open</h1>
<h5>simple body open</h5>
<div id="tabs">
<ul class="noprint">
<li>
<a href="#fragment01">
<span>01211-99-50 : </br> TABLET, WARFARIN SOD 1MG</span>
</a>
</li>
<li>
<a href="#fragment02">
<span>01212-99-50 : </br> TABLET, WARFARIN SOD 2MG</span>
</a>
</li>
<li>
<a href="#fragment03">
<span>01213-99-50 : </br> TABLET, WARFARIN SOD 2.5MG</span>
</a>
</li>
<li>
<a href="#fragment04">
<span>01216-99-50 : </br> TABLET, WARFARIN SOD 5MG</span>
</a>
</li>
<li>
<a href="#fragment05">
<span>01217-99-50 : </br> TABLET, WARFARIN SOD 6MG</span>
</a>
</li>
<li>
<a href="#fragment06">
<span>01214-99-50 : </br> TABLET, WARFARIN SOD 3MG</span>
</a>
</li>
<li>
<a href="#fragment07">
<span>01215-99-50 : </br> TABLET, WARFARIN SOD 4MG</span>
</a>
</li>
<li>
<a href="#fragment08">
<span>01218-99-50 : </br> TABLET, WARFARIN SOD 7.5MG</span>
</a>
</li>
<li>
<a href="#fragment09">
<span>01219-99-50 : </br> TABLET, WARFARIN SOD 10MG</span>
</a>
</li>
</ul>
<div id="fragment01">
<h2></h2>
<h5></h5>
<div id="container01" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
<div id="fragment02">
<h2></h2>
<h5></h5>
<div id="container02" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
<div id="fragment03">
<h2></h2>
<h5></h5>
<div id="container03" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
<div id="fragment04">
<h2></h2>
<h5></h5>
<div id="container04" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
<div id="fragment05">
<h2></h2>
<h5></h5>
<div id="container05" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
<div id="fragment06">
<h2></h2>
<h5></h5>
<div id="container06" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
<div id="fragment07">
<h2></h2>
<h5></h5>
<div id="container07" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
<div id="fragment08">
<h2></h2>
<h5></h5>
<div id="container08" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
<div id="fragment09">
<h2></h2>
<h5></h5>
<div id="container09" class="sz_cont" style="display: block !important; font-size: 8pt; margin: 30px"></div>
</div>
</div>
</body>
</html>