I need to create a dynamic number of line-series on a RadCartesienChart. Unfortunately I couldn't find a ItemsSource-property on the chart control itself, so I had to add the series through code-behind, which in a MVVM-Architecture is quite messy. The moment to add the series was the Load-Event of the chart control - calling out to the ViewModel and retrieving the data. In my app, the user can perform an action, that would need to force a redraw of that chart and ultimately adding one more or remove one series from the chart.
In my scenario I would need to call from the ViewModel to the View-SourceBehind to somehow redraw the chart with the currently valid series.
Is there a plan to make the series of a chart bindable in the future?
Thanks,
Steve
23 Answers, 1 is accepted
Thanks for the question.
We currently do not have any official plans but thanks for the feedback. We'll keep this in mind and if more people request this we will definitely consider making the chart more MVVM friendly.
Currently you can isolate the logic for populating the Series collection in a custom view model that has an items source property that you can bind to. It should be a simple matter of clearing the Series collection and populating it with the series from the ItemsSource.
Please write again if you have other questions.
Victor
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Binding within the MVVM pattern and any of the Rad "Chart" controls is certainly supported. Here is an example of binding within the RadCartesianChart. The most important piece of this example is the node telerikChart:LineSeries this is where you set the ItemsSource. Futhermore, in the LineSeries.CategoryBinding and the LineSeries.ValueBinding
the XAML
<
telerikChart:RadCartesianChart
x:Name
=
"chart"
Height
=
"567"
>
<
telerikChart:RadCartesianChart.Grid
>
<
telerikChart:CartesianChartGrid
MajorLinesVisibility
=
"XY"
MajorXLineDashArray
=
"5, 5"
MajorYLineDashArray
=
"5, 5"
>
<
telerikChart:CartesianChartGrid.MajorXLineStyle
>
<
Style
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Gray"
/>
</
Style
>
</
telerikChart:CartesianChartGrid.MajorXLineStyle
>
<
telerikChart:CartesianChartGrid.MajorYLineStyle
>
<
Style
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Gray"
/>
</
Style
>
</
telerikChart:CartesianChartGrid.MajorYLineStyle
>
</
telerikChart:CartesianChartGrid
>
</
telerikChart:RadCartesianChart.Grid
>
<
telerikChart:RadCartesianChart.VerticalAxis
>
<
telerikChart:LinearAxis
LineStroke
=
"{StaticResource PhoneDisabledBrush}"
LineThickness
=
"2"
/>
</
telerikChart:RadCartesianChart.VerticalAxis
>
<
telerikChart:RadCartesianChart.HorizontalAxis
>
<
telerikChart:CategoricalAxis
LineStroke
=
"{StaticResource PhoneDisabledBrush}"
LineThickness
=
"2"
LabelFitMode
=
"Rotate"
/>
</
telerikChart:RadCartesianChart.HorizontalAxis
>
<
telerikChart:LineSeries
x:Name
=
"dataSeries"
ItemsSource
=
"{Binding QueryData, Mode=TwoWay}"
ShowLabels
=
"True"
>
<
telerikChart:LineSeries.ValueBinding
>
<
telerikChart:PropertyNameDataPointBinding
PropertyName
=
"Value"
/>
</
telerikChart:LineSeries.ValueBinding
>
<
telerikChart:LineSeries.CategoryBinding
>
<
telerikChart:PropertyNameDataPointBinding
PropertyName
=
"Category"
/>
</
telerikChart:LineSeries.CategoryBinding
>
</
telerikChart:LineSeries
>
</
telerikChart:RadCartesianChart
>
the ViewModel
private
List<ChartData> queryData;
public
List<ChartData> QueryData
{
get
{
return
queryData;
}
set
{
queryData = value;
RaisePropertyChanged(() => QueryData);
}
}
the Model
public
class
ChartData
{
public
string
Category {
get
;
set
; }
public
double
Value {
get
;
set
; }
}
Please let me know if you have any questions.
Shayne Boyer
Telerik MVP
Thanks for your answer.
It is certainly true, that you can bind values to a predefined series (predefined means through XAML) as you described below. However I don't know at compile time how many series to display. So I would need the Series Property on the RadCartesianChart Class to be a Dependency Property in some way - not exactly, but you get the idea.
Let me give an example: Let's say the chart is displaying a number of stocks and the user can pick through check boxes which stock to display. You would need to create a LineSeries per stock and bind the values per category, e.g. value per given day, to that particular series.
Makes sense?
I've created an app, that you can download from the store (trial/paid) or have a look at the screenshots. It will give you a clear idea what I mean. app.net/traXs
Cheers,
Steve
Yes I see what you are trying to accomplish in the MVVM pattern. You are looking to bind multiple LineSeries correct?
Shayne
Any way in doing that right now or planned for future releases?
Steve
Thanks for the question.
Currently we have not planned on making the series bindable, however since you are asking we will consider implementing this in a future release.
Please write again if you have other questions.
Victor
the Telerik team
Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.
I have the same problem as steve. It would be nice to have this feature (series bindable for mvvm support) in future.
Kind regards
Chris
I have the same issue.
Was hoping that this would be fixed in Q1 2013 to come in with the RadLegend
Best Regards,
Matt
Given that this thread has grown with requests we will implement the bindable series in the next release.
Let us know if you need anything else.
Victor
the Telerik team
Excellent! Thanks for that. Once it's out I'll try it and let you know!
Would be good to post an information her in the thread, once the feature actually shipped!
Keep up the good work,
Steve
Will do.
All the best,Victor
the Telerik team
When is the next Telerik release scheduled? I am working on a project that depends on this feature and the project will end in a few months.
Jack
Our next release is scheduled for mid June. Is this acceptable to you?
Kind regards,Victor
the Telerik team
Would it be possible to obtain betas of the relevant assemblies before then?
Thank you.
We will be releasing a Service Pack mid April. We will do our best to include the updated chart.
Kind regards,Victor
the Telerik team
Our RadChartView control supports automatic generation of a dynamic number of series through its ChartSeriesProvider API. You can read more about it in this help topic.
Regards,
Petar Kirov
Telerik
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
has it been implemented in Windows phone controls?
Yes, this feature has been implemented. Now the RadChart.Series property has a public setter and it could be bound.
Let me know if you have any questions.
Regards,
Ivaylo Gergov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Hi
I need this feature for the xamarin forms env. The chart series is not bindable and it would be easy if you can provide this feature like the windows phone one.
Currently, we do support for this feature for Xamarin Forms but we will consider supporting it in future. I have logged this in our feedback portal where you can track its progress.
Regards,
Tsvyatko
Telerik
The code you shown will just produce one line
The title of the question is Binding multiple series to RadCartesianChart
which mean show multiple lines in a chart
The title was not Binding a single serie to RadCartesianChart
You can check the Dynamic Number of Series help article that demonstrates how to create multiple series in RadCartesianChart for WPF, in a data binding scenario. Also, you can find a runnable code in the SeriesProvider SDK example .
Regards,
Martin
Telerik by Progress