How to add dynamic RadCartesianChart.Series into my ChartView

[berry]

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.

 

 

[Martin Ivanov]

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

[berry]

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 ?

[Martin Ivanov]

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

[berry]

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.

[Martin Ivanov]

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

[berry]

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

[berry]

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

[Martin Ivanov]

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

[mark]

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.

[Martin Ivanov]

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

[berry]

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.

[Martin Ivanov]

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