Join two ScatterDataPoints in RadChartView

[crazy05]

Hello,

Here is My XAML. If I see it in Chart, I appear as attached file. Now, I want to join those scattered points. If we observe those clearly, they appear in "D" shape.

 I want to join all the datapoints in Line as D

 <telerik:RadCartesianChart x:Name="CartesianChart1" >
            <telerik:RadCartesianChart.HorizontalAxis >
                <telerik:LinearAxis Maximum="{Binding PMax}" Minimum="0"  />
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Maximum="{Binding Max}"  Minimum="{Binding Min}" />
            </telerik:RadCartesianChart.VerticalAxis>
            
            <telerik:RadCartesianChart.Annotations>
                <telerik:CartesianGridLineAnnotation Axis="{Binding VerticalAxis, ElementName=CartesianChart1}" Value="0" ></telerik:CartesianGridLineAnnotation>
            </telerik:RadCartesianChart.Annotations>
            
            <telerik:RadCartesianChart.Series>
                <telerik:ScatterPointSeries>
                    <telerik:ScatterPointSeries.DataPoints>
                        <telerik:ScatterDataPoint XValue="250" YValue="-100"  />
                        <telerik:ScatterDataPoint XValue="250" YValue="178" />
                        <telerik:ScatterDataPoint XValue="496" YValue="-100" />
                        <telerik:ScatterDataPoint XValue="496" YValue="178" />
                        <telerik:ScatterDataPoint XValue="520" YValue="-89" />
                        <telerik:ScatterDataPoint XValue="520" YValue="90" />
                        <telerik:ScatterDataPoint XValue="528" YValue="0" />
                    </telerik:ScatterPointSeries.DataPoints>
                </telerik:ScatterPointSeries>
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>

[Martin Ivanov]

Hi Ram,

You can achieve your requirement by using a ScatterLineSeries with PointTemplate instead of a ScatterPointSeries. In this case the XAML will look like this:

<telerik:RadCartesianChart x:Name="CartesianChart1" >
    <telerik:RadCartesianChart.HorizontalAxis >
        <telerik:LinearAxis Maximum="{Binding PMax}" Minimum="0"  />
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Maximum="{Binding Max}"  Minimum="{Binding Min}" />
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:RadCartesianChart.Annotations>
        <telerik:CartesianGridLineAnnotation Axis="{Binding VerticalAxis, ElementName=CartesianChart1}" Value="0" />
    </telerik:RadCartesianChart.Annotations>

    <telerik:RadCartesianChart.Series>
        <telerik:ScatterLineSeries>
            <telerik:ScatterLineSeries.DataPoints>
                <telerik:ScatterDataPoint XValue="250" YValue="-100"  />
                <telerik:ScatterDataPoint XValue="250" YValue="178" />
                <telerik:ScatterDataPoint XValue="496" YValue="-100" />
                <telerik:ScatterDataPoint XValue="496" YValue="178" />
                <telerik:ScatterDataPoint XValue="520" YValue="-89" />
                <telerik:ScatterDataPoint XValue="520" YValue="90" />
                <telerik:ScatterDataPoint XValue="528" YValue="0" />
            </telerik:ScatterLineSeries.DataPoints>
            <telerik:ScatterLineSeries.PointTemplate>
                <DataTemplate>
                    <Ellipse Fill="Blue" Width="10" Height="10" />
                </DataTemplate>
            </telerik:ScatterLineSeries.PointTemplate>
        </telerik:ScatterLineSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

I hope this is useful.

Regards,
Martin
Telerik

[crazy05]

hello,

 

Thank you for the post. How can I pass those XValue and YValue from MVVM ?

[Martin Ivanov]

Hello Ram,

Let's say you have the following model that holds the chart data point's information:

public class MyDataPointModel
{
    public double XValue { get; set; }
    public double YValue { get; set; }
}

The definition in XAML for a data binding scenario will be the following:

<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.HorizontalAxis >
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>

        <telerik:ScatterLineSeries XValuePath="XValue" YValuePath="YValue" ItemsSource={Bindings SeriesData} />
</telerik:RadCartesianChart>

Where "SeriesData" is a collection of "MyDataPointModel" objects.

In addition you can take a look at the Create Data-Bound Chart help article.

Regards,
Martin
Telerik

[crazy05]

Hello Martin,

 Thank you for you reply.

How to change the color of the line between two datapoints in this chart. Lets say I want blue color for all data points except two and I want red color between those two datapoints. How can I do that ?

[Martin Ivanov]

Hi Ram,

The described scenario is not supported by RadChartView -  you cannot change the color of a separate line segment between the data points. However, you can achieve your requirement by using an annotation and more particular CustomLine annotation. You can position it between the data points where you want to have a different color.

As a side note, if you want to remove the original line from the line series, for some reason, you can put a dummy item with a Null value as demonstrated in the Empty Values demo.

Please try this approach and let me know if it works for you.

Regards,
Martin
Telerik