No Data Template
The Telerik UI Chart component for ASP.NET MVC allows to display a message when there is no data to show. This feature is particularly useful when loading data asynchronously, as it reassures users that data may appear after a delay. Customizing the No Data Template is simple, enabling to add styling or interactive elements like buttons to improve usability. The No Data Template can be used for all chart types. Here’s how to set up a custom message for scenarios where the chart data is unavailable.
Example with Bar Chart
@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
.Name("chart")
.Title("Spain electricity production (GWh)")
.NoData(n => n.Template("<div class=\"empty-template\">\r\n<p>There is no data to display.</p>\r\n<button id=\"button\" type=\"button\">Load Data</button>\r\n</div>"))
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.Series(series => {
series.Column(model => model.Nuclear).Name("Nuclear").CategoryField("Year");
series.Column(model => model.Hydro).Name("Hydro").CategoryField("Year");
series.Column(model => model.Wind).Name("Wind").CategoryField("Year");
})
.CategoryAxis(axis => axis
.Labels(labels => labels.Rotation(-90))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.MajorUnit(10000)
.Line(line => line.Visible(false))
)
)
<script>
var dataSource;
$(document).on("ready", function () {
$.ajax({
type: "POST",
url: "/bar_charts/_spainelectricityproduction",
cache: false,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (json) {
dataSource = new kendo.data.DataSource({
data: json,
sort: {
field: "year",
dir: "asc"
}
})
}
})
$("#button").kendoButton({
icon: "arrow-rotate-cw",
click: function () {
let chart = $("#chart").data("kendoChart");
chart.setDataSource(dataSource);
}
})
})
</script>
Example with Pie Chart.
@(Html.Kendo().Chart(Model)
.Name("chart")
.Title("Break-up of Spain Electricity Production for 2008")
.NoData(n => n.Template("<div class=\"empty-template\">\r\n<p>There is no data to display.</p>\r\n<button id=\"button\" type=\"button\">Load Data</button>\r\n</div>"))
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.SeriesColors(new string[] { "#03a9f4", "#ff9800", "#fad84a", "#4caf50" })
.Series(series =>
{
series.Pie(model => model.Percentage, model => model.Source)
.ExplodeField("Explode");
})
.Tooltip(tooltip => tooltip.
Template("${ category } - ${ value }%").Visible(true)
)
)
<script>
var dataSource;
$(document).on("ready", function () {
$.ajax({
type: "POST",
url: "/pie_charts/get_local_data",
cache: false,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (json) {
dataSource = new kendo.data.DataSource({
data: json,
sort: {
field: "year",
dir: "asc"
}
})
}
})
$("#button").kendoButton({
icon: "arrow-rotate-cw",
click: function () {
let chart = $("#chart").data("kendoChart");
chart.setDataSource(dataSource);
}
})
})
</script>
Intergation with Template Component
The Telerik Template component can be integrated to further enhance the No Data Template. For example, the Html.Kendo().Template() approach can be used to add more complex UI elements, such as buttons or forms, directly within the template. Here is an example:
@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
.Name("chart")
.DataSource(ds => ds.Read(read => read.Action("_SpainElectricityProduction", "Bar_Charts")))
.Series(series =>
{
series.Column(model => model.Nuclear).Name("Nuclear").CategoryField("Year");
series.Column(model => model.Wind).Name("Wind").CategoryField("Year");
})
.NoData(nd => nd.Template(Html.Kendo().Template().AddHtml(@<text>No Data To display</text>).AddComponent(c => c.Button().Name("btn").Content("Reload").Events(ev => ev.Click("implementReloadFunctionality")))))
)