Hiding legend labels until rendered

[Mark]

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

[Plamen Lazarov]

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

 

 

[Mark]

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

[Plamen Lazarov]

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

 

 

[Mark]

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

[Plamen Lazarov]

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

 

 

[Mark]

Worked perfectly.  Thanks! :)