This is a migrated thread and some comments may be shown as answers.

RadCartesianChart with a dynamic amount of AreaSeries and MVVM

4 Answers 176 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 13 Aug 2012, 04:27 PM
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;
           }
       }
   }

4 Answers, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 16 Aug 2012, 11:42 AM
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.

0
Andreas
Top achievements
Rank 1
answered on 17 Aug 2012, 09:44 AM
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.
0
Andreas
Top achievements
Rank 1
answered on 17 Aug 2012, 10:16 AM
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 
0
Accepted
Evgenia
Telerik team
answered on 17 Aug 2012, 01:55 PM
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.

Tags
Chart
Asked by
Andreas
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
Andreas
Top achievements
Rank 1
Share this question
or