Crosshairs in RadChart

15 posts, 0 answers
  1. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 01 Aug 2011 Link to this post

    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 !!!
  2. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 02 Aug 2011 Link to this post

    Hi,

    any help on this?

    Thanks.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 04 Aug 2011 Link to this post

    Hi Pablo,

    You can consider using a vertical and horizontal gridlines.

    Best wishes,
    Vladimir Milev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  5. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 04 Aug 2011 Link to this post

    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.
  6. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 04 Aug 2011 Link to this post

    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.
  7. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 08 Aug 2011 Link to this post

    Hi Vladimir, 

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

    Thanks,

    Pablo.
  8. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 08 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  9. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 08 Aug 2011 Link to this post

    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.
  10. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 08 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  11. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 08 Aug 2011 Link to this post

    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.
  12. Imran Javed Zia
    Imran Javed  Zia avatar
    55 posts
    Member since:
    Jul 2009

    Posted 22 Nov 2011 Link to this post

    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
  13. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 25 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  14. Imran Javed Zia
    Imran Javed  Zia avatar
    55 posts
    Member since:
    Jul 2009

    Posted 29 Nov 2011 Link to this post

    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
  15. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 04 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  16. Imran Javed Zia
    Imran Javed  Zia avatar
    55 posts
    Member since:
    Jul 2009

    Posted 07 Dec 2011 Link to this post

    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

Back to Top
UI for WPF is Visual Studio 2017 Ready