Binding the Series collection

[Kevin Kuebler]

I was surprised to find that the Series property of the ChartArea (of type ChartSeriesCollection) is not a dependency property, meaning it can not be data bound. Why is this, and are there any plans to add this capability?

This seems like a very common scenario, where the number of series is not known at design time. I should be able to databind the series collection (you could call the property SeriesSource or something like that to make it separate from the existing Series property if necessary). Then I should be able to provide a DataTemplate for the ChartSeries items in the collection. This would be a standard WPF design for an app following the MVVM pattern. I realize I can add ChartSeries objects to the Series collection manually in the code-behind, but that misses a lot of the point of WPF and MVVM.

Is there something I missed that will actually allow me to do this, or can we expect this in a future release?

Thanks!

Kevin Kuebler

[Suresh S]

Hi Kevin,

Currently, we don’t have support for binding SeriesCollection property to the ChartArea Series property. Our new SfChart control support this feature. We suggest you to try out our SfChart control for your requirement.

Note: Our new SfChart control can provide you a better performance for large amount of data with few more features included in it. We suggest you to try out our new SfChart control for your requirement.

Documentation link: http://help.syncfusion.com/wpf/sfchart

Regards,

Suresh S

[Kevin Kuebler]

Hi Suresh,

Thanks, I didn't know about the new SfChart control. I will check it out!

Kevin

[Kevin Kuebler]

So I see that the Series property is now a dependency property, so it can be data bound. That's good. However, I don't see a SeriesTemplate properety (or something similar) to specify a DataTemplate to use for rendering each series. Am I just missing that, or is that not supported? If it's not supported, then I suppose binding the Series requires a value converter to return a new ChartSeriesCollection instance, is that correct?

Also, it doesn't appear that the new chart control supports the ChartZoomingToolkit feature that the old chart had. Is that also correct?

Thanks,

Kevin

[Kevin Kuebler]

One more thing ... :-)  It seems that the new chart does not support programmatically controlling the zooming. Is this correct? We are relying on that ability in order to implement selection zooming using the right mouse button, instead of the left (see this forum post: http://www.syncfusion.com/forums/116961/mousedrag-zooming-with-right-mouse-button). As a suggestion, it would be great if you guys could simply add a property to your ChartZoomPanBehavior to control which mouse button is associated with the EnableSelectionZooming feature.

[Sheik Syed Abthaheer M]

Hi Kavin,

Thanks for your update.

Query 1: I don't see a SeriesTemplate property (or something similar) to specify a DataTemplate to use for rendering each series.

You can achieve your requirement by using CustomTemplate property of Chart Series (Line,Column,StepLine) in SfChart control.

Query 2: Doesn't appear that the new chart control supports the ChartZoomingToolkit feature that the old chart had.

Currently we don’t have ChartZoomingToolkit support in our SfChart and we have already logged feature request for this.

Link: http://www.syncfusion.com/support/directtrac/features/WPF-13632

However we have achieved this feature through workaround in an attached sample.

Query 3: We are relying on that ability in order to implement selection zooming using the right mouse button, instead of the left button.

We have achieved your requirement by inheriting the ChartZoomPanBehavior class. We have prepared the sample based on this and please find the attached sample.

Regards,

M. Sheik

Attachment: SfChart_Zoom_a38dbdb1.zip

[Kevin Kuebler]

Thank you for the sample! I have a few follow-up responses below:

1) Specifying a CustomTemplate for the series as you've done in the sample isn't really what I was getting at. The point of binding the Series property would be to not specify an Series elements directly in the XAML of the chart. Instead you would provide a DataTemplate to a SeriesTemplate property, much like with an ItemsControl where you have an ItemsSource that you bind to a list of objects representing each item, and then an ItemTemplate to specify how to render each item in the list. Without that, binding the Series is only usable by providing a ValueConverter to return a SeriesCollection full of series objects created in code. This is ok, but is not much better than doing that in the code-behind. This is not a huge deal, but it would make for a good improvement for the control.

2) This type of solution works fine to replace the functionality of the zooming toolkit.

