Zoom in Webparts

[pw]

Hi,

I managed to get the zoom function working on a webform. However, when I added it to a web user control and then assigned it to a webpartzone, the zoom function doesn't work correctly. It could still zoom, but the zoomed result is off the selected zoom area.

I'm not sure if it's related with the chartRect status, but it seemed that the chartRect is returning 0 for X, Y, Width & Height.

I tried forcing the webchart to draw first by adding the following code:

Code: Select all

    private void CheckZoom(WebChart wChart)
    {
        WebChart1.Chart.Bitmap();

However, the zoom still doesn't work correctly. Any ideas? Thanks.

Dave

[Marc]

Hello Dave,

This may be related to the x,y location as you've pointed out. I haven't checked it in a Sharepoint page yet but I suspect the cause is similar to a problem we're looking at for a Chart located in a table.

Default behaviour on a WebForm is via absolute positioning of objects, that returns the top left pixel locations correctly for a Chart, allowing the inchart offset from the mouseclick x y to be obtained (and hence the correct zoomrectangle). When a Chart is located in a table the positioning is relative and we're having some difficulties in tests to extract the correct top left co-ordinates for it. We're working on it and will get back with suggestions asap.

Regards,
Marc Meumann

[pw]

Thanks Marc for the update.

[Marc]

Hello Dave,

Here's a workaround that will hopefully resolve the issue. It has been tested on table located Charts but not within a WebUserControl/Webpart (we'll get to that check but it requires more setup time). We'll internalise this code in the next maintenance release if all tests checkout.

The following shows code that should be placed after the Chart (the sample includes the Chart and table for context):

Code: Select all

<table id="tb1">
	<tr id="tr1">
		<td id="tr1td1">row 1 col1</td>
		<td id="tr1td2">
			<P>row 1 col2</P>
			<P>test text</P>
			<P>to fatten out</P>
			<P>the table</P>
		</td>
	</tr>
	<tr id="tr2">
		<td id="tr2td1">row 2 col1</td>
		<td id="tr2td2">
			<form id="Form1" method="post" runat="server">
				&nbsp;
				<tchart:WebChart id="WebChart1" runat="server" style="Z-INDEX: 101" TempChart="Session" ClickedY="0"
					ClickedX="0" GetChartFile="GetChart.aspx" AutoPostback="False" Width="500px" Height="400px"
                                        Config="AAEAAAD.../cut detail/...AYL"></tchart:WebChart>
			</form>
		</td>
	</tr>
</table>

<script language="javascript">

	getLocation('WebChart1');
	
	function getLocation(obj)
	{
		var chObj=document.getElementById(obj);

		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; 
		}
		chObj.style.top=overallTop;
		chObj.style.left=overallLeft;
	}
</script>

The WebChart within the table is conventional but has no absolute positioning co-ordinates. The JScript function looks for parents (Table cell, table itself, etc ..) aggregating any element offset. You should use getLocation('NameOfChart'); with the name of the Chart, calling it for each Chart in the page. GetLocation in this example is called each time the page is loaded.

I hope that may be of help. Please let us know if any aspect of the proposed workaround doesn't take into account any key aspect of your setup.

Regards,
Marc

[pw]

Hi Marc,

I've added the script to my webchart page but it didn't seem to make any difference.

For my webpart, I first created the webchart interface on a web user control, and that was then assigned to a webpartzone in a web user form. I didn't add the script to the web user form where the webpartzone resides, because the webpartzone will call the web user control page, and not the webchart directly, so the GetLocation function would probably not work.

Anyway, here's my code for the web user control (ascx) page with the script included:

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DemandChart.ascx.cs" Inherits="DemandChart" %>
<%@ Register Assembly="TeeChart" Namespace="Steema.TeeChart.Web" TagPrefix="tchart" %>
<br />
<tchart:webchart id="WebChart1" runat="server" autopostback="False" config="AAEAAAD/////..."
    getchartfile="GetChart.aspx" tempchart="Session" Height="311px" Width="456px"></tchart:webchart>
<br />
<asp:Label ID="Label1" runat="server" Text="Start Date"></asp:Label>
&nbsp;
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:Label ID="Label2" runat="server" Text="End Date"></asp:Label>
&nbsp; &nbsp;<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="SqlDataSource1"
    DataTextField="REGION" DataValueField="REGION">
</asp:CheckBoxList><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:InfoServerConnectionString %>"
    SelectCommand="SELECT [REGION] FROM [REGIONS]"></asp:SqlDataSource>
&nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
<asp:Button ID="Button1" runat="server" Text="Submit" />

<script language="javascript"> 

   getLocation('WebChart1'); 
    
   function getLocation(obj) 
   { 
      var chObj=document.getElementById(obj); 

      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; 
      } 
      chObj.style.top=overallTop; 
      chObj.style.left=overallLeft; 
   } 
</script>

[Marc]

Hello Dave,

It's possible the code isn't being called. A simple (very temporary) way to check that would be to put an alert('here'); into the beginning of the getLocation function and see if it displays when the page loads.

If it's not being called then we'll need to find the suitable location for it to be called. If you could take a 'view source' copy of the generated code of the final page and pop it on the news://www.steema.net/steema.public.attachments newsgroup we might be able to help decide where the code should be placed.

Regards,
Marc

[pw]

Hi Marc,

I've checked, the javascript is being called from where it's currently located on the code (see my earlier posting). Still the same problem, unfortunately.

Thanks.

[pw]

Hi Marc,

I'm just wondering if the problem has been resolved yet? Thanks.

[Marc]

Hello pw,

We've got some way to it, but getting to reproduce your test setup is taking some time as there are several elements to construct, if you have a test project that you could leave for us on the attachments newsgroup it would help speed things up as we could drop it straight into the test machine that has been setup. In the meantime please try the debug build released yesterday as we internalised the absolute/realtive positioning to the TeeChart generated code. It may result that it resolves the problem you are encountering too.

Regards,
Marc

[pw]

I can't access newsgroup from my workplace. If you could give me an email address, I'll try to construct an example and send it to you. What I have currently will not work since it's querying data from my company's database.

Thanks.

[Narcís]

Hi pw,

Please send it to me and I'll forward it to Marc.

Thanks in advance.

[Marc]

Hello,

Thanks for sending that through, that made it quicker to do the checks. It works ok on the WebPart placed as a UserControl provided you use the latest version of TeeChart made available at the beginning of this week as the debug build (includes the relative positioning fix). Available on the Customer Download page.

A point to note, not directly related, is we've noticed that if width and height are not set in the WebChart usercontrol, a zoom problem will occur. That's a width, height at object level, not in the style tag.

eg.

Code: Select all

<tchart:WebChart ID="WebChart1" runat="server" AutoPostback="False" Config="AAEAAAD/// ..."
    GetChartFile="GetChart.aspx" TempChart="Session" Height="300px" Width="400px" />

VS.NET2005 is not automatically putting those dimensions in unless the Chart is drag-resized.

I hope that's of help!

Regards,
Marc

[pw]

Thank you very much, Marc.