Skip to content

Commit 6fa5d89

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 2dde04e commit 6fa5d89

File tree

5 files changed

+425
-0
lines changed

5 files changed

+425
-0
lines changed

‎docs-aspnet/html-helpers/charts/no-data-template.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: No Data Template
3+
page_title: No Data Template
4+
description: "Learn how to use the No Data Template of the Telerik UI Chart component for {{ site.framework }}."
5+
slug: htmlhelpers_charts_no_data_template
6+
position: 6
7+
---
8+
9+
# No Data Template
10+
11+
The Telerik UI Chart component for {{ site.framework }} allows you 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 you to add styling or interactive elements like buttons to improve usability. Here’s how to set up a custom message for scenarios where the chart data is unavailable.
12+
13+
## Example with Bar Chart
14+
15+
```HtmlHelper
16+
@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
17+
.Name("chart")
18+
.Title("Spain electricity production (GWh)")
19+
.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>"))
20+
.Legend(legend => legend
21+
.Position(ChartLegendPosition.Top)
22+
)
23+
.Series(series => {
24+
series.Column(model => model.Nuclear).Name("Nuclear").CategoryField("Year");
25+
series.Column(model => model.Hydro).Name("Hydro").CategoryField("Year");
26+
series.Column(model => model.Wind).Name("Wind").CategoryField("Year");
27+
})
28+
.CategoryAxis(axis => axis
29+
.Labels(labels => labels.Rotation(-90))
30+
.MajorGridLines(lines => lines.Visible(false))
31+
)
32+
.ValueAxis(axis => axis.Numeric()
33+
.Labels(labels => labels.Format("{0:N0}"))
34+
.MajorUnit(10000)
35+
.Line(line => line.Visible(false))
36+
)
37+
)
38+
```
39+
{% if site.core %}
40+
```TagHelper
41+
@addTagHelper *,Kendo.Mvc
42+
<div class="demo-section wide">
43+
<kendo-chart name="chart">
44+
<no-data 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>"></no-data>
45+
<category-axis>
46+
<category-axis-item>
47+
<labels>
48+
<chart-category-axis-labels-rotation angle="-90" />
49+
</labels>
50+
<major-grid-lines visible="false" />
51+
</category-axis-item>
52+
</category-axis>
53+
<series>
54+
<series-item type="ChartSeriesType.Column" category-field="Year" field="Nuclear" name="Nuclear">
55+
</series-item>
56+
<series-item type="ChartSeriesType.Column" category-field="Year" field="Hydro" name="Hydro">
57+
</series-item>
58+
<series-item type="ChartSeriesType.Column" category-field="Year" field="Wind" name="Wind">
59+
</series-item>
60+
</series>
61+
<value-axis>
62+
<value-axis-item major-unit="10000"
63+
type="numeric">
64+
<labels format="{0:N0}">
65+
</labels>
66+
<line visible="false" />
67+
</value-axis-item>
68+
</value-axis>
69+
<chart-legend position="ChartLegendPosition.Top">
70+
</chart-legend>
71+
<chart-title text="Spain electricity production (GWh)">
72+
</chart-title>
73+
<tooltip format="{0:N0}" visible="true">
74+
</tooltip>
75+
</kendo-chart>
76+
</div>
77+
```
78+
{% endif %}
79+
80+
```JavaScript
81+
<script>
82+
var dataSource;
83+
84+
$(document).on("kendoReady", function () {
85+
$.ajax({
86+
type: "POST",
87+
url: "/bar_charts/_spainelectricityproduction",
88+
cache: false,
89+
dataType: "json",
90+
contentType: "application/json; charset=utf-8",
91+
success: function (json) {
92+
dataSource = new kendo.data.DataSource({
93+
data: json,
94+
sort: {
95+
field: "year",
96+
dir: "asc"
97+
}
98+
})
99+
}
100+
})
101+
102+
$("#button").kendoButton({
103+
icon: "arrow-rotate-cw",
104+
click: function () {
105+
let chart = $("#chart").data("kendoChart");
106+
107+
chart.setDataSource(dataSource);
108+
}
109+
})
110+
})
111+
</script>
112+
```
113+
114+
## Example with Pie Chart.
115+
116+
```HtmlHelper
117+
@(Html.Kendo().Chart(Model)
118+
.Name("chart")
119+
.Title("Break-up of Spain Electricity Production for 2008")
120+
.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>"))
121+
.Legend(legend => legend
122+
.Position(ChartLegendPosition.Bottom)
123+
)
124+
.SeriesColors(new string[] { "#03a9f4", "#ff9800", "#fad84a", "#4caf50" })
125+
.Series(series =>
126+
{
127+
series.Pie(model => model.Percentage, model => model.Source)
128+
.ExplodeField("Explode");
129+
})
130+
.Tooltip(tooltip => tooltip.
131+
Template("${ category } - ${ value }%").Visible(true)
132+
)
133+
)
134+
```
135+
{% if site.core %}
136+
```TagHelper
137+
@addTagHelper *,Kendo.Mvc
138+
@model IEnumerable<Kendo.Mvc.Examples.Models.ElectricitySource>
139+
140+
@{
141+
var seriesColors = new string[] { "#03a9f4", "#ff9800", "#fad84a", "#4caf50" };
142+
}
143+
144+
<div class="demo-section wide">
145+
<kendo-chart name="chart" series-colors="seriesColors">
146+
<chart-title text="Break-up of Spain Electricity Production for 2008"></chart-title>
147+
<no-data 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>"></no-data>
148+
<chart-legend position="ChartLegendPosition.Bottom"></chart-legend>
149+
<series-defaults type="ChartSeriesType.Pie"></series-defaults>
150+
<series>
151+
<series-item category-field="Source"
152+
field="Percentage"
153+
explode-field="Explode"
154+
data="@Model.ToArray()">
155+
</series-item>
156+
</series>
157+
<tooltip visible="true" template="${ category } - ${ value }%"></tooltip>
158+
</kendo-chart>
159+
</div>
160+
```
161+
{% endif %}
162+
163+
```JavaScript
164+
<script>
165+
var dataSource;
166+
167+
$(document).on("kendoReady", function () {
168+
$.ajax({
169+
type: "POST",
170+
url: "/pie_charts/get_local_data",
171+
cache: false,
172+
dataType: "json",
173+
contentType: "application/json; charset=utf-8",
174+
success: function (json) {
175+
dataSource = new kendo.data.DataSource({
176+
data: json,
177+
sort: {
178+
field: "year",
179+
dir: "asc"
180+
}
181+
})
182+
}
183+
})
184+
185+
$("#button").kendoButton({
186+
icon: "arrow-rotate-cw",
187+
click: function () {
188+
let chart = $("#chart").data("kendoChart");
189+
190+
chart.setDataSource(dataSource);
191+
}
192+
})
193+
})
194+
</script>
195+
```
196+
197+
## See Also
198+
199+
* [Using the API of the Chart HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chart-api/index)
200+
* [Basic Usage of the Area Chart HtmlHelper for {{ site.framework }} (Demos)](https://demos.telerik.com/{{ site.platform }}/area-charts/index)
201+
* [Basic Usage of the Kendo UI Area Charts Tag Helper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/area-charts/tag-helper)
202+
* [Server-Side API](/api/chart)

‎docs-aspnet/html-helpers/charts/overview.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,8 @@ You may also need to apply global settings that affect all axes. In such cases,
311311
* [Data binding]({% slug htmlhelpers_charts_databinding_aspnetcore %})—You can populate the Telerik UI Chart for {{ site.framework }} with data by binding it to inline data, local data, or remote data.
312312
* [Appearance]({% slug htmlhelpers_charts_appearance_aspnetcore %})—Unlike other {{ site.product }} components which use only CSS for styling, you can control the appearance of the Chart elements primarily by using JavaScript style options.
313313
* [Scaffolding](% slug scaffoldingchart_aspnetmvc %)—The Chart for {{ site.framework }} enables you to use the Kendo UI Scaffolder Visual Studio extension.
314+
* [No Data Template](% slug htmlhelpers_charts_no_data_template %)—The Chart for {{ site.framework }} allows you to display a message when there is no data to show. Here’s how to set up a custom message for scenarios where the chart data is unavailable.
315+
* [Series Patterns](% slug htmlhelpers_charts_patterns %)—The Telerik UI Chart component for {{ site.framework }} offers customization options for presenting data visually, including support for using patterns in chart series.
314316

315317
## Chart Types
316318

0 commit comments

Comments
 (0)