Skip to content

Commit a403415

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent e1b21aa commit a403415

File tree

21 files changed

+928
-285
lines changed

21 files changed

+928
-285
lines changed

‎docs-aspnet/html-helpers/gauges/circulargauge/colors.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: Colors
3+
page_title: Colors
4+
description: "Learn how to set the colors of the Telerik UI Circular Gauge component for {{ site.framework }}."
5+
slug: colors_circulargaugehelper_aspnetcore
6+
position: 3
7+
---
8+
9+
# Circular Gauge Colors
10+
11+
The scale of the Circular Gauge can show different colors for different values. This allows for a diversified usage of the widget. The `Colors` option accepts a set of ranges with a respective `Color` option:
12+
13+
````HtmlHelper
14+
@(Html.Kendo().CircularGauge()
15+
.Name("gauge")
16+
.Value(65)
17+
.Scale(x => x.Min(0).Max(100))
18+
.CenterTemplate("<span style='color: #: color #;'>#: value #%</span>")
19+
.Colors(colors =>
20+
{
21+
colors.Add().From(0).To(25).Color("#0058e9");
22+
colors.Add().From(25).To(50).Color("#37b400");
23+
colors.Add().From(50).To(75).Color("#ffc000");
24+
colors.Add().From(75).To(100).Color("#f31700");
25+
})
26+
)
27+
````
28+
{% if site.core %}
29+
```TagHelper
30+
<kendo-circulargauge name="gauge" value="65" center-template="<span style='color: #: color #;'>#: value #%</span>">
31+
<scale min="0" max="100">
32+
</scale>
33+
<colors>
34+
<color from="0" to="25" color="#0058e9" />
35+
<color from="25" to="50" color="#37b400" />
36+
<color from="50" to="75" color="#ffc000" />
37+
<color from="75" to="100" color="#f31700" />
38+
</colors>
39+
</kendo-circulargauge>
40+
```
41+
{% endif %}
42+
43+
## See Also
44+
45+
* [Overview of the Circular Gauge]({%slug overview_circulargaugehelper_aspnetcore%})
46+
* [Scale of the Circular Gauge]({%slug scale_circulargaugehelper_aspnetcore%})

