Webchart printing

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
Adrian
Advanced
Posts: 116
Joined: Thu Jun 23, 2005 4:00 am

Webchart printing

Post by Adrian » Sun Jun 22, 2008 12:20 pm

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.
Adrian Heald
Captell Developments
www.captelldevelopments.com

Narcís
Site Admin
Site Admin
Posts: 14730
Joined: Mon Jun 09, 2003 4:00 am
Location: Banyoles, Catalonia
Contact:

Post by Narcís » Mon Jun 23, 2008 9:32 am

Hi Adrian,

It works fine for me doing as told here. Does it work fine at your end?

Thanks in advance.
Best Regards,
Narcís Calvet / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

Adrian
Advanced
Posts: 116
Joined: Thu Jun 23, 2005 4:00 am

Post by Adrian » Sun Jun 29, 2008 7:01 am

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?
Adrian Heald
Captell Developments
www.captelldevelopments.com

Adrian
Newbie
Newbie
Posts: 34
Joined: Thu Oct 25, 2007 12:00 am

Post by Adrian » Wed Jul 02, 2008 12:13 pm

Any update on this one?

Marc
Site Admin
Site Admin
Posts: 1272
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Post by Marc » Thu Jul 03, 2008 8:50 am

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
Steema Support

Adrian
Newbie
Newbie
Posts: 34
Joined: Thu Oct 25, 2007 12:00 am

Post by Adrian » Thu Jul 03, 2008 12:31 pm

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;">
	
            &nbsp;
             
</div>
            </td>
                <td align="left" valign="top" style="height: 376px; width:100%">
                    &nbsp; 
       
                    <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>
                    &nbsp;&nbsp;

                </td>
            </tr>
            <tr>
                <td align="left"  colspan="2" style="height: 90%" valign="top">
                    &nbsp;</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.

Marc
Site Admin
Site Admin
Posts: 1272
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Post by Marc » Fri Jul 04, 2008 9:04 am

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
Steema Support

THoMaSiN
Newbie
Newbie
Posts: 36
Joined: Mon Apr 14, 2008 12:00 am

Post by THoMaSiN » Mon Sep 15, 2008 7:46 pm

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.

Adrian
Newbie
Newbie
Posts: 34
Joined: Thu Oct 25, 2007 12:00 am

Post by Adrian » Mon Sep 15, 2008 10:06 pm

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.

THoMaSiN
Newbie
Newbie
Posts: 36
Joined: Mon Apr 14, 2008 12:00 am

Post by THoMaSiN » Mon Sep 15, 2008 11:19 pm

I don't understand the solution, which value did you set for temchart?

Thanks.

Post Reply