[Solved] Chart with DateTime X axis and categorical Y

[Adam]

I'd like to create a bar or line graph where the X axis is DateTime and the Y axis is arbitrary strings that I control. I can represent the Y coordinate of each point using an integer, but I need to control how the Y axis labels look. Here's an example of the data points I have:

X Value        Y Value    Y Label
10/5/2013    1                "A"
10/6/2013    5                "E"
10/7/2013    6                "F"

Is there a combination of axis types that let me do this? If not, is there another combination that I can use in conjunction with some kind of data bound customization of the Y axis labels?

[Rosy Topchiyska]

Hello Adam,

Thank you for the question.

The chart does not support a scenario where you have two categorical axes, but for the scenario you have described I can suggest a workaround: you can define a vertical LinearAxis and use the LabelTemplate property of the axis. Via a value converter you can convert the axis label value to a property of the view model. I have attached a sample project that demonstrates how you can do that. This scenario works fine for integer values since the axis labels will correspond to actual values from your data.

I hope this helps. Please, do not hesitate to contact us if you need further assistance. 

Regards,
Rositsa Topchiyska
Telerik

[Daniele]

Hi Rositsa,
thanks for the answer.
the post has been useful also for me.

I have just a question about your example,
because also in my project I'm using the RadCartesianChart and I'd like to fill the Graph in the ViewModel of the page.
What Does I should change if I create my collection no in the Page constructor but in another method which is not called in the constructor?

Thanks a lot
Daniele

[Daniele]

Ok I solved it.
After reading the documentation, I set the DataContext of the Chart with my collection declared in the ViewModel of the page,
and for the series I used this binding:

telerikChart:AreaSeries CombineMode="None"  ItemsSource="{Binding}">
                            <telerikChart:AreaSeries.ValueBinding>
                                <telerikChart:PropertyNameDataPointBinding PropertyName="Value"  />
                            </telerikChart:AreaSeries.ValueBinding>
                            <telerikChart:AreaSeries.CategoryBinding>
                                <telerikChart:PropertyNameDataPointBinding PropertyName="Date" />
                            </telerikChart:AreaSeries.CategoryBinding>
                        </telerikChart:AreaSeries>

Now It seems to work.

Bye
Daniele

[Adam]

Rositsa,

Thanks for the sample project, I was able to apply that technique to my graph and make it look like I wanted. Thanks!