‎docs-aspnet/html-helpers/gauges/circulargauge/export.md‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
---
2+
title: Export
3+
page_title: Export
4+
description: "Learn how to use the Export Options of the Telerik UI Circular Gauge component for {{ site.framework }}."
5+
slug: export_circulargaugehelper_aspnetcore
6+
position: 4
7+
---
8+
9+
# Circular Gauge Export
10+
11+
The Telerik UI Circular Gauge for {{ site.framework }} export relies on the [Telerik UI DrawingAPI library](https://docs.telerik.com/kendo-ui/framework/drawing/dom-elements/overview). It enables you to export the content as:
12+
13+
* [PDF](#export-to-pdf)
14+
15+
* [Image](#export-to-image)
16+
17+
* [SVG](#export-to-svg)
18+
19+
## Export as PDF
20+
21+
The circular gauge allows you to retrieve the PDF representation of the content via the [exportPDF method](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/circulargauge/methods/exportpdf). The `base64` result can be forwarded to a service or downloaded on the client-side.
22+
23+
```HtmlHelper
24+
<button class='export-pdf k-button'>Export as PDF</button>
25+
26+
@(Html.Kendo().CircularGauge()
27+
.Name("gauge")
28+
.Value(65)
29+
.Scale(x => x.MajorUnit(20).MinorUnit(5))
30+
)
31+
32+
<script>
33+
$(document).ready( function () {
34+
$(".export-pdf").click(function () {
35+
var gauge = $("#gauge").getKendoCircularGauge();
36+
gauge.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
37+
kendo.saveAs({
38+
dataURI: data,
39+
fileName: "chart.pdf",
40+
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
41+
});
42+
});
43+
});
44+
});
45+
</script>
46+
```
47+
{% if site.core %}
48+
```TagHelper
49+
<button class='export-pdf k-button'>Export as PDF</button>
50+
51+
<kendo-circulargauge name="gauge" value="65">
52+
<scale major-unit="20" minor-unit="5">
53+
</scale>
54+
</kendo-circulargauge>
55+
56+
<script>
57+
$(document).ready( function () {
58+
$(".export-pdf").click(function () {
59+
var gauge = $("#gauge").getKendoCircularGauge();
60+
gauge.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
61+
kendo.saveAs({
62+
dataURI: data,
63+
fileName: "chart.pdf",
64+
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
65+
});
66+
});
67+
});
68+
});
69+
</script>
70+
```
71+
{% endif %}
72+
73+
## Export as Image
74+
75+
The Circular Gauge allows you to retrieve the Image representation of the content through the [`exportImage` method](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/circulargauge/methods/exportimage). The `base64` result can be forwarded to a service or downloaded on the client-side.
76+
77+
```HtmlHelper
78+
<button class='export-img k-button'>Export as Image</button>
79+
80+
@(Html.Kendo().CircularGauge()
81+
.Name("gauge")
82+
.Value(65)
83+
.Scale(x => x.MajorUnit(20).MinorUnit(5))
84+
)
85+
86+
<script>
87+
$(document).ready( function () {
88+
$(".export-img").click(function () {
89+
var gauge = $("#gauge").getKendoCircularGauge();
90+
gauge.exportImage().done(function (data) {
91+
kendo.saveAs({
92+
dataURI: data,
93+
fileName: "chart.png",
94+
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
95+
});
96+
});
97+
});
98+
});
99+
</script>
100+
```
101+
{% if site.core %}
102+
```TagHelper
103+
<button class='export-img k-button'>Export as Image</button>
104+
105+
<kendo-circulargauge name="gauge" value="65">
106+
<scale major-unit="20" minor-unit="5">
107+
</scale>
108+
</kendo-circulargauge>
109+
110+
<script>
111+
$(document).ready( function () {
112+
$(".export-img").click(function () {
113+
var gauge = $("#gauge").getKendoCircularGauge();
114+
gauge.exportImage().done(function (data) {
115+
kendo.saveAs({
116+
dataURI: data,
117+
fileName: "chart.png",
118+
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
119+
});
120+
});
121+
});
122+
});
123+
</script>
124+
```
125+
{% endif %}
126+
127+
## Export as SVG
128+
129+
The Circular Gauge allows you to retrieve the Scalable Vector Graphics (SVG) representation of the content through the [`exportSVG` method](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/circulargauge/methods/exportsvg). The `base64` result can be forwarded to a service or downloaded on the client-side.
130+
131+
```HtmlHelper
132+
<button class='export-svg k-button'>Export as SVG</button>
133+
134+
@(Html.Kendo().CircularGauge()
135+
.Name("gauge")
136+
.Value(65)
137+
.Scale(x => x.MajorUnit(20).MinorUnit(5))
138+
)
139+
140+
<script>
141+
$(document).ready( function () {
142+
$(".export-svg").click(function () {
143+
var gauge = $("#gauge").getKendoCircularGauge();
144+
gauge.exportSVG().done(function (data) {
145+
kendo.saveAs({
146+
dataURI: data,
147+
fileName: "chart.svg",
148+
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
149+
});
150+
});
151+
});
152+
});
153+
</script>
154+
```
155+
{% if site.core %}
156+
```TagHelper
157+
<button class='export-svg k-button'>Export as SVG</button>
158+
159+
<kendo-circulargauge name="gauge" value="65">
160+
<scale major-unit="20" minor-unit="5">
161+
</scale>
162+
</kendo-circulargauge>
163+
164+
<script>
165+
$(document).ready( function () {
166+
$(".export-svg").click(function () {
167+
var gauge = $("#gauge").getKendoCircularGauge();
168+
gauge.exportSVG().done(function (data) {
169+
kendo.saveAs({
170+
dataURI: data,
171+
fileName: "chart.svg",
172+
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
173+
});
174+
});
175+
});
176+
});
177+
</script>
178+
```
179+
{% endif %}
180+
181+
182+
## See Also
183+
184+
* [Overview of the CircularGauge]({%slug overview_circulargaugehelper_aspnetcore%})
185+
* [scale of the CircularGauge]({%slug scale_circulargaugehelper_aspnetcore%})

‎docs-aspnet/html-helpers/gauges/circulargauge/getting-started.md‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
title: Getting Started
3+
page_title: Getting Started
4+
description: "Make your first steps with the Telerik UI for {{ site.framework }} Circular Gauge component by following a complete step-by-step tutorial."
5+
slug: circulargauge_getting_started
6+
position: 1
7+
---
8+
9+
# Getting Started with the Circular Gauge
10+
11+
This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} Circular Gauge and highlights the major steps in the configuration of the component.
12+
13+
You will initialize a Circular Gauge and configure its `Scale`, which is responsible for the visualization of the gauge. Then, you will handle the basic JavaScript `keydown` event to acknowledge when the user presses the `Up` or `Down` arrow keys and update the value of the Circular Gauge using its client-side reference. {% if site.core %}Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the components.{% endif %}
14+
15+
![Sample Telerik UI for {{ site.framework }} Circular Gauge](./images/circulargauge-getting-started.png)
16+
17+
@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites)
18+
19+
## 1. Prepare the CSHTML File
20+
@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
21+
22+
Optionally, you can structure the document by adding the desired HTML elements like headings, divs, and paragraphs. In this tutorial, you will also apply some styles to the gauge and its container.
23+
24+
```html
25+
<style>
26+
#gauge-container {
27+
width: 386px;
28+
height: 386px;
29+
text-align: center;
30+
margin: 20px auto 30px auto;
31+
}
32+
33+
#gauge {
34+
width: 350px;
35+
height: 300px;
36+
margin: 0 auto;
37+
}
38+
</style>
39+
<div id="example">
40+
41+
<div id="gauge-container">
42+
<p>Modify the Temperature with the Up and Down Arrows of the Keyboard</p>
43+
<!-- Component Configuration -->
44+
</div>
45+
</div>
46+
```
47+
48+
## 2. Initialize the Circular Gauge
49+
50+
Use the Circular Gauge HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:
51+
52+
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the Circular Gauge element.
53+
* Configure the text in the center of the gauge with the `CenterTemplate` property.
54+
* Set the color of the value pointer with the `Color` configuration method.
55+
* Utilize the `Value` method to set an initial value for the Circular Gauge.
56+
57+
```HtmlHelper
58+
@using Kendo.Mvc.UI
59+
60+
@(Html.Kendo().CircularGauge()
61+
.Name("gauge")
62+
.Value(55)
63+
.Color("#1274AC")
64+
.CenterTemplate("Temperature")
65+
)
66+
```
67+
{% if site.core %}
68+
```TagHelper
69+
@using Kendo.Mvc.UI
70+
@addTagHelper *, Kendo.Mvc
71+
72+
<kendo-circulargauge name="gauge" value="55" center-template="Temperature" color="#1274AC">
73+
</kendo-circulargauge>
74+
```
75+
{% endif %}
76+
77+
## 3. Configure the Circular Gauge
78+
79+
Configure the [Scale](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/circulargaugebuilder#scalesystemaction) configuration method of the Circular Gauge. It exposes the [CircularGaugeSettingsBuilder](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/circulargaugescalesettingsbuilder) which allows you to then set up the `Min`, `Max`, `MajorTicks`, `MinorTicks`, `Labels` and `Reverse` properties.
80+
81+
```HtmlHelper
82+
@using Kendo.Mvc.UI
83+
84+
@(Html.Kendo().CircularGauge()
85+
.Name("gauge")
86+
.Value(55)
87+
.Scale(x =>
88+
x.Min(0)
89+
.Max(140)
90+
.MajorTicks(M=>M.Visible(true))
91+
.MinorTicks(m => m.Visible(true))
92+
.Labels(l => l.Visible(true))
93+
)
94+
.Color("#1274AC")
95+
.CenterTemplate("Temperature")
96+
)
97+
```
98+
{% if site.core %}
99+
```TagHelper
100+
@using Kendo.Mvc.UI
101+
@addTagHelper *, Kendo.Mvc
102+
103+
<kendo-circulargauge name="gauge" value="55" center-template="Temperature" color="#1274AC">
104+
<scale min="0" max="140">
105+
<major-ticks visible="true"/>
106+
<minor-ticks visible="true"/>
107+
<labels visible="true"/>
108+
</scale>
109+
</kendo-circulargauge>
110+
```
111+
{% endif %}
112+
113+
114+
## 4. (Optional) Reference Existing Circular Gauge Instances
115+
116+
You can reference the Circular Gauge instances that you have created and build on top of their existing configuration:
117+
118+
1. Use the `id` attribute of the component instance to establish a reference.
119+
120+
```JavaScript
121+
$(document).ready( function (e) {
122+
var circulargaugeReference = $("#gauge").data("kendoCircularGauge"); // circulargaugeReference is a reference to the existing Circular Gauge instance of the helper.
123+
});
124+
```
125+
126+
1. Use the [Circular Gauge client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/circulargauge#methods) to control the behavior of the component. In this example, you will use the [`value`](https://docs.telerik.com/kendo-ui/api/javascript/ui/circulargauge/methods/value) method to change the value of the Circular Gauge when the user presses the ArrowUp or ArrowDown keyboard buttons.
127+
128+
```JavaScript
129+
$("body").on("keydown",function(e){
130+
if(e.key=="ArrowUp"){
131+
updateValue(1);
132+
}else if(e.key=="ArrowDown"){
133+
updateValue(-1);
134+
}
135+
})
136+
137+
function updateValue(number) {
138+
var gauge = $("#gauge").data("kendoCircularGauge");
139+
gauge.value(gauge.value()+number);
140+
}
141+
```
142+
143+
{% if site.core %}
144+
## Explore this Tutorial in REPL
145+
146+
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
147+
148+
* [Sample code with the Circular Gauge HtmlHelper](https://netcorerepl.telerik.com/mHOsOmlJ43UV35SA53)
149+
* [Sample code with the Circular Gauge TagHelper](https://netcorerepl.telerik.com/GdkWOmbJ43QAvWvk39)
150+
151+
{% endif %}
152+
153+
## Next Steps
154+
155+
* [Explore the Scale Options of the Circular Gauge]({% slug scale_circulargaugehelper_aspnetcore %})
156+
* [Customize the Color of the Circular Gauge]({% slug colors_circulargaugehelper_aspnetcore %})
157+
158+
## See Also
159+
160+
* [Using the API of the Circular Gauge for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/circulargauge/api)
161+
* [Client-Side API of the Circular Gauge](https://docs.telerik.com/kendo-ui/api/javascript/ui/circulargauge)
162+
* [Server-Side API of the Circular Gauge](/api/circulargauge)
163+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/gauges/circulargauge/images/circulargauge-getting-started.png‎

26.2 KB
Loading

0 commit comments

Comments
 (0)