3) While this solution works on it's own, I don't believe it will work in our case. We can't simply "redirect" the right mouse button events to call the left mouse button event handlers because we have another custom behavior tied to the left mouse button. The behavior we've implemented with the left button is actually kind of a combination of the CrossHair and TrackBall behaviors. It tracks the specific points on the series line, like the TrackBall, but it draws two lines to the point, similar to the CrossHair. Unlike either one though, it is specific to a single series. The user can click on the series line and then it starts tracking for that series. This would be a nice feature to build into the chart also.

Due to these limitations, we will most likely stick with the original chart control for now, but I will keep experimenting with the SfChart control to see if there is a way we can adapt it to our needs.

Thanks,

Kevin

[Sheik Syed Abthaheer M]

Hi Kevin,

Query 1: Regarding Series Template requirement.

Please provide the simple sample based on this requirement which you have achieved in old chart. So that we will analyze further and check the feasibility in SfChart.

Query 2: Regarding selection zooming using the right mouse button.

We would like to inform you that, in our previous updated sample we have modified the Left mouse button selection zooming into Right mouse button selection zooming. We are disabled Left mouse button event handler only in custom selection behavior (instead of this we use Right mouse button). We are able to use the left mouse button event handler in all other behaviors like cross hair, track ball.

Regards,

M. Sheik

[Kevin Kuebler]

Thanks again for your reply.

For 1) I do not have a sample of doing this in the old chart. I think we have a miscommunication. :-) My original question was whether it was possible to bind the Series property. In the old chart, this is not possible because it is not a dependency property. In the SfChart, you can bind Series, however since there is no SeriesTemplate property, you still need to create the series in code using a value converter. What I think SfChart should support is the ability to declaratively specify the chart through binding and templates, without explicitly creating series in either code or XAML (only the template for the series would be in the XAML). This would be in keeping with the spirit of WPF/XAML and the MVVM pattern, much like ItemsControl or ListBox.

Here is an example of what I envision. Imagine you have your product prices broken down by year, and you want a chart with one series for each year. ProductPricesByYear is a collection of objects, one for each year, each of which has a Products collection on it which will represent the data for one series. I suggest we should be able to do something like this ...

<sf:SfChart Series="{Binding ProductPricesByYear}">

    <sf:SfChart.PrimaryAxis>

        <sf:SfChart.CategoryAxis />

    </sf:SfChart.PrimaryAxis>

    <sf:SfChart.SecondaryAxis>

        <sf:SfChart.NumericalAxis/>

    </sf:SfChart.SecondaryAxis>

    <sf:SfChart.SeriesTemplate>

        <DataTemplate>

            <sf:LineSeries XBindingPath="Prodname" YBindingPath="Price" ItemsSource="{Binding Products}" />

        </DataTemplate>

    </sf:SfChart.SeriesTemplate>

</sf:SfChart>

For 2) I see now what you are doing, and it looks like this may in fact work with our other custom behavior we have tied to the left mouse button.

Again, 1) is a suggestion, and an expectation for how I feel the control should work. But I can work around the absence of that feature using a ValueConverter for now. Assuming I can make our other custom behavior work well with the modified ZoomPanBehavior, I should be able to use the SfChart control in our project.

Thanks!

Kevin

[Sheik Syed Abthaheer M]

Hi Kevin,

Thanks for your update.

We have analyzed your requirement and currently we do not have a support to automatically generate the series using the Series Data Template. We have already considered this type of requirement as a feature. Please find the below feature report link

http://www.syncfusion.com/support/directtrac/features/WRT-2219

Regards,

M. Sheik

[Joseph Vianes]

What is the state of this feature ?

I'm trying to use SfChart in a MVVM environment and since it's the UI responsibility to draw series, I don't want to put an object of type ChartSeriesCollection in my ViewModel.

Actually I need to do :
ChartViewModel.cs :
public class ChartViewModel : ItemViewModel
{
    public ChartSeriesCollection series = new ChartSeriesCollection();
    public ChartSeriesCollection Series { get { return series; } }
}
ChartView.xaml :
<sf:SfChart Series="{Binding Series}"/>

What it should be :
namespace Model
{
  public class ValuePoint
  {
      public DateTime Date { get; set; }
      public double Value { get; set; }
  }
  public class Serie
  {
      public string Name { get; set; }
      public IEnumerable<ValuePoint> Values { get; set; }
  }
}
public class ChartViewModel : ItemViewModel
{
    public ObservableCollection<Serie> series = new ObservableCollection<Serie>();
    public ObservableCollection<Serie> Series { get { return series; } }
}
ChartView.xaml :

