Manually add chart legends to stacked chart

7 posts, 0 answers
  1. Mike
    Mike avatar
    6 posts
    Member since:
    Aug 2014

    Posted 04 Mar 2015 Link to this post

    Hi,

    Following on from the excellent help so far from Telerik I am now on the final part of my chart but once again seem to have come up short. I essentially have two questions regarding getting data and the other on showing legends when added manually from JavaScript

    Accessing Data
    When I create the chart I find the template feature very helpful but am having trouble getting some data items for the tool-tip as well as legends (which is why I ask question two), my structure is:
    public class ClassOne
    {
        public ClassOne()
        {
            Sites = new List<ClassTwo>();
        }
        public string FieldOne { get; set; }
        public string FieldTwo { get; set; }
        public List<ClassTwo> Sites { get; set; }
    }
     
    public class ClassTwo
    {
        public decimal Value { get; set; }
        public string Name { get; set; }
    }

    So in the above example how would I show the "Name" part which is essentially my Y axis in the chart from the template as the following does not work, or should I look at flattening out the objects?

    .Template("#= category # : #= dataItem.Name ##= kendo.toString(value, 'n') #")

    2 - Manually Add Legends
    The second question is related to adding legends, I would like the name from the above structure to be added as legends to the chart, I'm doing the following to add them:

    var leg = [];
    for (var website = 0; website < websiteCount; website++) {
        leg.push(ds[0].WebSite[website].WebSiteName);
    }
     
    chartOptions.legend.labels = leg;
    chart.redraw();

    When doing this and running though the chrome debugger console I can see the results 

    chart.options.legend
     
    Object
        {
            labels: Array[9],
            inactiveItems: Object,
            visible: true, position: "bottom"
        }
        inactiveItems: Objectlabels: Array[9]
                    0: "SITE1"
                    1: "SITE2"
                    2: "SITE3"
                    3: "SITE4"
                    4: "SITE5"
                    5: "SITE6"
                    6: "SITE7"
                    7: "SITE8"
                    8: "SITE9"
        length: 9
        __proto__: Array[0]
        position: "bottom"
        visible: true
        __proto__: Object

    Yet nothing shows on the chart so I'm guessing I'm missing something so any help would be appreciated on this.

    Regards
    Mike
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 06 Mar 2015 Link to this post

    Hi,

    Nested data item fields can be accessed in templates using syntax like:
    .Template("#= category # : #= dataItem.Suites[0].Name ##= kendo.toString(value, 'n') #")

    Building a view model by flattening the original data is also an option.
    It will clearly solve the problem with accessing child items by index.

    Legend items can't be added manually, at least for the moment. Each entry must be associated with a specific series
    We'll alleviate this restriction with the next release in March. It allows declaring a full legend template with custom layout and all.

    Thank you for your patience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 06 Mar 2015 Link to this post

    Hello,

    Just a quick follow-up. I'd like to know a bit more about what you expect from the legend in this case.
    Do you have a visual mock-up on how it should look in this case? Should hovering/clicking the individual names do anything specific?

    I just want to make sure that the functionality that we'll deliver with the release will be a good fit for your scenario.
    If it's not, it might at least give as a hint on how to improve.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Mike
    Mike avatar
    6 posts
    Member since:
    Aug 2014

    Posted 12 Mar 2015 in reply to T. Tsonev Link to this post

    Hi,

    Sorry for the lack of reply but I've been off work for the past week. I think I'm going to try to flatten the data objects out first as using the structure dataItem.Suites[0].Name does not seem to work either. I have actually managed to get the legend working by doing this:

    var leg = [];
    for (var site = 0; site < siteCount; site++) {
        leg.push(ds[0].sites[site].name);
    }
     
    chartOptions.legend.labels = leg;
    chart.redraw();
    chart4LoadingEnd();


    But am unable to put the correct tooltips in as I want to show the information for site [0] in the first bar then [1] in the second and so on so forcing dataSource.Site[0] won't work for me.

    Thanks
    Mike
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 16 Mar 2015 Link to this post

    Hello,

    A dedicated, flat view model will definitely make this scenario more manageable. It can look something like:
    public class ClassOne
    {
        public string FieldOne { get; set; }
        public string FieldTwo { get; set; }
        public string Site { get; set; }
        public decimal Value { get; set; }
    }

     
    You can then enable grouping by site to produce one series for each site. See the Binding to grouped data demo.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Mike
    Mike avatar
    6 posts
    Member since:
    Aug 2014

    Posted 16 Mar 2015 in reply to T. Tsonev Link to this post

    Hi,

    Thanks for this after two weeks hard work and with your help I'm getting the results I would expect, the two things I had to do was to flatten the data out then the next thing missing was the "group" feature!

    Once I added the group based on the name everything worked!

    Thanks again for your help with this, really appreciated it.

    Mike
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 18 Mar 2015 Link to this post

    Hi,

    Welcome. I'm glad to hear this worked out okay.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top