How to add dynamic RadCartesianChart.Series into my ChartView

13 posts, 0 answers
  1. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 21 Jun 2015 Link to this post

    This is my chart view:

     

    <telerik:RadCartesianChart x:Name="bpsChart" Margin="20,92,31,474">
        <telerik:RadCartesianChart.Grid>
            <telerik:CartesianChartGrid MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5" MajorLinesVisibility="None">
                <telerik:CartesianChartGrid.MajorYLineStyle>
                    <Style TargetType="{x:Type Line}">
                        <Setter Property="Stroke" Value="Gray"/>
                    </Style>
                </telerik:CartesianChartGrid.MajorYLineStyle>
                <telerik:CartesianChartGrid.MajorXLineStyle>
                    <Style TargetType="{x:Type Line}">
                        <Setter Property="Stroke" Value="Gray"/>
                    </Style>
                </telerik:CartesianChartGrid.MajorXLineStyle>
            </telerik:CartesianChartGrid>
        </telerik:RadCartesianChart.Grid>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis ShowLabels="False" IsEnabled="False" TickThickness="0" LineThickness="0" >
            </telerik:CategoricalAxis>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis >
            <telerik:LinearAxis  ShowLabels="False" IsEnabled="False" TickThickness="0" LineThickness="0" />
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:LineSeries CategoryBinding="Date" ValueBinding="Value" Stroke="LightSeaGreen"
                                ItemsSource="{Binding MyData, RelativeSource={RelativeSource AncestorType=Window}}"/>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

     

    As you can see i am populate this with MyData which is my object the contains only only variable: double.

    Now i have a list of several MyData objects and i want to create from each on them a stroke line on my ChartView.

     What is the best option to do that ? (XAML or code behind)

    I will glad for code example.

     

     

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 22 Jun 2015 Link to this post

    Hi Berry,

    In order to populate the chart's Series collection dynamically you can use the ChartSeriesProvider. You can read more about this approach in the Dynamic Number of Series 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
  3. UI for WPF is Visual Studio 2017 Ready
  4. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 30 Jun 2015 Link to this post

    I try to create several charts like in the example link you gave me and i am still have problems.

    I have simple class with only 1 value - double that changing and this object is inside collection (i have several object from same class).

    And i have timer tick event every 1 second.

    Can you show me please a simple example how can i implement this ?

  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 03 Jul 2015 Link to this post

    Hello Berry,

    I am not sure that  I understand your requirement. Can you please elaborate a bit more on it by telling me what exactly you want to implement and why you need a timer? Is it some kind of live data scenario? If so, you can take a look at the Live Data RadChartView demo. Also, you can see the SeriesProvider SDK example which demonstrates how to create the structure of your series and data points' models and how to populate the chart with them.

    Please check out the examples and let me know if they help. If not, can you please send me runnable code snippets demonstrating your implementation and drawings of the expected result. This will help me in better understanding your case and assist you further.

    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. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 06 Jul 2015 Link to this post

    I have this simple model:

    public class Model
    {
        public static List<Model> adapters;
        public double rate { get; set; }
    }

    When my application start i have this List full of several objects and each one of them (Model) have this "rate" property that read my machine adapter rate and via timer i want update my chart. 

    I can do that but with only one series and i didn't understand how to add several charts.

    I will be glad for simple code example how to achieve this with my model properties.

    i only want to chart XAML code example, the rest is easy for me.

  7. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 09 Jul 2015 Link to this post

    Hello Berry,

    In order to add dynamic number of series in the chart using a SeriesProvider you will need to have couple models - one for the series and another for the data points. Each series model should have a collection that contains objects of type the data point's model. Here is an example for such structure:
    public class SeriesModel
    {
        public static ObservableCollection<DataPointModel> DataPoints;
    }
     
    public class DataPointModel
    {   
        public double Rate { get; set; }
        public DateTime Date { get; set; } 
    }
    Note that I define an ObservableCollection<T> so when there is a change in it the UI will be notified properly. If you are using a List<T> the UI might not be updated properly.

    You can use the following definition in XAML:
    <telerik:RadCartesianChart x:Name="chart" Palette="Summer">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:DateTimeContinuousAxis />
        </telerik:RadCartesianChart.VerticalAxis>
     
        <telerik:RadCartesianChart.SeriesProvider>
            <telerik:ChartSeriesProvider Source="{Binding Data}"> <!-- where "Data" in this case is a collection of SeriesModel objects -->
                <telerik:ChartSeriesProvider.SeriesDescriptors>
                    <telerik:CategoricalSeriesDescriptor ItemsSourcePath="DataPoints" ValuePath="Rate" CategoryPath="Date">
                        <telerik:CategoricalSeriesDescriptor.Style>
                            <Style TargetType="telerik:LineSeries" />
                        </telerik:CategoricalSeriesDescriptor.Style>
                    </telerik:CategoricalSeriesDescriptor>         
                </telerik:ChartSeriesProvider.SeriesDescriptors>
            </telerik:ChartSeriesProvider>
        </telerik:RadCartesianChart.SeriesProvider>
    </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
  8. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 09 Jul 2015 in reply to Martin Link to this post

    OK so my chart look the same and my DataPoints is full with my object and the Rate property changing but i only have the this message over my chart: No series added
  9. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 09 Jul 2015 in reply to berry Link to this post

    I will write again my model and please show my my problem:

     

    Model

     

    public class Interface
     {
         public string Name { get; set; }
         public double Rate { get; set; }
         public DateTime Date { get; set; }
    }

    My collection

     

    public ObservableCollection<Interface> DataPoints { get; set; }

    This collecrion contain several Interface object, where the Rate property is changing.

     My Chart

    <telerik:RadCartesianChart x:Name="chart" Margin="0,11,0,0" Palette="Windows8" HorizontalAlignment="Right" Width="987" Grid.RowSpan="2" >
        <telerik:RadCartesianChart.Grid>
            <telerik:CartesianChartGrid MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5" MajorLinesVisibility="None">
                <telerik:CartesianChartGrid.MajorYLineStyle>
                    <Style TargetType="{x:Type Line}">
                        <Setter Property="Stroke" Value="Gainsboro"/>
                    </Style>
                </telerik:CartesianChartGrid.MajorYLineStyle>
                <telerik:CartesianChartGrid.MajorXLineStyle>
                    <Style TargetType="{x:Type Line}">
                        <Setter Property="Stroke" Value="Gainsboro"/>
                    </Style>
                </telerik:CartesianChartGrid.MajorXLineStyle>
            </telerik:CartesianChartGrid>
        </telerik:RadCartesianChart.Grid>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis ShowLabels="False" IsEnabled="False" TickThickness="0" LineThickness="0" >
            </telerik:CategoricalAxis>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis >
            <telerik:LinearAxis  ShowLabels="False" IsEnabled="False" TickThickness="0" LineThickness="0" Minimum="-10"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.SeriesProvider>
            <telerik:ChartSeriesProvider Source="{Binding Interface}">
                <!-- where "Data" in this case is a collection of SeriesModel objects -->
                <telerik:ChartSeriesProvider.SeriesDescriptors>
                    <telerik:CategoricalSeriesDescriptor ItemsSourcePath="DataPoints" ValuePath="Rate" CategoryPath="Date">
                        <telerik:CategoricalSeriesDescriptor.Style>
                            <Style TargetType="telerik:LineSeries" />
                        </telerik:CategoricalSeriesDescriptor.Style>
                    </telerik:CategoricalSeriesDescriptor>
                </telerik:ChartSeriesProvider.SeriesDescriptors>
            </telerik:ChartSeriesProvider>
        </telerik:RadCartesianChart.SeriesProvider>
    </telerik:RadCartesianChart>

    Currently i can only see the message: No series added. 

     

     

     

     

     

     

     

     

    g

  10. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 13 Jul 2015 Link to this post

    Hi Berry,

    I prepared a sample project based on your code that demonstrates creating of multiple series at runtime. Please give the project a try and let me know if it helps.

    As a side note, the series might not be displayed on your side, if their collection is loaded after the chart's load. In this case the collection property that holds the series models should notify the UI for changes.

    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
  11. mark
    mark avatar
    2 posts
    Member since:
    Jun 2015

    Posted 13 Jul 2015 in reply to Martin Link to this post

    Something is very strange, i took all your code example, copy ans paste into my solution and still all i can see is the message No series added over my chart.

    I am using .Net 4.5 and i have all the DLL's like in your solution.

  12. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 14 Jul 2015 Link to this post

    Hello Berry,

    I am afraid that without  your project I won't be able to tell you what is causing the reported behavior. However, you can check if you are using our NoXaml assemblies in your project. In this case, you will need to based the series descriptor's Style to the default style of the series. Here is an example:
    <telerik:CategoricalSeriesDescriptor.Style>
        <Style TargetType="telerik:LineSeries" BasedOn="{StaticResource LineSeriesStyle}" />
    </telerik:CategoricalSeriesDescriptor.Style>

    Please try this 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
  13. berry
    berry avatar
    27 posts
    Member since:
    Jun 2015

    Posted 14 Jul 2015 Link to this post

    At the end i succeed to make your code to work but after change it to my model it stop working so i will post here all the changes so please take a look and see that's cause this.

    The chanes was made only in LoadData method, all the rest is the same include the XAML code.

    In you exapmle:

    public void LoadData()
    {
        this.Interfaces = new ObservableCollection<SeriesModel>();
     
        for (int i = 0; i < 3; i++)
        {
            var seriesModel = new SeriesModel() { DataPoints = new ObservableCollection<Interface>() };
            for (int j = 0; j < 10; j++)
            {
                seriesModel.DataPoints.Add(new Interface()
                {
                    Date = DateTime.Now.AddMonths(1),
                    Name = "Data Point " + 1,
                    _Rate = adapters[i].Rate,
                });
            }
     
            this.Interfaces.Add(seriesModel);
        }
    }

    So i made i little change:

    First i have a collection of my Model (Interface):

    ObservableCollection<Interface> collection = Interface.GetAll();

    So this is my new LoadData method:

    public void LoadData()
    {
        this.Interfaces = new ObservableCollection<SeriesModel>();
     
        var seriesModelTest = new SeriesModel() { DataPoints = new ObservableCollection<Interface>() };
        ObservableCollection<Interface> collection = Interface.GetAll();
        for (int i = 0; i < collection.Count; i++)
            seriesModelTest.DataPoints.Add(collection[i]);
        this.Interfaces.Add(seriesModelTest);
    }

    The result is that after i made this changed i cannot see any series over my chart.

  14. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 15 Jul 2015 Link to this post

    Hi Berry,

    I updated my example according to the changes that you described in your last reply and the series is displayed. Please give the attached project a try and let me know if I am missing something. If this doesn't help I would ask you to modify the project so that it reproduces the reported behavior and send me code snippets with the changes.

    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