<sf:SfChart Series="{Binding Series}">

    <sf:SfChart.PrimaryAxis>

        <sf:SfChart.CategoryAxis />

    </sf:SfChart.PrimaryAxis>

    <sf:SfChart.SecondaryAxis>

        <sf:SfChart.NumericalAxis/>

    </sf:SfChart.SecondaryAxis>

    <sf:SfChart.SeriesTemplate>

        <DataTemplate>

            <sf:LineSeries XBindingPath="Date" YBindingPath="Value" ItemsSource="{Binding Values}" Label={Binding Name} />

        </DataTemplate>

    </sf:SfChart.SeriesTemplate>

</sf:SfChart>

Ideally, it should also be possible to add a DataTemplateSelector to dynamically choose between LineSeries / AreaSeries / ...

[Rachel A]

Hi Kevin,

We would like to let you know that we will implement this feature in any of our upcoming releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We will update you once feature has been implemented. We appreciate your patience until then.

Please let us know, if you need any further assistance.

Thanks,

Rachel. A

[Kevin Kuebler]

Hi Rachel,

That's good to hear, thanks for the update! I think that will be a great feature for the chart control.

Thanks,

Kevin

[Rachel A]

Hi Kevin,

Thanks for the update.

Please let us know if you require further assistance on this.

Thanks,
Rachel.A

[Pavel Filip]

Hello,

when evaluating SyncFusion, I am trying to achieve the same thing as Kevin and Joseph, but to do that, I have to operate the Series collection of the chart in code.

That means, i am passing a new ChartSeries object to the Add method of the Series collection.

I would be very glad, if this could be achieved with Binding, but I am failing to do that.

Did something change or am I doing something wrong?

Thanks,

Pavel

[Sumathi Jayaraj]

Hi Pavel,

Thanks for contacting Syncfusion support.

We can  populate the chart series collection in code and  can bind  to the “Series” property in SfChart. Please find the sample attachment for your requirement.

Sample: ChartWPFSample


Regards,
Sumathi J

[Pavel Filip]

Hello,

your answer helped me do the trick.

Your code revealed the problem.

I was trying to bind to an ObservableCollection<LineSeries>

Instead I should have bound to an object of type ChartSeriesCollection

Magic!

Thanks a lot!!!

Pavel

P.S.: Good news is, that there is one last feature left for me to implement and I am happy to say, that our company is going to buy licenses for SyncFusion :)

To a huge extent thanks to your excellent support you provide!

[Sumathi Jayaraj]

Hi Pavel,

Thanks for the update. Please let us know if you have any queries.

Regards,
Sumathi J

[Devi Aruna Maharasi Murugan]

Hi Kevin, 

  

We would like to inform you that, while analyzing for the implementation of this feature (Common ItemsSource for Series), we have found a possible way to achieve this support in sample level. 

  

Kindly refer the below KB link for dynamically generating the series by binding items source directly to chart. 

  

For WPF: https://www.syncfusion.com/kb/7578/how-to-generate-dynamic-number-of-series-based-on-common-items-source 

  

Regards, 

Devi 

 

[Richard Sinden]

Hi Devi,

This is great, I was just looking for something like this. It sounds like you're planning to put this functionality in the actual SfChart control though. Is there a planned release date for this?

Thanks,

Richard

[Durgadevi Selvaraj]

Hi Richard, 

We would like to inform you that,  currently , we do not have a plan to implement this support in SfChart control. You can meet your requirement by workaround provided in the below KB link, 

Link: https://www.syncfusion.com/kb/7578/how-to-generate-dynamic-number-of-series-based-on-common-items-source 

Please let us know if you have any concerns. 

Regards,  

Durgadevi S 

[Douglas William]

Hi Community,

this feature works?

I'm having same issue to bind Series collection dinamically for fast bitmap series.

Thanks for any update,

Best,

Douglas

[Douglas William]

Yes it work's!

Great, thanks!

[Yuvaraj Palanisamy]

Hi Douglas William,  

  

Thanks for your update.   

  

We are glad to know that you have achieved your requirement. 

 

Regards, 

Yuvaraj