Zoom in on a WebChart using ZoomPercent

MeirS · Post by **MeirS** » Mon Jun 04, 2007 1:29 pm

Hi,
I need to supply zoom functionality on my WebChart.
I used you sample code to add a zoom tool that would let me select a rectangle on the chart and zoom on it, which worked fine.
But I also need to zoom in/zoom out on the chart using

WebChart1.Chart.Zoom.ZoomPercent(percent);

I used your sample code from WebAppZoomChart.aspx
and added to it a textbox where I give the percent for the zoom
here is the code that should do the zoom:

protected void TextBoxZoomPercent_TextChanged(object sender, EventArgs e)
{
if (CheckBoxZoom.Checked)
{
if (TextBoxZoomPercent.Text.Length > 0)
{
int percent = Convert.ToInt32(TextBoxZoomPercent.Text);
WebChart1.Chart.Axes.Left.Automatic = true;
WebChart1.Chart.Axes.Right.Automatic = true;
WebChart1.Chart.Axes.Bottom.Automatic = true;
WebChart1.Chart.Zoom.ZoomPercent(percent);

MemoryStream msChart = new MemoryStream();
WebChart1.Chart.Export.Template.Save(msChart);
Session["ch1"] = msChart;
}
}
}
When entering a value in the textbox all series in the chart get erased and I get an empty chart.
What am I doing wrong?

Thanks

Narcís · Post by **Narcís** » Mon Jun 04, 2007 2:34 pm

MeirS,

This is because when making the ZoomPercent call the chart has no valid coordinates for the zoom to be calculated. To enforce that you can make a Bitmap call as in the working example below.

Code: Select all

	protected void Page_Load(object sender, EventArgs e)
	{
		Steema.TeeChart.Chart ch1 = WebChart1.Chart;

		if (Session["ch1"] == null)
		{
			//setup Chart
			ch1.Aspect.View3D = false;

			Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line(ch1);
			line1.FillSampleValues(100);

			ExportChart(ch1);
		}
		else
		{
			MemoryStream tmpChart = new MemoryStream();

			//retrieve the session stored Chart
			tmpChart = (MemoryStream)Session["ch1"];
			//set the Stream position to 0 as the last read/write
			//will have moved the position to the end of the stream
			tmpChart.Position = 0;
			//import saved Chart
			ch1.Import.Template.Load(tmpChart);
		}
	}

	private void ExportChart(Steema.TeeChart.Chart ch1)
	{
		MemoryStream tmpChart = new MemoryStream();

		//export Chart to a MemoryStream template
		ch1.Export.Template.Save(tmpChart);
		//save template to a Session variable
		Session.Add("ch1", tmpChart);
	}

	protected void TextBox1_TextChanged(object sender, EventArgs e)
	{
		if (CheckBox1.Checked)
		{
			if (TextBox1.Text.Length > 0)
			{
				Steema.TeeChart.Chart ch1 = WebChart1.Chart;	

				int percent = Convert.ToInt32(TextBox1.Text);
				ch1.Axes.Left.Automatic = true;
				ch1.Axes.Right.Automatic = true;
				ch1.Axes.Bottom.Automatic = true;

				System.Drawing.Bitmap bmp = ch1.Bitmap((int)WebChart1.Width.Value, (int)WebChart1.Height.Value);
				WebChart1.Chart.Zoom.ZoomPercent(percent);

				ExportChart(WebChart1.Chart);
			}
		} 
	}

MeirS · Post by **MeirS** » Thu Jun 07, 2007 3:18 pm

Thank you Narcís,

Now I need more help with the zoom.
When I use the zoom tool to select a rectangle on the chart that does not contain any part of the graph
(zoom in on an empty space on the chart)
I get an empty chart.
What I want is that zooming on an empty part of the chart would be ignored and I will stay with the same graph I had before
(No zooming will take place)
Here is my sample code, which is based on your example.

