Crosshairs in RadChart

[Pablo]

Hello,

In one of our projects we have the need of adding crosshairs (vertical line + horizontal line that marks the location of a point, displaying the X coordinate and Y coordinate) to a radchart. I've seen that this functionality is not available by now. However, I found some examples in the Internet about how to make this possible in Silverlight using the toolkit controls (see http://www.scottlogic.co.uk/blog/colin/2009/02/adding-a-location-crosshair-to-silverlight-charts/) by modifying the control template.

My question is if there is any way to add this functionality by editing the radchart template or similar... any examples would be highly appreciated as this is the first project that we carry on WPF and Telerik Controls :-).

Hope you can help us !!!

[Pablo]

Hi,

any help on this?

Thanks.

[Vladimir Milev]

Hi Pablo,

You can consider using a vertical and horizontal gridlines.

Best wishes,
Vladimir Milev
the Telerik team

[Pablo]

Hi Vladimir,

thanks for your response. I had already seen this example, and I have a few questions:

- Could the line be vertical instead of horizontal?
- If that is the case, how to obtain the YValue of the line series point that crosses the vertical line?
- Is it possible to move the vertical line using the mouse, as if it were a vertical cursor?

As you can imagine, our customer is demanding a vertical line that enables him to position at any point of interest and register the X-Y values (by pushing any button or similar). The demande behaviour is very similar to that you can see in "oscilloscope charts" in labview, where a vertical line can be moved through the chart to register any desired values.

Any example/help is greatly appreciated.

Regards,

Pablo.

[Pablo]

Hi Vladimir,

I guess I've asked myself the questions above...

- Custom grid lines support vertical lines
- Mouse movement does not seem to be possible, though moving the line with up/down controls is enough for us
- The YValue should be retrieved directly from the list represented by the chart as the X-Value of the line is known

Let me know if I miss something or there are further options.

Regards,

Pablo.

[Pablo]

Hi Vladimir, 

could you please confirm/complete the points of my last post?

Thanks,

Pablo.

[Giuseppe]

Hello Pablo,

We have attached a runnable sample application that demonstrates how you can achieve the functionality described in the link from your first post with RadChart and custom gridlines.

Generally all you need to do is perform the conversion from physical pixels to data units via the respective Axis.ConvertPhysicalUnitsToData(...) methods (called on MouseMove). Note that if you need the same functionality on mouse click, you do not need to perform the conversion manually, as RadChart provides already converted values through the event arguments for the ChartArea.PlotAreaMouseLeftButtonDown / ChartArea.PlotAreaMouseLeftButtonUp events.

Let us know if you have further questions.


All the best,
Giuseppe
the Telerik team

[Pablo]

Hi Giuseppe, 

Thank you very much for the sample. It's great and adds great functionity for data analysis!

I didn't now about the ViewModelBase class. I guess this is the abstract class that Telerik provides to create custom viewmodel classes for data binding, isn't it? Right now we are using our own class for this. Could you please ellaborate a bit about it? I have searched the documentation but there is very little explanation on it. 

We'll try to aply this to our project and get back to you with additional questions. 

Best regards, 

Pablo.

[Giuseppe]

Hello Pablo,

ViewModelBase is an abstract class part of the Telerik.Windows.Controls assembly. It is simply an INotifyPropertyChanged implementation that we are using for convenience purposes in some of our examples and support samples.

 

All the best,
Giuseppe
the Telerik team

[Pablo]

Hi Giuseppe,

thanks for your reply. 

We'll be applying the provided sample to our app very soon. We'll get back to you with our feedback.

Regards,

Pablo.

[Imran Javed Zia]

Hi Giuseppe,
It is a nice demo in Silverlight, hope it may also work for WPF.
I have tryed the demonstrated code with Rad Chart in WPF with 2 Line series with double vlaue in Y axis and Date in X axis and it is not working properly. It is only showing a vertical line which very away from mouse pointer. Please refer to attached image for more details.

Can you help in this regards?


Thanks

[Evgenia]

Hello Imran,

   You may find a sample WPF project attached where the same scenario works as expected on our side. Could you please try to reproduce the unwanted behavior you are facing in it or send us your own stripped down runnable project? This way we will be able to inspect it locally and get back to you with our findings/suggestions based on the code.

Regards,
Evgenia
the Telerik team

[Imran Javed Zia]

Hi Evgenia,

Thanks for sample and it is working fine too, but we have to use it Dates and Numeric values, so how can I show related date value if i have double values in Y axis and dates in X axis.

Thanks

[Evgenia]

Hi Imran,

The XIntercept property of the Custom Lines expects a double that represents the position of the custom line (as an index) relative to the series datapoints. That is if you have a Line with 10 datapoints and you set XIntercept to 7 - the custom line will be placed where the 7th datapoint is.
One way to achieve your goal is to use a logic (marked in yellow in the code below) that determines where (at which index) you want to place your custom line.
This can be done as follows:

private void PlotArea_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            var plotAreaPanel = sender as ClipPanel;
            var position = e.GetPosition(plotAreaPanel);

            var x = RadChart1.DefaultView.ChartArea.AxisX.ConvertPhysicalUnitsToData(position.X);
            var y = RadChart1.DefaultView.ChartArea.AxisY.ConvertPhysicalUnitsToData(position.Y);

            (this.DataContext as ViewModel).X = x;
            (this.DataContext as ViewModel).Y = y;
            DataSeries series = (DataSeries)(this.RadChart1.DefaultView.ChartArea.Items[0]);
            var dataPoint = series.Where(myX => myX == series[(int)x]).SingleOrDefault();
            (this.DataContext as ViewModel).XCat = DateTime.Parse(dataPoint.XCategory);
        }

You may find a sample project where the approach is demonstrated.

I hope this helps.

All the best, Evgenia
the Telerik team

[Imran Javed Zia]

Hi Evgenia ,

Thanks alot for you purposal, We were just eperimenting and find that we can convert double value to date using FromOADate method of DateTime class as following.

get
{
DateTime.FromOADate(this.x);
}

and it is working fine too.We may change the logic as your purposed system later.

Thanks