Line chart control

14 posts, 0 answers
  1. Mark
    Mark avatar
    61 posts
    Member since:
    Dec 2010

    Posted 23 Oct 2017 Link to this post

    I need a line chart where the user can click and drag a data point up and down. When the user releases the data point I will need to calculate various values. Is this possible with your controls and if so is there a demo available?
  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1818 posts

    Posted 25 Oct 2017 Link to this post

    Hello Mark,

    There is not demo that shows this, but it is possible to achieve a similar behavior. For example, you can use the PointTemplate of the chart series to create a custom visual for the data points. Then implement the dragging functionality using the mouse events (mouse down, mouse move, etc.), and the chart's Conversion API to converter from mouse coordinates to chart coordinates. After this you can update the model of the data point with the converted values.

    I hope this helps.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Mark
    Mark avatar
    61 posts
    Member since:
    Dec 2010

    Posted 29 Oct 2017 in reply to Martin Ivanov Link to this post

    Thanks Martin, I have the point template set to a rectangle, I am detecting the mouse events (down, move, leave and up).

    I am struggling to move the rectangle within the chart on the leave event.

    I want to move the rectangle vertically only but I need to find the top/left of the rectangle in reference to the chart. I am using code behind so I have the chart details, sender gives me the rectangle and e gives me the mouse position. How do I get the starting position of the recangle so I can change the vertical position.

  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1818 posts

    Posted 01 Nov 2017 Link to this post

    Hello Mark,

    I prepared a small example showing the approach described in my last reply. Can you give it a try and see if it works for you?

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. Mark
    Mark avatar
    2 posts
    Member since:
    Dec 2012

    Posted 02 Nov 2017 in reply to Martin Ivanov Link to this post

    Brilliant, exactly what I was looking for. Now to pull  it apart and work out what the hell you did.

    Thanks you very much.

  6. Mark
    Mark avatar
    61 posts
    Member since:
    Dec 2010

    Posted 06 Nov 2017 in reply to Martin Ivanov Link to this post

    Martin how do I lock down the vertical axis. I set the min and max to 3 and -3 and the values at zero. When the user moves a data point the vertical axis want to reset to cater for the new values - ruins the chart. Is there some way to lock the vertical axis?

    PS your example made all the difference, thanks.

  7. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1818 posts

    Posted 08 Nov 2017 Link to this post

    Hello Mark,

    You should be able to achieve your requirement by setting the Minimum, Maximum and MajorStep properties of the LinearAxis to fixed values. Can you please try this and let me know how it goes?

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  8. Mark
    Mark avatar
    61 posts
    Member since:
    Dec 2010

    Posted 08 Nov 2017 in reply to Martin Ivanov Link to this post

    Nope already done that for the vertical axis. Damn I can't upload a project.

    <telerik:RadCartesianChart x:Name="chart"><br><telerik:RadCartesianChart.VerticalAxis><br><telerik:LinearAxis x:Name="verticalAxis"<br>Minimum="-3"<br>Maximum="3"<br>MajorStep="0.5" /><br></telerik:RadCartesianChart.VerticalAxis><br><telerik:RadCartesianChart.HorizontalAxis><br><telerik:CategoricalAxis /><br></telerik:RadCartesianChart.HorizontalAxis><br><telerik:RadCartesianChart.Series><br><telerik:LineSeries ValueBinding="Value"<br>CategoryBinding="Year"<br>ItemsSource="{Binding ChartDataList}"><br><telerik:LineSeries.PointTemplate><br><DataTemplate><br><Rectangle Width="15"<br> Height="15"<br> Fill="Red"<br> MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" /><br></DataTemplate><br></telerik:LineSeries.PointTemplate><br></telerik:LineSeries><br></telerik:RadCartesianChart.Series><br></telerik:RadCartesianChart><br>

     

     

  9. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1818 posts

    Posted 10 Nov 2017 Link to this post

    Hello Mark,

    Maybe I don't understand your requirement very well. Can you send me a video or pictures showing the issue?

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  10. Mark
    Mark avatar
    2 posts
    Member since:
    Dec 2012

    Posted 10 Nov 2017 in reply to Martin Ivanov Link to this post

    Note on the full range that there are a high and a low point and the vertical axis is 300, on the second image I have dragged the high point of the chart down and the vertical axis is reset to 200.

    Now set the max to 3, the min to -3 and the major segment to .5

    If you drag a data point the chart resets and ruins the presentation.

  11. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1818 posts

    Posted 13 Nov 2017 Link to this post

    Hello Mark,

    Thank you for the additional information.

    This happens because the custom dragging implementation sets the Minimum and Maximum properties of the axis. This is why your manual setting is broken. To resolve this you can just remove the following lines from the MouseLeftButtonDown and MouseLeftButtonUp event handlers.
    private void Rectangle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {           
        this.chart.CaptureMouse();
        var visual = (Rectangle)sender;
        var dp = (DataPoint)visual.DataContext;
        this.dragData = (PlotInfo)dp.DataItem;           
        this.dragOrigin = e.GetPosition(this.chart);
        this.verticalAxis.Maximum = this.verticalAxis.ActualRange.Maximum;
        this.verticalAxis.Minimum = this.verticalAxis.ActualRange.Minimum;
    }

    private void Chart_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        this.dragData = null;
        this.chart.ReleaseMouseCapture();           
        this.verticalAxis.ClearValue(LinearAxis.MaximumProperty);
        this.verticalAxis.ClearValue(LinearAxis.MinimumProperty);
    }

    Please try this and let me know if it helps.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  12. Mark
    Mark avatar
    61 posts
    Member since:
    Dec 2010

    Posted 13 Nov 2017 in reply to Martin Ivanov Link to this post

    Yes that did the trick, thank you very much. 
  13. Mark
    Mark avatar
    61 posts
    Member since:
    Dec 2010

    Posted 27 Nov 2017 in reply to Martin Ivanov Link to this post

    Martin is it possible to force the axis increment to a 2 decimal value - currently it seems to be about 8 decimals and is too fine for manual control. 
  14. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1818 posts

    Posted 28 Nov 2017 Link to this post

    Hello Mark,

    To do this you can set the MajorStep property of the axis.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top