Client side mouseovers for data

[Brian Begy]

Here’s what I need to do.
Build a line graph.
Save it as an image.
Stream the image to the client. ( I need to do this because we are using Sharpoint)
Use javascript mouseovers to show information on the data points.
The javascript mouseovers are easy if I know the pixel coordinates of the data points. How do I get these coordinates?
1) How do I get, in pixels, the start position of the bottom axis relative to the left edge of the chart? There doesn’t seem to be any way go get this.
2) How do I get the closest data point to a given set of xy coordinates WITHOUT A POSTBACK?
3) I already tried using calcXPosValue but no matter the value I ask for, it either returns zero (before saving the chart as a bitmap) or 290 (after saving the chart as a bitmap).

I cannot be the first guy to try doing things with the chart on the client side, can I?

[Marc]

Hello,

Here's a possible technique. If we use the example in the WebChart demo project 'Interacting with Charts:Chart as Image' then this type of code could be appended before the Chart is streamed:

Code: Select all

MemoryStream tempStream = new MemoryStream();
chart.Export.Image.PNG.Save(tempStream);

// ** this code added ********
//using an ArrayList to build up the information required
ArrayList aList = new ArrayList();

aList.Add("LeftAxisPos="+chart.Axes.Left.Position.ToString());
aList.Add("3rdPointIndexX=" + chart[0].CalcXPos(3).ToString());

// Write the information to a file. Your webpage should link to this
// file for constants or variable information.
// You could sophisticate this file to build jscript routines
// directly into it or simply build a list of arrays of the data you require
// and code on the Chart page.
// You need to have write rights to your folder of course.

FileStream fs = new FileStream(@"C:\Program Files\Steema Software\TeeChart for .NET v3\TeeChartForNET\_chart_temp\tmpVars.txt", FileMode.Create);
StreamWriter fileWriter = new StreamWriter(fs);
foreach (String s in aList)
{
  fileWriter.WriteLine(s);
}
fileWriter.Close();
fs.Close();
//*****************************

//output the Chart image
Response.ContentType="Image/PNG";
Response.OutputStream.Write(tempStream.ToArray(),0,(int)tempStream.Length);
tempStream.Close();

I hope that's of help. Please see Tutorial13 - "Custom Drawing on the Chart Panel" for a closer look at how to extract co-ordinate information for Chart elements. You can get pixel locations for all data points (including point boundaries), Axes and many other Chart elements.

Please note that the Chart is being quizzed after it has painted.

Regards,
Marc Meumann