Join two ScatterDataPoints in RadChartView

6 posts, 0 answers
  1. crazy05
    crazy05 avatar
    72 posts
    Member since:
    Sep 2014

    Posted 25 Jun 2015 Link to this post

    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>

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 26 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. crazy05
    crazy05 avatar
    72 posts
    Member since:
    Sep 2014

    Posted 26 Jun 2015 in reply to Martin Link to this post

    hello,

     

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

  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 30 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. crazy05
    crazy05 avatar
    72 posts
    Member since:
    Sep 2014

    Posted 30 Jun 2015 Link to this post

    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 ?

  7. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 03 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready