[Solved] RadCartesianChart with a dynamic amount of AreaSeries and MVVM

[Andreas]

Hello,

i have problems to implement a chart in my application. But first i have to tell you why i need this chart, because there could be another solution.

The Requirements to the Chart is:
1. Full MVVM implementation
2. Zooming and scrolling
3. On mouse over animated trackballs
4. Dynamically generated multiple AreaSeries

Like this:
http://demos.telerik.com/silverlight/#ChartView/SmoothScrolling
http://www.telerik.com/help/silverlight/xamlflix-chartview.html

So i have decided to use the RadCartesianChart, but it does not match the last requirement. I have searched the web the last 6 hours and no solution fits my requirements.


http://www.telerik.com/community/forums/wpf/chart/datatemplating-series-for-mvvm.aspx#1529256
The best solution i have found was a implementation with RadChart, i have used it with the data in my software, and it works, but there is no zooming and scrolling and no animated trackballs.

Is there a possible and easy solution to meet my requirements?

regards
Andreas

At least there is the general structure of my application:
The Dictionary contains a String with the name of the AreaSeries and a collection of X and Y coordinates to display in the Chart.

private Dictionary<String,ObservableCollection<ChartCoordinate>> _chartData = new Dictionary<String,ObservableCollection<ChartCoordinate>>();

public Dictionary<String,ObservableCollection<ChartCoordinate>> ChartData

{

    get

    {

        return _chartData;

    }

    set

    {

        _chartData = value;

            InvalidateCommands();

            OnPropertyChanged(() => ChartData);

    }

}

public class ChartCoordinate

   {

       public ChartCoordinate(Decimal y, Decimal x)

       {

           X = x;

           Y = y;

       }

 

       private Decimal _x = 0;

       public Decimal X

       {

           get

           {

               return _x;

           }

           set

           {

               _x = value;

           }

       }

 

       private Decimal _y = 0;

       public Decimal Y

       {

           get

           {

               return _y;

           }

           set

           {

               _y = value;

           }

       }

   }


[Evgenia]

Hello Andreas,

Generally adding series to RadChartView would involve adding a CartesianSeries (Bar, Line, Area, Spline, SplineArea, ScatterPoint, ScatterLine, ScatterArea, Ohlc, Candlestick) to the RadCartesianChart.Series collection, where each of the series has its own datasource.  For example:

BarSeries ser = new BarSeries();
ser.ValueBinding = new PropertyNameDataPointBinding("Value");
ser.CategoryBinding = new PropertyNameDataPointBinding("Category");
chart.Series.Add(ser);
ser.ItemsSource = mySource;

You may successfully use this in an MVVM scenario as demonstrated in our demo together with TrackBall behavior.

Greetings,
Evgenia
the Telerik team

[Andreas]

Thank you for your answer, but i know to define fix Series and add a ItemsSource to it.

<chartView:AreaSeries ItemsSource="{Binding ChartData}" CombineMode="Stack" ShowLabels="True" >
    <chartView:AreaSeries.ValueBinding>
        <chartView:PropertyNameDataPointBinding PropertyName="X"/>
    </chartView:AreaSeries.ValueBinding>
    <chartView:AreaSeries.CategoryBinding>
        <chartView:PropertyNameDataPointBinding PropertyName="Y"/>
    </chartView:AreaSeries.CategoryBinding>
    <chartView:AreaSeries.VerticalAxis>
        <chartView:LinearAxis HorizontalLocation="Right" />
    </chartView:AreaSeries.VerticalAxis>
</chartView:AreaSeries>

But i don't know how many series there will be displayed at runtime, because it will be read from database. every line is a custom defined constraint, there could be 1 or 2 or 15

As an example:
You have a big company with 15 or lets say 4 factories and now you want to compare the progress on workers recruited in 
factory 1 with factory 2 and 3 by time (3 lines) or you want to compare the profits and loss of your factories at different lines (3 factories * 2 constraints = 6 lines) or at least you want to compare the quality test results of every product in your company with them of your factories.


The problem is, i can't define 15 AreaSeries and 15 properties if i need 18 LineSeries. I can't see an option to do this with RadCartesianChart but its possible to do this with RadChart, which doesn't meet my requirements, because you can bind mappings to the chart.

If its possible to do this without the trackball, it would be okay to abadon on that.

[Andreas]

http://www.telerik.com/help/silverlight/radchart-features-zooming-and-scrolling.html 
Okay, the previous example project and the documentation above, i should be able to meet all requirements on the radchart, hope the performance is not this bad as mentioned on this page:

http://www.telerik.com/help/silverlight/radchartview-radchartview-vs.-radchart.html 

[Evgenia]

Hello Andreas,

Thanks for the detailed explanation. 
  Currently RadChartView does not provide support for adding unknown number of series dynamically at runtime in MVVM. We have discussed this scenario internally before and in order to support it we will most probably introduce new composite control (it will probably inherit from RadCartesianChart) that will take care of the "plumbing" part (i.e. the code logic for dynamically adding / removing series based on some grouping rules) and will provide MVVM-friendly user interface. Unfortunately I cannot provide you an exact timeframe for this at present.

However I highly reccomend that you choose RadChartView for such dynamic scenario as this will boost the performance of your solution. You may consider this approach of creating dynamic series via ChartView and QueryableCollectionView. I hope it helps.

All the best,
Evgenia
the Telerik team