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

Hiding legend labels until rendered

6 Answers 219 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 08 Sep 2015, 09:14 AM

Hi there,

Some of our charts take a few seconds to come back from the server.  Initially, the legend at the bottom just shows the unformatted template (see attached screenshot) until the data comes back and it's all good.  Is there a way of hiding this until the actual data has been rendered? 

Thanks, Mark

6 Answers, 1 is accepted

Sort by
0
Plamen Lazarov
Telerik team
answered on 09 Sep 2015, 03:38 PM

Hi Mark,

What you can do in this case is to set the series.name in the dataBound event handler using the chart options which are accessible via the this keyword. 

Here is a basic example - please have a look and let me know if this helps or how I can assist you further. 

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 09 Sep 2015, 04:00 PM

Thanks Plamen,

However, on the databound event I don't know the series labels because the different series are drawn out dynamically.  I tried setting the value to the value it was defined as before, but the Kendo notation doesn't register and just displays as coded below rather than working out the corresponding values (see screenshot) :-

// put series labels back in
        this.options.series[0].name = "#:group.items[0].category#";
        this.options.series[1].name = "#:group.items[0].category#";
        this.options.series[2].name = "#:group.items[0].category#";

 Is there another way I have access to the category name for the series names in the databound event?  Or alternatively, is there a way of just hiding the entire legend initially and then showing it again from the databound event?

Thanks, Mark

0
Plamen Lazarov
Telerik team
answered on 11 Sep 2015, 02:30 PM

Hello Mark,

In this case you can use series.data which will give you the available data items - there you can chose which field to be used for the series name. Please have a look at the updated example. 

http://dojo.telerik.com/OqUPU/3

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 11 Sep 2015, 03:32 PM

Thanks Plamen,

The changing of the values on databound is working fine.  However, it is still showing the legend before this event.  This is what I have in my view :-

@( Html.Kendo().Chart<Models.RiskItemsBarChartModel>()
                .Name("riskItems")
                .ChartArea(chartArea => chartArea.Background("#F5F5F5"))
                .Title(title => title
                    .Text("Risk Items")
                    .Position(ChartTitlePosition.Top))
                .DataSource(ds => ds
                    .Read(read => read.Action("RiskItemsBarChart", "Reporting"))
                            .Group(g => g.Add(d => d.SortOrder))
                    .Sort(g => g.Add(d => d.category))
                )
                .Series(series => series
                    .Bar(d => d.Share, d => d.Color).CategoryField("category")
                    .Name("#:group.items[0].category#")
                    .Stack(true)
                    .Labels(labels => labels
                        .Visible(true)
                        .Template("#= value # (#= dataItem.PercentageField #)")
                        .Position(ChartBarLabelsPosition.InsideBase)
                    )
                )
                .CategoryAxis(axis => axis
                    .Visible(false)
                )
                .ValueAxis(axis => axis
                    .Numeric()
                    .Labels(labels => labels
                        .Visible(false)
                    )
                )
                .Tooltip(tooltip => tooltip
                    .Visible(false)
                )
                .Legend(legend => legend
                    .Visible(true)
                    .Position(ChartLegendPosition.Bottom)
                    .Labels(x => x.Font(font: "9px Arial,Helvetica,sans-serif").Template("#: text #"))
                )
                .Events(events => events
                    .SeriesClick("onSeriesClick_riskItems")
                    .DataBound("onDataBound_riskItems")
                )
            )

Please can you advise what I need to do.

Thanks, Mark

0
Accepted
Plamen Lazarov
Telerik team
answered on 15 Sep 2015, 02:16 PM

Hello Mark,

Thank you for the follow-up. 

I would suggest an alternative approach. You can hide the legend initially with .Visible(false) and show it in the dataBound event. In this way the legend will stay hidden until the required information for it becomes avaialble. I prepared a basic example for your convenience.

Please try the approach above and let me know if further assistance is required.

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 15 Sep 2015, 03:11 PM
Worked perfectly.  Thanks! :)
Tags
Charts
Asked by
Mark
Top achievements
Rank 1
Answers by
Plamen Lazarov
Telerik team
Mark
Top achievements
Rank 1
Share this question
or