RadCartesianChart with a dynamic amount of AreaSeries and MVVM

5 posts, 1 answers
  1. Andreas
    Andreas avatar
    21 posts
    Member since:
    Jan 2012

    Posted 13 Aug 2012 Link to this post

    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;
               }
           }
       }
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 16 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Andreas
    Andreas avatar
    21 posts
    Member since:
    Jan 2012

    Posted 17 Aug 2012 Link to this post

    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.
  5. Andreas
    Andreas avatar
    21 posts
    Member since:
    Jan 2012

    Posted 17 Aug 2012 Link to this post

    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 
  6. Answer
    Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 17 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner