[Solved] DataBinding RadCartesianChart & AreaSeries

Hello Iris,

 You can define series value and category binding using the following code:

 I have attached sample project demonstrating this setup.

Also, I see that you are interested in our suite, so I encourage you to download your help (chm format) from account download scetion. Although it still has small number of articles, it covers this and other topics you might find interesting.

Best regards,
Tsvyatko
the Telerik team

Thank you for the answer, but it doesnt solve my problem.

I must be doing it wrong, I have this:


Now where does the databinding go? I'm sorry for if the question(s) are silly, but I just can't make it work. The project.zip is empty , and I have downloaded the techEd example, but there the source is set in code, as I am doing atm. I havent had any problems with the other charts, just this one,- and that is why I am asking for help. I've ofcourse had a bit of a google, and have looked at other controls such as http://www.telerik.com/help/silverlight/radchartview-series-areaseries.html , but still can't get the databinding to work. Do you have a working example with this chart, with databinding, that I can have a look at?

with kind regards Iris

Hi Iris,

 Please excuse me for the mistake, I am reataching the correct project. I will also try to summarize in short the chart components involved and the databinding implementation. Most of the info is a quote of the chm (we are working to make the online help available in 1-2 days ).

Axis
RadChart plots data points in a coordinate system defined by its two axes. Instead of having one axis type that does hundreds of things, we have a hierarchy of axes where each concrete axis type expose particular functionality.

In this scenario we will look for DateTimeCategorical and linear axes:

Series
The actual data visualization in RadChartView is done by a set of series classes. Each series has a collection of data points, that is, a data source which it displays according to the series’ type.

In this particular scenario we we are interested in the following properties:

 - ValueBinding - this property of the series will be used to resolve the property of the data records that will be used for visualization by the data points.

Note that ValueBinding if of type PropertyValueBinding, rather than binding. Thus, when defined in XAML it needs to be setup as follows: 

 - CategoryBinding - determine the category of each data point which will also correspond to a user defined property of the raw data records.

That being said chart setup with area series will look like that:

where Data1 and Data 2 are collections of BodyWeight class objects:


Let me know if this helps. If you have any further questions do not hesitate to conact us.

I am also adding direct link to the xaml chm help file - http://www.telerik.com/account/your-products/trial-product-versions/download-trial-file.aspx?fileid=12897&pid=0&dispkey=True (when downloaded don't forget to unblock contents - properties -> unblock).

Greetings,
Tsvyatko
the Telerik team

This is the weirdest thing ever. The code you posted is the exact same one I've been trying to use all week, but I keep getting errors (feeling kind of stupid as this does seem like basic stuff).

Even if I copy and paste it in the app, in a new page, same error.

I created a new application instead, and it works there. What the ??  Oh well, now it works. I'll just have to redo parts of the app. Have no idea why AreaSeries gave errors in the other app.

Thank you again for your help :) Thumbs up from Sweden

Hello Iris,

 We are happy that you got this working from your side. Regarding, the issue you are describing, we have found out that the XAML parcer is very sensitive for space symbols (usually they are added by coping xaml from web or text editor) and breaks if they exist somewhere in the page.

All the best,
Tsvyatko
the Telerik team

Hi Tsvyatko ，

I can understand almost all the stuff you were saying above. My problem is also about data binding to Rad bar chart. The data structure I have right now is:


And in the viewmodel, I set the dummy data as:
What I want to do is to bind _barchart to the  barserie of RadCartesianChart control, and get a effect as the attached png. I also hope to display a legend for 'primary' and 'secondary'. Please give some guidance on how to do that. 

Thanks,
Yiqing

Hi Tsvyatko ，

I can understand almost all the stuff you were saying above. My problem is also about data binding to Rad bar chart. The data structure I have right now is:


And in the viewmodel, I set the dummy data as:
What I want to do is to bind _barchart to the  barserie of RadCartesianChart control, and get a effect as the attached png. I also hope to display a legend for 'primary' and 'secondary'.

The code I write for now is like the following. This has nothing to do with '_barchart', and what I hope is to pass _barchart to the control and let it show the same effect.

Please give some guidance on how to do that. 

Thanks,
Yiqing

Hi Yiqing,

I have attached a project that demonstrates two possible approaches in the current scenario. You can either bind the BarSeries to the properties that hold the two generated lists or bind the chart to the _barchart collection and generate the series dynamically through the RadCartesianChart.SeriesProvider(to see the second scenario - uncomment the code and add RadCartesianChart.DataContext="{Binding BarChart}"). More about the dynamic series can be found here - http://www.telerik.com/help/windows-8-xaml/radchart-cartesianchart-series-dynamicseries-overview.html. I have also added a RadLegendControl that works in both cases.


I hope this helps. Let me know should you have any other questions.

 
Regards,
Ivaylo Gergov
Telerik

Hi Ivaylo,

That's quite helpful, I did it!

Thanks,
Yiqing 

Hi Ivaylo,

Now I've dynamically display the barchart, I want to three more things (in the same senario as indicated before.)

1.show the legend. I tried the following, but it doesn't work.
then I tried this, which was what I have succeeded on pie chart, however it fails as well.

2. Change the color of axis.

Also, I wonder where can I change the color of the vertical and horizontal axis.

3.Change the color of grouped title.

As you can see in the attached picture, there's a very light title under each group ('passed', 'failed', 'pending'). I also want to make them more obvious.

Thanks,
Yiqing

Hi Yiqing,

I will answer to your questions consequently. For your convenience I have modified the example project from the previous answer to fulfill your requirements in case you need to refer to it.

First of all, in the code snippet you have sent you have to remove the <Chart:BarSeries> element. Here you can find a complete example that should give you a basic idea of how to generate a dynamic series in a BarChart.

About the LegendControl: On the picture you have attached the legend is actually displayed, but its text is not visualized for some reason or its color is the same as the color of the background. I can see that you have set a Foreground property of the LegendControl, but this property has no effect on the appearance of the control - here you can see all the properties of the LegendControl if you need to modify it. You can take a look at the example project with correctly visualized LegendControl in case you still have problems with making it work.

Labels and Axis appearance: You have to add RadCartesianChart.HorizontalAxis and RadCartesianChart.VerticalAxis to your chart. Then you have to set a custom Style to the LineStyle property and the LabelStyle property of the axis - you can see how in the project. You can read more about the axes properties here.

I hope this was useful and let us know if there is anything else we can assist you with.

Regards,
Rositsa Topchiyska
Telerik

Hi Rositsa,

Thanks for your very prompt suggestions!! I've figured out most of them. Could you indicate why the text of the legend doesn't show? Where did I make the color as the same as the backgroud??

Thanks,
Yiqing

Hello Yiqing,

Sorry for misleading you a bit with our previous reply -- indeed setting the RadLegendControl.Foreground property should be enough to control the color of the legend item labels. If your problem with the legend text persists, could you send us a modified version of our sample application that reproduces the issue so we can advise you properly how to proceed?

Hope this helps.

Regards,
Rositsa Topchiyska
Telerik