Page 1 of 1
Draw Line on a Webchart
Posted: Mon Apr 16, 2007 10:40 pm
by 9641422
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
How to draw a line on webchart?
Posted: Tue Apr 17, 2007 2:41 pm
by 9091423
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.
Posted: Tue Apr 17, 2007 3:24 pm
by narcis
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.
Posted: Wed Apr 18, 2007 10:51 am
by narcis
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);
}
}
}
Drawing line on webchart and dragging it
Posted: Thu Apr 19, 2007 7:39 pm
by 9091423
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
Posted: Fri Apr 20, 2007 10:21 am
by narcis
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.
Posted: Tue Apr 24, 2007 7:44 pm
by 9641422
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
Posted: Tue Apr 24, 2007 9:35 pm
by 9641422
narcis wrote: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
Posted: Wed Apr 25, 2007 10:51 am
by narcis
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.