Draw Line on a Webchart

[Amol]

Hi,

There is a requirement where the user has to draw a line on an webchart by clicking certain points on the webchart. I was wondering if this is even possible. Can a user draw lines on a webchart by selecting two points?

Thanks.

Amol

[Amol Chopra]

One of the requirements for me is to be able to draw a line on the webchart at run time. Thus, the user wants to be able to pick few points by clicking on the webchart and he wants to see a line connecting the two user clicks. Can we do this on a webchart?

Second thing, can we have something like a drag point tool on a webchart? The requirement is to be able to drag a line from two points and fix it to another location.

Please suggest.

[Narcís]

Hi Amol,

One of the requirements for me is to be able to draw a line on the webchart at run time. Thus, the user wants to be able to pick few points by clicking on the webchart and he wants to see a line connecting the two user clicks. Can we do this on a webchart?

Yes, this is possible 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();
		WebChart1.AutoPostback = true;

		if (Session["ch1"] == null)
		{
			//setup Chart

			ch1.Aspect.View3D = false;

			if (ch1.Series.Count == 0)
			{
				ch1.Series.Add(new Steema.TeeChart.Styles.Points());
			}

			ch1[0].FillSampleValues();

			//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);		
		}

	}
	protected void WebChart1_ClickBackground(object sender, ImageClickEventArgs e)
	{
		if ((Session["x0"] == null) || (Session["y0"] == null))
		{
			Session.Add("x0", e.X);
			Session.Add("y0", e.Y);
		}
		else
		{
			Session.Add("x1", e.X);
			Session.Add("y1", e.Y);
		}
	}

	protected void WebChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
	{
		if ((Session["x1"] != null) && (Session["y1"] != null))
		{
			g.Line((int)Session["x0"], (int)Session["y0"], (int)Session["x1"], (int)Session["y1"]);
			RemoveCoords();
		}
	}

	private void RemoveCoords()
	{
		Session.Remove("x0");
		Session.Remove("y0");
		Session.Remove("x1");
		Session.Remove("y1");
	}

An alternative is using Javascript and a floating DIV to draw the lines.

Second thing, can we have something like a drag point tool on a webchart? The requirement is to be able to drag a line from two points and fix it to another location.

I'll try to arrange an example for this when I have some time available.

[Narcís]

Hi Amol,

Here's the example dragging series points. The difference with previous example is that it doesn't need AfterDraw event and only ClickBackground event needs to be changed. In that case, when the user clicks a point it will be selected and left in the position where the chart is clicked for second time.

Code: Select all

	protected void WebChart1_ClickBackground(object sender, ImageClickEventArgs e)
	{
		MemoryStream tmpChart = new MemoryStream();
		Steema.TeeChart.Chart ch1 = WebChart1.Chart;		
		int index = ch1[0].Clicked(e.X, e.Y);

		if ((index != -1) && (Session["index0"] == null))
		{
			Session.Add("index0", index);
		}
		else
		{
			if ((Session["index0"] != null))
			{
				ch1[0].XValues[(int)Session["index0"]] = ch1.Axes.Bottom.CalcPosPoint(e.X);
				ch1[0].YValues[(int)Session["index0"]] = ch1.Axes.Left.CalcPosPoint(e.Y);
				Session.Remove("index0");

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

[Amol Chopra]

Narcis,

Thanks. I have been able to draw a continuous line on the webchart using the example that you gave. I store the clicked positions in an arrays and then draw a line using these arrays of X and Y co-ordinates. However, I still haven't been able to use the drag series thing. I still wanted something where I can drag the points just as we can do with the dragpoint tool in desktop applications. You see, my requirement is: The user can click a number of points on a chart or on a series (not just two points) and then based on the points he clicked, I have to do certain computation and draw a continuous line possibly passing through all or at least some of the points that the user has selected. Now, the points that user had earlier selected play the role of anchor points. The user may not like the way this new line was produced. In this case, the user shall change the position of the anchor points (his previous input) and give new locations (or set of X, Y co-ordinates) to the application. Now, based on this new input or position of the anchor points, the application will perform the same computation and shall draw this new line.

The limitation with the solution, you gave me, was, it deals only with two points. Do we have a better solution which is close to dragpoint tool capability?

Cheers!

Amol

[Narcís]

Hi Amol,

I don't understand very well how this dragging feature you request should work. Could you please give us some more information about that?

However, I'm afraid it may not be possible to achieve what you exactly request because a WebChart is not a live object, it is a server-side generated chart which is rendered at the client as an image.

[Amol]

Hey Narcis,

Thanks for the prompt epl. I think I understand your point that this could not be used for live drag purpose as per my requirement as everything is posting back to the server.

Thanks for the help though!

Cheers!

Amol

[Amol]

Hi Amol,

Code: Select all

	protected void WebChart1_ClickBackground(object sender, ImageClickEventArgs e)
	{
		MemoryStream tmpChart = new MemoryStream();
		Steema.TeeChart.Chart ch1 = WebChart1.Chart;		
		int index = ch1[0].Clicked(e.X, e.Y);

		if ((index != -1) && (Session["index0"] == null))
		{
			Session.Add("index0", index);
		}
		else
		{
			if ((Session["index0"] != null))
			{
				ch1[0].XValues[(int)Session["index0"]] = ch1.Axes.Bottom.CalcPosPoint(e.X);
				ch1[0].YValues[(int)Session["index0"]] = ch1.Axes.Left.CalcPosPoint(e.Y);
				Session.Remove("index0");

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

Here index always has a value -1. Neither the "if" condition is getting satusfied, nor is the "else" condition ever satisfied. Can you please help?

Cheers!

Amol

[Narcís]

Hi Amol,

This works fine for me here using latest TeeChart for .NET v2 maintenance release, available at the client download area. Full example code can be seen below. Which TeeChart version are you using? Can you try if my example works fine at your end?

Code: Select all

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

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

			if (ch1.Series.Count == 0)
			{
				ch1.Series.Add(new Steema.TeeChart.Styles.Points());
			}

			ch1[0].FillSampleValues();

			//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);
		}

	}

	protected void WebChart1_ClickBackground(object sender, ImageClickEventArgs e)
	{
		MemoryStream tmpChart = new MemoryStream();
		Steema.TeeChart.Chart ch1 = WebChart1.Chart;		
		int index = ch1[0].Clicked(e.X, e.Y);

		if ((index != -1) && (Session["index0"] == null))
		{
			Session.Add("index0", index);
		}
		else
		{
			if ((Session["index0"] != null))
			{
				ch1[0].XValues[(int)Session["index0"]] = ch1.Axes.Bottom.CalcPosPoint(e.X);
				ch1[0].YValues[(int)Session["index0"]] = ch1.Axes.Left.CalcPosPoint(e.Y);
				Session.Remove("index0");

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

Thanks in advance.