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
6 Answers, 1 is accepted
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
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
Could you try removing the series.name option?
Regards,
Daniel
Telerik by Progress
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
Daniel,
The version of the Kendo.Mvc we are using is: 2016.3.1028.545
Regards,
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