Chart with DateTime X axis and categorical Y

5 posts, 0 answers
  1. Adam
    Adam avatar
    2 posts
    Member since:
    Oct 2013

    Posted 05 Oct 2013 Link to this post

    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?
  2. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 10 Oct 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Daniele
    Daniele avatar
    5 posts
    Member since:
    Apr 2013

    Posted 11 Oct 2013 Link to this post

    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


  5. Daniele
    Daniele avatar
    5 posts
    Member since:
    Apr 2013

    Posted 14 Oct 2013 Link to this post

    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
  6. Adam
    Adam avatar
    2 posts
    Member since:
    Oct 2013

    Posted 14 Oct 2013 Link to this post

    Rositsa,

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