Cross Hair Cursor in C1Chart

What exactly is a Cross-Hair Cursor?

A Cross-hair cursor is simply displaying a horizontal and a vertical line in the form of a cross such that its intersection point defines the position of the cursor and the value below it.

Need for a Cross-Hair Cursor in Charts

Rendering a cross-hair cursor on a Chart is one of the basic functionalities that could be required when displaying huge amount of data on the Chart, which can include a wide range of values. With this huge data the values plotted on the chart cannot be judged accurately. However, drawing the cross-hair cursor can point out the exact location i.e. the X and Y values of the plotted data. CrossHair

Integrating Cross-Hair in C1Chart

In C1Chart we are provided with two Groups. Plotting a Chart only using the Group 0 leaves Group 1 untouched. However, this Group 1 can be used in some other useful way like displaying a dynamic line chart which moves along with the mouse pointer and is rendered in such a way that it depicts the Cross-Hair cursor. There are two basic things that need to be considered to accomplish this functionality.

Plot the Group 0 Data for which the Cross-Hair will be implemented

Plotting the Chart for Group 0 will include adding series to the Chart, plotting the X and Y values.


//Add Series  
c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();  
c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();  
c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();  
c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();  
c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();  

//Populate X Values  
c1Chart1.ChartGroups[1].ChartData.SeriesList[0].AutoEnumerate = true;  
c1Chart1.ChartGroups[1].ChartData.SeriesList[1].AutoEnumerate = true;  
c1Chart1.ChartGroups[1].ChartData.SeriesList[2].AutoEnumerate = true;  
c1Chart1.ChartGroups[1].ChartData.SeriesList[3].AutoEnumerate = true;  
c1Chart1.ChartGroups[1].ChartData.SeriesList[4].AutoEnumerate = true;  

//Populate Y Values  
c1Chart1.ChartGroups[1].ChartData.SeriesList[0].Y.CopyDataIn(new double[] { 12, 19, 15, 31, 44, 17 });  
c1Chart1.ChartGroups[1].ChartData.SeriesList[1].Y.CopyDataIn(new double[] { 22, 14, 27, 35, 51, 22 });  
c1Chart1.ChartGroups[1].ChartData.SeriesList[2].Y.CopyDataIn(new double[] { 16, 17, 22, 33, 20, 33 });  
c1Chart1.ChartGroups[1].ChartData.SeriesList[3].Y.CopyDataIn(new double[] { 21, 12, 13, 16, 17, 51 });  
c1Chart1.ChartGroups[1].ChartData.SeriesList[4].Y.CopyDataIn(new double[] { 11, 41, 25, 13, 24, 11 });  

Plot a Dynamic Line Chart in Group 1 which will display the Cross-Hair

The MouseMove event of C1Chart can be used to plot the dynamic Line Chart in Group 1. The chart data Group 1 will be cleared and re-populated when the mouse moves. This data will be in sync with the mouse pointer value.


void c1Chart1_MouseMove(object sender, MouseEventArgs e)  
{  
x = e.X;  
y = e.Y;  
float X = 0f, Y = 0f;  

//Add series  
c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();  
c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();  
c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();  

//Populate the series with X and Y Values  
c1Chart1.ChartGroups[0].CoordToDataCoord(x, y, ref X, ref Y);  
double[] xSerHorz = new double[3] { (double)c1Chart1.ChartArea.AxisX.Min, (double)X, (double)c1Chart1.ChartArea.AxisX.Max };  
double[] ySerHorz = new double[3] { (double)Y, (double)Y, (double)Y };  
double[] xSerVert = new double[3] { (double)X, (double)X, (double)X };  
double[] ySerVert = new double[3] { (double)c1Chart1.ChartArea.AxisY.Min, (double)Y, (double)c1Chart1.ChartArea.AxisY.Max };  
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].X.CopyDataIn(xSerHorz);  
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].Y.CopyDataIn(ySerHorz);  
c1Chart1.ChartGroups[0].ChartData.SeriesList[1].X.CopyDataIn(xSerVert);  
c1Chart1.ChartGroups[0].ChartData.SeriesList[1].Y.CopyDataIn(ySerVert);  

//Style the Series  
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.Shape = C1.Win.C1Chart.SymbolShapeEnum.DiagCross;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.Color = Color.Orange;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.OutlineColor = Color.Orange;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.Size = 3;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Color = Color.Red;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Thickness = 2;  

c1Chart1.ChartGroups[0].ChartData.SeriesList[1].SymbolStyle.Shape = C1.Win.C1Chart.SymbolShapeEnum.DiagCross;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[1].SymbolStyle.Color = Color.Orange;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[1].SymbolStyle.OutlineColor = Color.Orange;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[1].SymbolStyle.Size = 3;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[1].LineStyle.Color = Color.Red;  
c1Chart1.ChartGroups[0].ChartData.SeriesList[1].LineStyle.Thickness = 2;  

c1Chart1.ToolTip.Enabled = true;  
c1Chart1.Visible = true;  

//Attach a Chart Label with the Coordinate to display the value of the point under the cross-hair cursor  
c1Chart1.ChartLabels.LabelsCollection.AddNewLabel();  
c1Chart1.ChartLabels.LabelsCollection[0].AttachMethod = C1.Win.C1Chart.AttachMethodEnum.Coordinate;  
c1Chart1.ChartLabels.LabelsCollection[0].AttachMethodData.X = x;  
c1Chart1.ChartLabels.LabelsCollection[0].AttachMethodData.Y = y - 8;  
c1Chart1.ChartLabels.LabelsCollection[0].Text = "X= " + X.ToString() + ", Y= " + Y.ToString();  
c1Chart1.ChartLabels.LabelsCollection[0].Visible = true;  
c1Chart1.ChartLabels.DefaultLabelStyle.BackColor = Color.Red;  

}  

So, you are done with displaying a Cross-Hair cursor on C1Chart Read more about Chart for WinForms here. DownloadCS DownloadVB

GrapeCity

GrapeCity Developer Tools
comments powered by Disqus