Strange legend text while chart is rendering

[Shawn]

I have a chart that uses grouping and creates a legend at the top of the chart.  While the chart is rendering, the legend that appears at the top of the chart contains 'd NaN/NaN/0NaN' as seen in the attached screenshot.  The legends should contain dates in the format of 'ddd dd/MM/yyyy', so I'm assuming the dates are not yet known, so the legend is displaying in this way.

Is there a way of hiding this until the legend actually has data, because having 'd NaN/NaN/0NaN' show up in the chart does not look good.

Regards,

Shawn

[Daniel]

Hello Shawn,

Assuming that you are using a template to format the date, you could could check if there is value before applying the format in order to avoid this - example.

Regards,
Daniel
Telerik by Progress

[Shawn]

Daniel,

Thank you for the reply.  I am using a template for the legend formatting and I added in your suggestion of checking the value with a ternary expression, but the legend still appears with that text as the chart is rendering.  Here is my chart code:

@{
    var styleChart = "height: " + Request.Cookies["DefChartHeight"].Value + "px;";
}
<div id="HourlySales7Days" class="panel panel-default">

    <div class="demo-section k-content wide">

        @(Html.Kendo().Chart<CBECloudBO2.ViewModels.ChartHourlySales7Day>()

            .Name("chartHourlySales7Days")

            .Title("Hourly Sales 7-day Comparitive")

            .Theme("silver")

            .DataSource(datasource => datasource

                    .Read(read => read.Action("Chart_HourlySales7Day", "Home"))

                    .Group(group => group.Add(model => model.SaleDate))

                    .Sort(sort => sort.Add(model => model.Hour).Ascending())

                    )

            .HtmlAttributes(new { style = @styleChart })

            .Events(events => events.Render("onChartRender"))

            .Legend(legend => legend

                .Visible(true)

                .Position(ChartLegendPosition.Top)

                .Labels(label => label.Template("#= text ? kendo.toString(new Date(text), 'ddd dd/MM/yyyy') : ''#"))

                )

            .ChartArea(chartArea => chartArea.Background("transparent"))

            .Series(series =>

            {

                series.Column(model => model.Value).Name("#= group.value #").CategoryField("Hour");

            })

            .CategoryAxis(axis => axis

                .Name("series-axis")

                .Title("Store Hour")

                .Categories(p => p.Hour)

            )

            .ValueAxis(axis => axis

                .Numeric()

                .Title("Sale Totals")

                .AxisCrossingValue(0, int.MinValue)

            )

            .Tooltip(tooltip => tooltip

                .Visible(true)

                .Format("{0}%")

                .Template("#= kendo.toString(new Date(series.name), 'ddd dd/MM/yyyy') #: #= value #")

            )

        )

    </div>

    <div class="chart-loading"></div>

</div>

 

The 'onChartRender' function for the Onrender event is simply cancelling the kendo.ui.progress graphic element that is displayed while the chart is rendering.

Anything else I can try?

Regards,

Shawn

[Daniel]

Hi,

Could you try removing the series.name option?

Regards,
Daniel
Telerik by Progress

[Shawn]

Daniel,

I removed the .Name("#= group.value #") from the Series and now the legend only displays that NaN text even after fully rendering. See attached screenshot.

Regards,

Shawn

[Shawn]

Daniel,

The version of the Kendo.Mvc we are using is:  2016.3.1028.545

Regards,

Shawn

[Daniel]

Hello Shawn,

In that case could you provide a runnable sample that demonstrates the issue? I am unable to replicate it using the provided configuration and specified version.

Regards,
Daniel
Telerik by Progress