How to set enhanced resolution for print
Peer
be printed (using the normal print command)?
For normal display a value of 1 is best. For print I would prefer a
value of 2.
(I'm using firefox.)
Fabien Ménager
twice : one with normal resolution and a class name on the container
div (something like "screen") and one with a resolution or 2 (without
a specific class name for now), each of them need to be displayed (eg.
not "display: none") when drawn.
When the second is drawn, we add a class name "print". The CSS
stylesheet must contain :
@media print { /* will be used when displayed on the screen */
.screen {
display: none;
}
}
@media screen { /* will be used when sent to the printer */
.print {
display: none;
}
}
To prevent the "flicker" when the second is hidden when adding the
class name, you could add a "visibility: hidden; position: absolute;"
and then you won't need to add the class name once it is drawn, but at
the same time as the first container. The stylesheet should look
like :
@media print { /* will be used when displayed on the screen */
.screen {
display: none;
}
.print {
visibility: normal;
position: static:
}
}
@media screen { /* will be used when sent to the printer */
.print {
visibility: hidden;
position: absolute:
}
}
Please tell if this works ;) I didn't test it
Peer
But I think I do not fully understand what to do. What does it mean
"without a specific class name for now" and "When the second is drawn,
we add a class name "print""? How do I add the class name later on?
And why do I have to set the class name later on?
My test so far look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE]><script language="javascript" type="text/javascript"
src="path/to/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="flotr/
prototype-1.6.0.2.js"></script>
<script language="javascript" type="text/javascript" src="flotr/
prototype/lib/base64.js"></script>
<script language="javascript" type="text/javascript" src="flotr/
prototype/lib/canvas2image.js"></script>
<script language="javascript" type="text/javascript" src="flotr/
prototype/lib/canvastext.js"></script>
<script language="javascript" type="text/javascript" src="flotr/
prototype/flotr.js"></script>
<style type="text/css"><!--
@media screen {
.print {display: none;}
}
@media print {
.screen {display: none;}
}
--></style>
<HTML>
<HEAD>
<META content="text/html; charset=UTF-8">
</META>
</HEAD>
<BODY>
<DIV style="width:600px;height:370px;" Class="screen" id="screen">
</DIV>
<DIV style="width:600px;height:370px;" Class="print" id="print">
</DIV>
</BODY>
</HTML>
<script type="text/javascript">
series = [
{
data:
[[0,0],[1,4],
],
},
{
data:
[[0,0],[1,5],
],
},
];
options_screen = {
"resolution": 1,
"title": "For screen",
};
Flotr.draw('screen', series, options_screen);
options_print = {
"resolution": 1,
"title": "For print",
};
Flotr.draw('print', series, options_print);
</script>
This HTML-File is displayed quite well on screen. But when I print (or
look at the print preview) nothing is shown. Where is the problem?
Thanks!
George Roberts
instead try either to put it off screen (position:absolute;left:-2000;) or
put it in an iframe where width,height=0. Again making it visible again
using css as Fabien suggested.
- George Roberts
http://gr5.org
--------------------------------------------------
From: "Fabien M�nager" <fabien....@gmail.com>
Sent: Thursday, August 19, 2010 6:40 PM
To: "Flotr Javascript Plotting Library" <fl...@googlegroups.com>
Subject: Re: How to set enhanced resolution for print
> --
> You received this message because you are subscribed to the Google Groups
> "Flotr Javascript Plotting Library" group.
> To post to this group, send email to fl...@googlegroups.com.
> To unsubscribe from this group, send email to
> flotr+un...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/flotr?hl=en.
>
>
George Roberts
> .print {display: none;}
> }
> @media print {
> .screen {display: none;}
> }
I think you want to change above to this but I've never used the @media
thing so I'm not sure:
@media screen {
.print {display: none;}
.screen {display: block;} // added to make plot visible after printing is
done
}
@media print {
.screen {display: none;}
.print {display: block;} // added to make print div show up
}
>How do I add the class name later on?
You are all set - you put it in the div. You could add a class name later
on but don't need to. A gui component such as a div can only have one id
but many classes:
document.getElementFromId('print').class="print";
or the jquery method is something like (not checking manual):
$("#print").addClass('print');
It's a little confusing to have the id and class both called the same thing
so in the future I recommend putting "id" before all your ids such as:
<div id="idPrint"></div>
Simply to make the code more readable and searchable.
- George Roberts
http://gr5.org
--------------------------------------------------
From: "Peer" <peer.g...@gmail.com>
Sent: Saturday, August 21, 2010 5:11 AM
To: "Flotr Javascript Plotting Library" <fl...@googlegroups.com>
Subject: Re: How to set enhanced resolution for print
> Thank you for your tips.
> But I think I do not fully understand what to do. What does it mean
> "without a specific class name for now" and "When the second is drawn,
Peer
of. But either I can't hide the plot for one of the media or no plot
is displayed for one media at all. I think these DIVs behave a little
bit different than other HTML elements.
So if anybody still has some tip I would like to hear about it. But
I'm not in a hurry. Thanks anyway.
George Roberts
isn't visible. In other words, for most javascript you can have an
invisible div, put stuff in the div and then later change the style to
visible and everything will appear. But flotr doesn't even try to draw
anything if the div is either inivisible or display:none.
So - people have found ways to fool flotr. There is discussion *somewhere*
about this on the flot mailing list (not the flotr list). People have found
solutions. I don't know what they are but I seem to remember mention of
iframes. I think there are 3 solutions that should all work but maybe not.
They are:
1) <div> offscreen
2) <div> in tiny iframe
3) make div visible when calling flotr but when drawing complete set
visibility:none so that the user *never* sees it.
A fourth solution is to have a print button or print link that redraws the
graph in higher resolution, and then launches the browser's print dialog.
Similar to what maps.google.com does.
- George Roberts
http://gr5.org
--------------------------------------------------
From: "Peer" <peer.g...@gmail.com>
Sent: Tuesday, August 24, 2010 1:07 PM
To: "Flotr Javascript Plotting Library" <fl...@googlegroups.com>
Subject: Re: How to set enhanced resolution for print
> Sorry, but I can't get it to work. I tried everything I can think