Skip to content

Commit 6779e7a

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 9e78384 commit 6779e7a

File tree

15 files changed

+667
-119
lines changed

15 files changed

+667
-119
lines changed

‎docs-aspnet/html-helpers/charts/chart-types/donut-charts.md‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
---
2+
title: Donut Charts
3+
page_title: Donut Charts
4+
description: "Learn how to create a Telerik UI Donut Chart for {{ site.framework }}."
5+
slug: donutcharts_aspnetcore_htmlhelper
6+
---
7+
8+
# Donut Charts
9+
10+
{% if site.core %}
11+
The Telerik UI Donut Chart TagHelper and HtmlHelper for {{ site.framework }} are server-side wrappers for the Kendo UI Donut Chart widget.
12+
{% else %}
13+
The Telerik UI Donut Chart HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI Donut Chart widget.
14+
{% endif %}
15+
16+
The Donut Charts are a Pie chart variation with the ability to display data as single-series sectors from a two-dimensional circle.
17+
18+
* [Demo page for the Donut Chart HtmlHelper](https://demos.telerik.com/{{ site.platform }}/donut-charts/index)
19+
{% if site.core %}
20+
* [Demo page for the Donut Chart TagHelper](https://demos.telerik.com/aspnet-core/donut-charts/tag-helper)
21+
{% endif %}
22+
23+
## Getting Started
24+
25+
Donut Charts are suitable for showing the proportions of categorical data, with the size of each piece representing the proportion of each category. In comparison to its [Pie Chart]({% slug piecharts_aspnetcore_htmlhelper %}) predecessor, it helps avoid confusion around the area parameter that often trips people up in a Pie Chart.
26+
27+
To create Donut series in the Chart component, use the `Donut` configuration method within the `Series` configuration.
28+
29+
* [Creating the Donut Chart](#creating-the-donut-chart)
30+
* [Configuring the labels visibility](#configuring-the-labels-visibility)
31+
* [Configuring the labels alignment](#configuring-the-labels-alignment)
32+
* [Configuring the effects overlay](#configuring-the-effects-overlay)
33+
34+
Also, you can configure the Donut Chart for `Inline`, `Local`, and `Remote` data binding.
35+
36+
* [Charts Data Binding](https://docs.telerik.com/{{ site.platform }}/html-helpers/charts/data-binding)
37+
38+
## Creating the Donut Chart
39+
40+
The following example demonstrates how to define a Donut Chart with a single series.
41+
42+
```HtmlHelper
43+
@(Html.Kendo().Chart()
44+
.Name("chart")
45+
.Title("What is you favourite sport?")
46+
.Legend(legend => legend
47+
.Position(ChartLegendPosition.Top)
48+
)
49+
.Series(series => {
50+
series.Donut(new dynamic[] {
51+
new {category = "Football",value = 35},
52+
new {category = "Basketball",value = 25},
53+
new {category = "Volleyball",value = 20},
54+
new {category = "Rugby",value = 10},
55+
new {category = "Tennis",value = 10}
56+
})
57+
.Labels(labels => labels
58+
.Visible(true)
59+
.Position(ChartPieLabelsPosition.OutsideEnd)
60+
.Template("#= category # - #= kendo.format('{0:P}', percentage)#")
61+
.Background("transparent")
62+
);
63+
})
64+
.Tooltip(tooltip => tooltip
65+
.Visible(true)
66+
.Template("#= category # - #= kendo.format('{0:P}', percentage) #")
67+
)
68+
)
69+
```
70+
{% if site.core %}
71+
```TagHelper
72+
<kendo-chart name="chart">
73+
<chart-title text="What is you favourite sport?"></chart-title>
74+
<chart-legend position="ChartLegendPosition.Top"></chart-legend>
75+
<series-defaults type="ChartSeriesType.Donut"></series-defaults>
76+
<series>
77+
<series-item start-angle="150" name="2011" data='new dynamic[] {
78+
new {category = "Football",value = 35},
79+
new {category = "Basketball",value = 25},
80+
new {category = "Volleyball",value = 20},
81+
new {category = "Rugby",value = 10},
82+
new {category = "Tennis",value = 10}
83+
}'>
84+
<labels visible="true"
85+
position="ChartSeriesLabelsPosition.OutsideEnd"
86+
template="#= category # - #= kendo.format('{0:P}', percentage)#"
87+
background="transparent">
88+
</labels>
89+
</series-item>
90+
</series>
91+
<tooltip visible="true" template="#= category # - #= kendo.format('{0:P}', percentage) #"></tooltip>
92+
</kendo-chart>
93+
```
94+
{% endif %}
95+
96+
![{{ site.product_short }} A sample Donut Chart](images/donut-chart-labels-circle.png)
97+
98+
## Configuring the Labels Visibility
99+
100+
You can show or hide the Donut Chart labels through the `Visible()` configuration method for the given series.
101+
102+
```HtmlHelper
103+
.Series(series =>
104+
{
105+
series.Donut(new dynamic[] {})
106+
.Labels(labels => labels
107+
.Visible(true)
108+
);
109+
})
110+
```
111+
{% if site.core %}
112+
```TagHelper
113+
<series-defaults type="ChartSeriesType.Donut"></series-defaults>
114+
<series>
115+
<series-item data='new dynamic[] {}'>
116+
<labels visible="true"></labels>
117+
</series-item>
118+
</series>
119+
```
120+
{% endif %}
121+
122+
## Configuring the Labels Alignment
123+
124+
The Donut Chart allows you to configure the label alignment for the series through the `Align()` method.
125+
126+
```HtmlHelper
127+
.Series(series =>
128+
{
129+
series.Donut(new dynamic[] {})
130+
.Labels(labels => labels
131+
.Align(ChartSeriesLabelsAlign.Circle)
132+
);
133+
})
134+
```
135+
{% if site.core %}
136+
```TagHelper
137+
<series-defaults type="ChartSeriesType.Donut"></series-defaults>
138+
<series>
139+
<series-item data='new dynamic[] {}'>
140+
<labels align="ChartSeriesLabelsAlign.Circle"></labels>
141+
</series-item>
142+
</series>
143+
```
144+
{% endif %}
145+
146+
The Donut Chart supports two modes of label alignment:
147+
148+
* `Circle`(default)&mdash;The labels are positioned in a circle around the Chart.
149+
150+
![{{ site.product_short}} A Donut Chart with circle aligned labels](images/donut-chart-labels-circle.png)
151+
* `Column`&mdash;The labels are positioned in columns to the left and right of the Chart.
152+
153+
![{{ site.product_short}} A Donut Chart with column aligned labels](images/donut-chart-labels-column.png)
154+
155+
156+
## Configuring the Effects Overlay
157+
158+
Each segment has a transparent effect overlay that adds depth to the two-dimensional shape. The overlay transparent gradient is configurable through the `Overlay()` option.
159+
160+
```HtmlHelper
161+
.Series(series =>
162+
{
163+
series.Donut(new dynamic[] {})
164+
.Overlay(o => o.Gradient(ChartSeriesGradient.None));
165+
})
166+
```
167+
{% if site.core %}
168+
```TagHelper
169+
<series-defaults type="ChartSeriesType.Donut"></series-defaults>
170+
<series>
171+
<series-item data='new dynamic[] {}'>
172+
<overlay gradient="ChartSeriesGradient.None" />
173+
</series-item>
174+
</series>
175+
```
176+
{% endif %}
177+
178+
The Donut Chart supports the following `ChartSeriesGradient` options:
179+
180+
* (Default) `RoundedBevel`
181+
182+
![{{ site.product_short }} A Donut Chart with roundedBevel overlay](images/donut-chart-roundedbevel.png)
183+
184+
* `SharpBevel`
185+
186+
![{{ site.product_short }} A Donut Chart with sharpBevel overlay](images/donut-chart-overlay-sharpbevel.png)
187+
188+
* `None`
189+
190+
![{{ site.product_short }} A Donut Chart with no overlay](images/donut-chart-overlay-none.png)
191+
192+
193+
## See Also
194+
195+
* [Basic Usage of the Donut Chart HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/donut-charts/index)
196+
* [Data Binding Options for the Telerik UI for {{ site.framework }} Charts]({% slug htmlhelpers_charts_databinding_aspnetcore %})
197+
* [Server-Side API](/api/chart)

‎docs-aspnet/html-helpers/charts/chart-types/images/donut-chart-labels-circle.png‎

12.3 KB
Loading

‎docs-aspnet/html-helpers/charts/chart-types/images/donut-chart-labels-column.png‎

12.7 KB
Loading

‎docs-aspnet/html-helpers/charts/chart-types/images/donut-chart-overlay-none.png‎

5.93 KB
Loading

‎docs-aspnet/html-helpers/charts/chart-types/images/donut-chart-overlay-sharpbevel.png‎

10.6 KB
Loading

‎docs-aspnet/html-helpers/charts/chart-types/images/donut-chart-roundedbevel.png‎

10.2 KB
Loading

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,7 @@ The Telerik UI for {{ site.framework }} Chart supports an extensive set of serie
328328
| [Funnel Charts]({% slug funnelchart_aspnetcore_htmlhelper %}) | Funnel Charts are suitable for representing stages in a sales process and for showing the amount of the potential revenue from each stage. |
329329
| [Line Charts]({% slug linecharts_aspnetcore_htmlhelper %}) | Line Charts are suitable for displaying quantitative data by using continuous lines passing through points defined by the values of their items. |
330330
| [Pie Charts]({% slug piecharts_aspnetcore_htmlhelper %}) | Pie Charts display data as single-series sectors from a two-dimensional circle which is useful for rendering data as a part of the whole. |
331+
| [Donut Charts]({% slug donutcharts_aspnetcore_htmlhelper %}) | Donut Charts are a Pie chart variation with the ability to display data as single-series sectors from a two-dimensional circle. |
331332

332333
## Referencing Existing Instances
333334

‎docs-aspnet/html-helpers/editors/colorgradient/events.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI ColorGradient component for {{ site.framework }}."
5+
slug: events_colorgradient_aspnetcore
6+
position: 4
7+
---
8+
9+
# Events
10+
11+
The Telerik UI ColorGradient for {{ site.framework }} exposes multiple [events](/api/kendo.mvc.ui.fluent/colorgradienteventbuilder) that allow you to control and customize the behavior of the component.
12+
13+
For a complete example of the basic ColorGradient events, refer to the [demo on using the events of the ColorGradient](https://demos.telerik.com/{{ site.platform }}/colorgradient/events).
14+
15+
## Handling by Handler Name
16+
17+
The following example demonstrates how to subscribe to events by a handler name.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().ColorGradient()
21+
.Name("colorgradient")
22+
.Events(e => e
23+
.Select("onSelect")
24+
.Change("onChange")
25+
)
26+
)
27+
<script>
28+
function onSelect() {
29+
// Handle the select event.
30+
}
31+
32+
function onChange() {
33+
// Handle the change event.
34+
}
35+
</script>
36+
```
37+
{% if site.core %}
38+
```TagHelper
39+
<script>
40+
function onSelect() {
41+
// Handle the select event.
42+
}
43+
44+
function onChange() {
45+
// Handle the change event.
46+
}
47+
</script>
48+
49+
<kendo-colorgradient name="colorgradient"
50+
on-select="onSelect"
51+
on-change="onChange">
52+
</kendo-colorgradient>
53+
```
54+
{% endif %}
55+
56+
## Handling by Template Delegate
57+
58+
The following example demonstrates how to subscribe to events by a template delegate.
59+
60+
```HtmlHelper
61+
@(Html.Kendo().ColorGradient()
62+
.Name("colorgradient")
63+
.Events(e => e
64+
.Select(@<text>
65+
function() {
66+
// Handle the select event inline.
67+
}
68+
</text>)
69+
.Change(@<text>
70+
function() {
71+
// Handle the change event inline.
72+
}
73+
</text>)
74+
)
75+
)
76+
```
77+
{% if site.core %}
78+
```TagHelper
79+
<kendo-colorgradient name="colorgradient"
80+
on-select="function() {
81+
// Handle the select event inline.
82+
}"
83+
on-change="function() {
84+
// Handle the change event inline.
85+
}">
86+
</kendo-colorgradient>
87+
```
88+
{% endif %}
89+
90+
## Next Steps
91+
92+
* [Using the ColorGradient Events (Demo)](https://demos.telerik.com/{{ site.platform }}/colorgradient/events)
93+
94+
## See Also
95+
96+
* [Using the API of the ColorGradient HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorgradient/api)
97+
* [Server-Side API of the ColorGradient](/api/colorgradient)
98+
* [Client-Side API of the ColorGradient](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorgradient)

0 commit comments

Comments
 (0)