Line chart control

[Mark]

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?

[Martin Ivanov]

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

[Mark]

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.

[Martin Ivanov]

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

[Mark]

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

Thanks you very much.

[Mark]

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.

[Martin Ivanov]

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

[Mark]

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>

 

 

[Martin Ivanov]

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

[Mark]

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.

[Martin Ivanov]

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

[Mark]

Yes that did the trick, thank you very much. 

[Mark]

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. 

[Martin Ivanov]

Hello Mark,

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

Regards,
Martin Ivanov
Progress Telerik