This is a migrated thread and some comments may be shown as answers.

Manually add chart legends to stacked chart

6 Answers 279 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 04 Mar 2015, 08:58 AM
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

6 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 06 Mar 2015, 08:52 AM
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!
 
0
T. Tsonev
Telerik team
answered on 06 Mar 2015, 09:00 AM
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!
 
0
Mike
Top achievements
Rank 1
answered on 12 Mar 2015, 11:15 AM
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
0
T. Tsonev
Telerik team
answered on 16 Mar 2015, 01:15 PM
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!
 
0
Mike
Top achievements
Rank 1
answered on 16 Mar 2015, 02:03 PM
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
0
T. Tsonev
Telerik team
answered on 18 Mar 2015, 09:14 AM
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!
 
Tags
Charts
Asked by
Mike
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Mike
Top achievements
Rank 1
Share this question
or