Page 1 of 1
Webchart printing
Posted: Sun Jun 22, 2008 12:20 pm
by 9637403
I'm having a real problem getting webchart print to work correctly from the browser.
The chart is displayed on the page correctly and all the click events work correctly. Yet not matter what I try issuing "window.print()" results in a page being printed with the small red cross instead of the chart. I've searched the forum and can't find any suitable samples. Do you have a working sample that demonstrates printing from the borwser using javascript.
I'm using Session as the tempchart style.
Posted: Mon Jun 23, 2008 9:32 am
by narcis
Hi Adrian,
It works fine for me doing as told
here. Does it work fine at your end?
Thanks in advance.
Posted: Sun Jun 29, 2008 7:01 am
by 9637403
Hi there,
this doesn't work for me, I just get a blank square with a small square in top left corner with a red cross.
even if I right click on the page and select Print from the explorer menu I get the same.
the page is correctly displayed showing the chart, it just doesn't want to print properly. I thought it might be my app thats doing something so I checked that there is absolutly no postback when the print is initiated and there isn't. It's got me stumped.
any suggestions?
Posted: Wed Jul 02, 2008 12:13 pm
by 13047134
Any update on this one?
Posted: Thu Jul 03, 2008 8:50 am
by Marc
Hello,
We've re-tested the technique described, using window.print() both from Internet Explorer and Firefox (and as standalone in a page or in an Ajax Update panel). The Chart prints correctly from both browsers. The Chart itself is an image on the page, so should print as any other image. If you do a Print Preview from the Browser 'File' menu, does the Chart show in the preview?
- Are there any special characteristics to your project that we most probably haven't reproduced here in our standard tests?
- Are you using one of the above two browser types?
- Is the red cross you see the same size as the Chart you expect to display (does your Chart have width and height set ie, via 'style' when right mouseclicking on Chart at designtime)?
- Are you able to send us a sample project to reproduce the problem?
- What TeeChart build number are you using?
With thanks.
Regards,
Marc Meumann
Posted: Thu Jul 03, 2008 12:31 pm
by 13047134
Hi there,
I'm using IE 7 to display the charts. I don't believe there are any special characteristics, here is the source of the page (once displayed.
Code: Select all
<!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 id="Head1"><title>
Captell chart
</title>
<script type="text/javascript">
<!--
function PrintIT()
{
window.print()
}
function FP_openNewWindow(w,h,nav,loc,sts,menu,scroll,resize,name,url)
{
var windowProperties='';
if(nav==false) windowProperties+='toolbar=no,';
else windowProperties+='toolbar=yes,';
if(loc==false) windowProperties+='location=no,';
else windowProperties+='location=yes,';
if(sts==false) windowProperties+='status=no,';
else windowProperties+='status=yes,';
if(menu==false) windowProperties+='menubar=no,';
else windowProperties+='menubar=yes,';
if(scroll==false) windowProperties+='scrollbars=no,';
else windowProperties+='scrollbars=yes,';
if(resize==false) windowProperties+='resizable=no,';
else windowProperties+='resizable=yes,';
windowProperties+='top=25,left=25,'
if(w!="") windowProperties+='width='+w+',';
if(h!="") windowProperties+='height='+h;
if(windowProperties!="")
{
if( windowProperties.charAt(windowProperties.length-1)==',')
windowProperties=windowProperties.substring(0,windowProperties.length-1);
}
w=window.open(url,name,windowProperties);
w.focus();
}
// -->
</script>
<style type="text/css">
.Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.Menu1_1 { color:#284E98;font-family:Verdana;font-size:0.8em;text-decoration:none; }
.Menu1_2 { color:#284E98;font-family:Verdana;font-size:0.8em; }
.Menu1_3 { }
.Menu1_4 { padding:2px 5px 2px 5px; }
.Menu1_5 { }
.Menu1_6 { padding:2px 5px 2px 5px; }
.Menu1_7 { background-color:#B5C7DE; }
.Menu1_8 { }
.Menu1_9 { background-color:#507CD1; }
.Menu1_10 { }
.Menu1_11 { background-color:#507CD1; }
.Menu1_12 { color:White; }
.Menu1_13 { color:White;background-color:#284E98; }
.Menu1_14 { color:White; }
.Menu1_15 { color:White;background-color:#284E98; }
</style></head>
<body>
<form name="form1" method="post" action="frmCaptellChart.aspx?S=(local)captell&D=MCA_captell&O=SAMPLES%5cClick+Through+Example%5cMonthly+CPU&W=650&H=420" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJOTUxNTEwMTg2D2QWAgIDD2QWBgIDDw8WBB4EVGV4dAULTW9udGhseSBDUFUeB1Rvb2xUaXAFKVNBTVBMRVNcQ2xpY2sgVGhyb3VnaCBFeGFtcGxlXE1vbnRobHkgQ1BVZGQCBQ8PFgQeBVdpZHRoGwAAAAAAAAAAAQAAAB4EXyFTQgKAAmQWAgIBDzwrAA0AZAIHDw8WBh4GSGVpZ2h0GwAAAAAAQHpAAQAAAB8CGwAAAAAAUIRAAQAAAB8DAoADZGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCFdlYkNoYXJ0BQdndlBhcm1zD2dkmzgYQMnYuoQkzBc8F881sLY9qaY=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/Captell/WebResource.axd?d=EAC7f9ovo6kOjw9mK4lnVA2&t=633351004200000000" type="text/javascript"></script>
<script src="/Captell/WebResource.axd?d=NANyrq4yWIO1y3C3-aT-0w2&t=633351004200000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
FP_openNewWindow('750','750',false,false,true,false,true,true,'QUERYSAMPLES_CLICK_THROUGH_EXAMPLE_MONTHLY_CPU','frmCaptellData.aspx?S=(local)\captell&D=MCA_captell&O=SAMPLES\\Click Through Example\\Monthly CPU');//]]>
</script>
<div>
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/Captell/WebResource.axd?d=n1Ew516gRvoiDDAXCTThHg2&t=633351004200000000" width="0" height="0" style="border-width:0px;" /></a><table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n0"><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','File')">File</a></td><td style="width:0;"><img src="/Captell/WebResource.axd?d=EeSforBS-wBwytSrErj9H8DJIIY1oyxwBgdP7vm8dP41&t=633351004200000000" alt="Expand File" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1"><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','Refresh')">Refresh</a></td>
</tr>
</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2"><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="Menu1_1 Menu1_3" href="help_chart.htm" target="_Blank">Help</a></td>
</tr>
</table></td>
</tr>
</table><div id="Menu1n0Items" class="Menu1_0 Menu1_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:__doPostBack('Menu1','File\\Show URL')">Show URL</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n4">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:window.print()">Print</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n5">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:window.close()">Exit</a></td>
</tr>
</table></td>
</tr>
</table><div class="Menu1_6 Menu1_0" id="Menu1n0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/Captell/WebResource.axd?d=I5AzfpkKROoLW8urWORBjOwrYlt5UxeIvdKQCuHMEqY1&t=633351004200000000" alt="Scroll up" />
</div><div class="Menu1_6 Menu1_0" id="Menu1n0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/Captell/WebResource.axd?d=q7ZMm6AVQy8E0Rq1EJKO5Hy2q9lBRbZ4aBtW_4xF6v41&t=633351004200000000" alt="Scroll down" />
</div>
</div><a id="Menu1_SkipLink"></a>
<table id="TABLE1" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="height: 24px" colspan="2">
<input name="txtChartName" type="text" value="Monthly CPU" readonly="readonly" id="txtChartName" title="SAMPLES\Click Through Example\Monthly CPU" style="color:White;background-color:LightSteelBlue;border-width:1pt;border-style:solid;font-family:Verdana;font-size:12pt;font-weight:bold;width:100%;" /></td>
</tr>
<tr>
<td style="width:auto; vertical-align:top">
<div id="pnlParms" style="height:250px;width:0px;text-align:left;white-space:nowrap;">
</div>
</td>
<td align="left" valign="top" style="height: 376px; width:100%">
<div style=" z-index : 100; height:420px; width:650px" id=WebChart> <IMG GALLERYIMG="no" SRC="GetChart.aspx?Chart=WebChart::1633507204038996845png" id="WebChartimg" Name="WebChartimg" Border=0 onload="registerChart(1,'WebChart')"></div>
</td>
</tr>
<tr>
<td align="left" colspan="2" style="height: 90%" valign="top">
</td>
</tr>
</table>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLtr/KIBQKm0+ugBwKX8Ny4AgKBq6j5CQLVl72bBp4zwJISfTo/sTCSW7dkIr6LmJTb" />
</div>
<script type="text/javascript">
//<![CDATA[
var Menu1_Data = new Object();
Menu1_Data.disappearAfter = 500;
Menu1_Data.horizontalOffset = 2;
Menu1_Data.verticalOffset = 0;
Menu1_Data.hoverClass = 'Menu1_15';
Menu1_Data.hoverHyperLinkClass = 'Menu1_14';
Menu1_Data.staticHoverClass = 'Menu1_13';
Menu1_Data.staticHoverHyperLinkClass = 'Menu1_12';
//]]>
</script>
<script language="javascript">
var is_ie = navigator.appName == 'Microsoft Internet Explorer'; var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
function activateContent(chart,empty,evt)
{
evt = (evt) ? evt : event;
var oVDiv=document.getElementById(chart);
if ((oVDiv.style.position!="absolute") || (oVDiv.style.posTop==null)
|| (oVDiv.style.top=="")
|| (oVDiv.style.posLeft==null)
|| (oVDiv.style.left==""))
{
getLocation(oVDiv);
}
var eClientX;
var eClientY;
var xPos;
var yPos;
var scrollOffsetX;
var scrollOffsetY;
eClientX=evt.clientX;
eClientY=evt.clientY;
if (is_ie) {
scrollOffsetX=iebody.scrollLeft;
scrollOffsetY=iebody.scrollTop;
}
else {
scrollOffsetX=window.pageXOffset;
scrollOffsetY=window.pageYOffset;
}
xPos=eClientX+scrollOffsetX;
yPos=eClientY+scrollOffsetY;
__doPostBack(chart,'chart$'+chart+';xPos$'
+(xPos-oVDiv.style.posLeft)+';yPos$'
+(yPos-oVDiv.style.posTop));
}
var ActionType = { Zooming:1, Scrolling:2 };
/*charts list*/
var chartList = "";
this.blockEvent = function(evt) {
evt = (evt) ? evt : event;
evt.cancelBubble = true;
draggingEvent(evt);
return false;
}
this.draggingEvent = function(evt)
{
evt = (evt) ? evt : event;
if(window.event){
evt.cancelBubble = true;
evt.returnValue = false;
}else{
evt = (evt) ? evt : event;
evt.stopPropagation();
evt.preventDefault();
}
evt.cancelBubble = true;
}
this.getLocation = function(chObj) {
var dynaObj=chObj;
var overallTop=dynaObj.offsetTop;
var overallLeft=dynaObj.offsetLeft;
while (dynaObj.offsetParent!=null){
dynaObj=dynaObj.offsetParent;
overallTop=overallTop+dynaObj.offsetTop;
overallLeft=overallLeft+dynaObj.offsetLeft;
}
if ((chObj.style.position!="absolute") || (chObj.style.posTop==null)
|| (chObj.style.top=="")){
chObj.style.posTop=overallTop;
}
if ((chObj.style.position!="absolute") || (chObj.style.posLeft==null)
|| (chObj.style.left=="")){
chObj.style.posLeft=overallLeft;
}
}
this.registerChart = function(toolType,chObjStr) {
action=toolType;
if (action==ActionType.Zooming){
if (document.getElementById(chObjStr)!=null){
var _chObj = document.getElementById(chObjStr);
_chObj.oncontextmenu = blockEvent;
_chObj.ondrag = blockEvent;
_chObj.ondragstart = blockEvent;
_chObj.onmousedown = function (event) { activateContent(chObjStr,true,event); };
_chObj.onmouseup = function (event) { activateContent(chObjStr,false,event); };
}
}
var charts = chartList.split(';');
var x;
if (charts.length>0){
if (charts[0].length>0)
{
for (var i=0;i<charts.length;i++){
if (charts[i].indexOf(chObjStr)!=-1){
return;
}
}
}
}
chartList = (chartList.length>0) ? chartList+';' + chObjStr : chObjStr;
}
</script>
</form>
</body>
</html>
Print preview from the right click menu also shows the chart witht eh small red cross in the uppre left corner.
This problem has occurred in the last several builds including the latest 3.5.3105.20150.
Posted: Fri Jul 04, 2008 9:04 am
by Marc
Hello,
I don't see any clues in the result source of your webpage as to why the image doesn't appear. Does this problem occur with all projects including TeeChart examples and/or a new, absolutely standard Chart on a Webform project? Do you have a moment to try a new project of one Chart on webform?
I can't think that it may be a cause but it might be worth changing the Chart retrieval technique to see if any aspect of that is causing a problem (eg. TempChart property from 'Session' to 'httpHandler').
If the problem appears in a new project too, have you tried viewing the Charts on different clients to see whether all are affected? Have you tried a browser other than ie7?
regards,
Marc
Posted: Mon Sep 15, 2008 7:46 pm
by 13048857
Hello,
I'm having the same problem but with a curious note; If I try to print in FF 2.* then I can print very well. probably because FF is using the cache image and IE is trying to retrieve the image again from the server.
In using the mode TempChart="Httphandler", and that might be another cause, may be the image is destroyed after it has been served and when IE goes back to retrieve to print it, then it is not found and then broken link image red cross comes in place.
Any advice?
Thank you.
Posted: Mon Sep 15, 2008 10:06 pm
by 13047134
Appologies to all that are interested in this one for not posting the resolution here sooner.
in my page load event I was setting TempChart which, when I think about it a bit more was actually a bit dumb. Once I removed that the problem was gone and charts print correctly.
Posted: Mon Sep 15, 2008 11:19 pm
by 13048857
I don't understand the solution, which value did you set for temchart?
Thanks.