How to add bars to stacked chart programmatically

5 posts, 1 answers
  1. Sam
    Sam avatar
    18 posts
    Member since:
    Nov 2012

    Posted 29 Nov 2012 Link to this post

    I need to do the roughly the same thing as described here:
    http://www.telerik.com/community/forums/wpf/chart/group-by-date-and-stack-by-itemtype.aspx

    but with some important differences:
    I am polling a device for data.  I add rows to my data source and bars to my chart in the elapsed event of a timer.  So I need to update my chart in real time. 
    My data source looks like this:
    MyClass
    {
    DateTime PeriodEnd
    string Source
    int Value
    }
    Where PeriodEnd is the value for the X axis, Source is how the data is grouped within each PeriodEnd, and value is the quantity to be plotted for each group (Source).

    I dont know in advace what the values for Source will be or how many unique values there will be.  I just need to take all the rows for a given PeriodEnd, and chart the value for each Source.

    Can you kindly point me to an example that will show me how to do this?  This is my first project with Telerik - sorry I'm an newbie.
  2. Sam
    Sam avatar
    18 posts
    Member since:
    Nov 2012

    Posted 03 Dec 2012 Link to this post

    Do I need to create a new bar series in code?  Does BarSeries not have any members other than a constructor?  Perhaps I am missing a reference?
    http://www.telerik.com/help/silverlight/allmembers_t_telerik_windows_controls_chartview_barseries.html

  3. UI for WPF is Visual Studio 2017 Ready
  4. Sam
    Sam avatar
    18 posts
    Member since:
    Nov 2012

    Posted 03 Dec 2012 Link to this post


    I also have the same question as this post:
    http://www.telerik.com/community/forums/silverlight/charting-kit/interaction-possible.aspx

    I want to access the last bar of the chart (not the series) and modify its values.  My bars will represent periods of time, with the rightmost bar being the current time.  What is the most efficient way to update the chart (i.e. update only the rightmost bar)?
  5. Answer
    Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 04 Dec 2012 Link to this post

    Hi Sam,

    1. Currently we offer 2 charting solutions for the Silverlight platform - RadChart and RadChartView (represented by the classes RadCartesianChart, RadPieChart and RadPolarChart).
    • The RadChart  provides rich and mature functionality that covers a large spectrum of user case scenarios such as built-in support for grouping (automatic series creating per each unique group).
    • The RadChartView is the newer control which addresses some of the limitations and deficiencies that we have identified in the RadChart implementation over the years. It is easier to set up and has vastly improved performance. 
    • For detailed comparison between the two controls, check this help topic.

    Given the fact that your scenario uses live data, I would encourage you to use the new ChartView control.
    A very good starting point would be the Live Data demo. 

    The only logic that you will have to implement is the grouping. Here is an example solution: 
    private void CreateChartSeriesPerEachGroup(List<MyClass> initialData,
                                               string groupMember)
    {
      //Defined in Telerik.Windows.Data
      var qcv = new QueryableCollectionView(initialData);
       
      qcv.GroupDescriptors.Add(new GroupDescriptor() { Member = groupMember });
     
      this.chart.Series.Clear();
      foreach (var group in qcv.Groups)
      {
        // Defined in Telerik.Windows.Controls.ChartView
        var barSeries = new BarSeries(){CombineMode = ChartSeriesCombineMode.Stack};
        barSeries.CategoryBinding = new PropertyNameDataPointBinding("PeriodEnd");
        barSeries.ValueBinding = new PropertyNameDataPointBinding("Value");
        barSeries.ItemsSource = (group as IEnumerable<PlotInfo>);
         
        this.chart.Series.Add(barSeries);
      }
    }
    The above code snippet uses QueryableCollectionView which is view for grouping, sorting, filtering and paging data collections. Each individual group is collection of data items which have the same Source string.

    2. The BarSeries class does not have any public members defined (except its constructor). It relies on the properties inherited from its parent class - the CategoricalSeries.

    3. When you call the CreateChartSeriesPerEachGroup(...) method, the chart will fully update the data it visualizes. This is certainly not the most efficient solution and be optimized in several ways:
    • Using observable collection instead of list - that way when a new data item is added to an existing series the ChartView will be notified about the changes and it will automatically update only the necessary series. In this case you can skip all together the calling of the CreateChartSeriesPerEachGroup(...) method
    • When you detect that a new data item has Source value which has not been encountered, you can create only one new series (instead of recreating all of the series). This would require you to have a list of the unique Sources and check every time when new a data item comes, if its Source is contained in the list.

    I hope this was helpful. 

    Kind regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Sam
    Sam avatar
    18 posts
    Member since:
    Nov 2012

    Posted 04 Dec 2012 Link to this post

    Thank you Petar.
Back to Top
UI for WPF is Visual Studio 2017 Ready