protected void Page_Load(object sender, System.EventArgs e)
{
Steema.TeeChart.Chart ch1 = WebChart1.Chart;

if (Session["ch1"] == null)
{
//setup Chart
ch1.Aspect.View3D = false;

Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line(ch1);
line1.FillSampleValues(100);
line1.Color = Color.Blue;

ExportChart(ch1);
}
else
{
MemoryStream tmpChart = new MemoryStream();

//retrieve the session stored Chart
tmpChart = (MemoryStream)Session["ch1"];
//set the Stream position to 0 as the last read/write
//will have moved the position to the end of the stream
tmpChart.Position = 0;
//import saved Chart
ch1.Import.Template.Load(tmpChart);

//check whether zoom request is being sent
CheckZoom(WebChart1);

}
}

private void ExportChart(Steema.TeeChart.Chart ch1)
{
MemoryStream tmpChart = new MemoryStream();

//export Chart to a MemoryStream template
ch1.Export.Template.Save(tmpChart);
//save template to a Session variable
Session.Add("ch1", tmpChart);
}

private void CheckZoom(WebChart wChart)
{
ArrayList zoomedState = (ArrayList)Session[wChart.ID + "Zoomed"];
zoomedState = ((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request,
zoomedState);
if (zoomedState == null)
Session.Remove(wChart.ID + "Zoomed");
else
Session.Add(wChart.ID + "Zoomed", zoomedState);
ExportChart(wChart.Chart);

}
protected void ButtonZoomIn_Click(object sender, EventArgs e)
{
System.Drawing.Bitmap bmp = WebChart1.Chart.Bitmap((int)WebChart1.Width.Value, (int)WebChart1.Height.Value);
WebChart1.Chart.Zoom.ZoomPercent(110);

ExportChart(WebChart1.Chart);
}

protected void ButtonZoomOut_Click(object sender, EventArgs e)
{
System.Drawing.Bitmap bmp = WebChart1.Chart.Bitmap((int)WebChart1.Width.Value, (int)WebChart1.Height.Value);
WebChart1.Chart.Zoom.ZoomPercent(87);

ExportChart(WebChart1.Chart);

}

Narcís · Post by **Narcís** » Fri Jun 08, 2007 9:14 am

Hi MeirS,

One way to achieve what you request is doing something like this:

Code: Select all

	protected void Page_Load(object sender, EventArgs e)
	{
		Steema.TeeChart.Chart ch1 = WebChart1.Chart;
		MemoryStream tmpChart = new MemoryStream();

		if (Session["ch1"] == null)
		{
			//setup Chart
			ch1.Aspect.View3D = false;

			if (ch1.Series.Count < 1)
				ch1.Series.Add(new Steema.TeeChart.Styles.Points());

			ch1.Series[0].FillSampleValues(36);
			//export Chart to a MemoryStream template
			ch1.Export.Template.Save(tmpChart);
			//save template to a Session variable
			Session.Add("ch1", tmpChart);
		}
		else
		{
			//retrieve the session stored Chart
			tmpChart = (MemoryStream)Session["ch1"];
			//set the Stream position to 0 as the last read/write
			//will have moved the position to the end of the stream
			tmpChart.Position = 0;
			//import saved Chart
			WebChart1.Chart.Import.Template.Load(tmpChart);

			//check whether zoom request is being sent
			CheckZoom(WebChart1);

			Bitmap bmp = WebChart1.Chart.Bitmap((int)WebChart1.Width.Value, (int)WebChart1.Height.Value);
			bool noPoints = true;

			for (int x = WebChart1.Chart.Axes.Bottom.IStartPos; x <= WebChart1.Chart.Axes.Bottom.IEndPos; x++)
			{
				for (int y = WebChart1.Chart.Axes.Left.IStartPos; y <= WebChart1.Chart.Axes.Left.IEndPos; y++)
				{
					foreach (Steema.TeeChart.Styles.Series s in WebChart1.Chart.Series)
					{
						if (s.Clicked(x, y) != -1)
						{
							noPoints = false;
							break;
						}
					}

					if (!noPoints) break;
				}
				if (!noPoints) break;
			}

			if (noPoints)
			{
				WebChart1.Chart.Axes.Left.Automatic = true;
				WebChart1.Chart.Axes.Bottom.Automatic = true;
			}

		}
	}

	private void CheckZoom(Steema.TeeChart.Web.WebChart wChart)
	{
		ArrayList zoomedState = (ArrayList)Session[wChart.ID + "Zoomed"];
		zoomedState = ((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request,
			zoomedState);
		if (zoomedState == null)
			Session.Remove(wChart.ID + "Zoomed");
		else
			Session.Add(wChart.ID + "Zoomed", zoomedState);
	}

Bilgehan · Post by **Bilgehan** » Thu Jun 28, 2007 9:38 am

Hi Narcis,

I am trying zooming and applied your code but I have encountered a problem.When you try to zoome/unzoome in proper areas in chart there is no problem but once when you try to zoome on the chart that does not
contain any part of the graph there is no change in the graph
(that is wanted. ) then if you try to select an area in the chart and zoome it again there is no action unless you do unzoome anywhere in the chart.

Could you please help me this issue ?

Narcís · Post by **Narcís** » Thu Jun 28, 2007 1:21 pm

Hi Bilgehan,

Yes, that's what was intended in the last example I posted for MeirS. Please try zooming your chart as shown in the zoom example at the ASP.NET demo included with TeeChart's installation.

Thanks in advance.

MeirS · Post by **MeirS** » Thu Jul 26, 2007 3:31 pm

Hi Narcis,
I installed TeeChart version 3 and the code for zoom in stopped working.
On the code line
System.Drawing.Bitmap bmp = webChart.Chart.Bitmap((int)webChart.Width.Value, (int)webChart.Height.Value);
I get the following exception:
System.ArgumentException: Parameter is not valid

This was the solution you gave me for zooming in using zoomPercent for TeeChart version 2, where it worked fine.

Please advice

Narcís · Post by **Narcís** » Mon Jul 30, 2007 11:25 am

Hi MeirS,

Have you tried making this call without arguments?

Code: Select all

System.Drawing.Bitmap bmp = webChart.Chart.Bitmap();

Also please notice that a new version was posted last week. Could you please check if it works fine at your end?

Thanks in advance.

MeirS · Post by **MeirS** » Mon Jul 30, 2007 2:40 pm

Hi Narcís,

I installed the new version, and I tried making the call both with and without arguments:
System.Drawing.Bitmap bmp = webChart.Chart.Bitmap();

System.Drawing.Bitmap bmp = webChart.Chart.Bitmap((int)webChart.Width.Value, (int)webChart.Height.Value);

either way gives the exception:
System.ArgumentException: Parameter is not valid

Please advise

Narcís · Post by **Narcís** » Mon Jul 30, 2007 2:54 pm

Hi MeirS,

This works fine for me here.

Code: Select all

				System.Drawing.Bitmap bmp = ch1.Bitmap((int)WebChart1.Width.Value, (int)WebChart1.Height.Value);

If the problem persists, could you please send us a simple example project we can run "as-is" to reproduce the problem here?

You can post your files at news://www.steema.net/steema.public.attachments newsgroup or at our upload page.

Thanks in advance.

MeirS · Post by **MeirS** » Tue Jul 31, 2007 9:42 am

Hi Narcis

I cannot post my files at news://www.steema.net/steema.public.attachments
and upload page does not work for me either.
I attach here a full cs file of a working example that demonstrates the crash.
If this is not sufficient, please supply me with an e-mail address so that I'll send you the working example via e-mail

Thank you

Code: Select all

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Text;

using Steema.TeeChart.Web;
using Steema.TeeChart.Styles;


namespace WebChartWaveform
{
    /// <summary>
    /// Summary description for WebForm1.
    /// </summary>
    public partial class WebAppZoomChart1 : System.Web.UI.Page
    {
        protected Steema.TeeChart.Tools.ZoomTool zoomTool1;
        protected Steema.TeeChart.Styles.Points points1;
        protected Steema.TeeChart.Styles.Points points2;
        protected Steema.TeeChart.Tools.ZoomTool zoomTool2;

        protected void Page_Load(object sender, System.EventArgs e)
        {
          Steema.TeeChart.Chart ch1 = WebChart1.Chart; 

          if (Session["ch1"] == null) 
          { 
             //setup Chart 
             ch1.Aspect.View3D = false; 

             Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line(ch1); 
             line1.FillSampleValues(100);
             line1.Color = Color.Blue;

             ExportChart(ch1); 
          } 
          else 
          { 
             MemoryStream tmpChart = new MemoryStream(); 

             //retrieve the session stored Chart 
             tmpChart = (MemoryStream)Session["ch1"]; 
             //set the Stream position to 0 as the last read/write 
             //will have moved the position to the end of the stream 
             tmpChart.Position = 0; 
             //import saved Chart 
             ch1.Import.Template.Load(tmpChart);

            //check whether zoom request is being sent
             CheckZoom(WebChart1);

          } 
        } 

   private void ExportChart(Steema.TeeChart.Chart ch1) 
   { 
      MemoryStream tmpChart = new MemoryStream(); 

      //export Chart to a MemoryStream template 
      ch1.Export.Template.Save(tmpChart); 
      //save template to a Session variable 
      Session.Add("ch1", tmpChart); 
   } 

        private void CheckZoom(WebChart wChart)
        {
            ArrayList zoomedState = (ArrayList)Session[wChart.ID + "Zoomed"];
            zoomedState = ((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request,
                zoomedState);
            if (zoomedState == null)
                Session.Remove(wChart.ID + "Zoomed");
            else
                Session.Add(wChart.ID + "Zoomed", zoomedState);
            ExportChart(wChart.Chart);

        }

        #region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);

            //			//Associate the Chart's Hotspot event with function
            //			((Steema.TeeChart.Tools.SeriesHotspot)(WebChart1.Chart.Tools[0])).GetHTMLMap += 
            //				new Steema.TeeChart.Tools.SeriesHotspotEventHandler(hotspot1_GetHTMLMap);
            //
            //			Steema.TeeChart.Tools.SeriesHotspot h1=((Steema.TeeChart.Tools.SeriesHotspot)(WebChart1.Chart.Tools[0]));
            //			h1.MapElements="onClick=\"alert('x: ' + event.x + ' y: ' + event.y);\"";

            this.zoomTool1 = new Steema.TeeChart.Tools.ZoomTool(WebChart1.Chart);
            this.points1 = new Steema.TeeChart.Styles.Points(WebChart1.Chart);
            this.points2 = new Steema.TeeChart.Styles.Points(WebChart1.Chart);
            this.zoomTool2 = new Steema.TeeChart.Tools.ZoomTool(WebChart1.Chart);
        }

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {

        }
        #endregion

         protected void ButtonZoomIn_Click(object sender, EventArgs e)
        {
            System.Drawing.Bitmap bmp = WebChart1.Chart.Bitmap((int)WebChart1.Width.Value, (int)WebChart1.Height.Value);
            WebChart1.Chart.Zoom.ZoomPercent(110);

            ExportChart(WebChart1.Chart);
        }


        protected void ButtonZoomOut_Click(object sender, EventArgs e)
        {
            System.Drawing.Bitmap bmp = WebChart1.Chart.Bitmap((int)WebChart1.Width.Value, (int)WebChart1.Height.Value);
            WebChart1.Chart.Zoom.ZoomPercent(87);

            ExportChart(WebChart1.Chart);

        }
}
}

[/code]