Skip to content

Commit a18cb9d

Browse files
svdimitrntacheva
svdimitr
and
ntacheva
authored
Documentation - Linear Gauge (#257)
* feat(linear-gauge): initial commit * chore(linear-gauge): major improvements * chore(linear-gauge): add to config.yml * chore(linear-gauge): add to config.yml categories * chore(gauge): minor overview improvement * chore(gauge): overview improvements * chore(gauge): ranges article * chore(linear-gauge):add parameters labels image * chore(gauge): imrpovements * chore(config): fix slug * chore(gauge): fix slugs and config file * chore(gauge): improvements overview * chore(gauge): fix not working anchor * chore(gauge); remove class parameter * chore(gauge): fix naming in config file * chore(gauge): improvements * chore(gauge): improvements overview article * chore(gauge): improvements overview article * chore(gauge): remove tripple pointers from examples where applicable * chore(gauge); add customization section * chore(gauge): custom pointer track Co-authored-by: Nadezhda Tacheva <[email protected]>
1 parent e0a694d commit a18cb9d

27 files changed

+1249
-6
lines changed

‎_config.yml‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -192,8 +192,8 @@ navigation:
192192
title: "TreeList"
193193
"*spreadsheet":
194194
title: "Spreadsheet"
195-
"*arcgauge":
196-
title: "ArcGauge"
195+
"*gauge-arc":
196+
title: "Gauge - Arc"
197197
"*autocomplete":
198198
title: "AutoComplete"
199199
"*barcode":
@@ -257,8 +257,10 @@ navigation:
257257
title: "FlatColorPicker"
258258
"*gantt":
259259
title: "Gantt"
260-
"*lineargauge":
261-
title: "LinearGauge"
260+
"*gauge-linear":
261+
title: "Gauge - Linear"
262+
"*gauge-circular":
263+
title: "Gauge - Circular"
262264
"*listbox":
263265
title: "ListBox"
264266
"*loader":
@@ -287,8 +289,8 @@ navigation:
287289
title: "QRCode"
288290
"*/radiobutton":
289291
title: "RadioButton"
290-
"*radialgauge":
291-
title: "RadialGauge"
292+
"*gauge-radial":
293+
title: "Gauge - Radial"
292294
"*rangeslider":
293295
title: "RangeSlider"
294296
"*responsivepanel":
@@ -429,6 +431,10 @@ intro_columns:
429431
"Radar Column Charts": "chart-types-radarcolumn"
430432
"Radar Line Charts": "chart-types-radarline"
431433
"Stock Chart": "stockchart-overview"
434+
"Linear Gauge": "linear-gauge-overview"
435+
"Radial Gauge": "radial-gauge-overview"
436+
"Arc Gauge": "arc-gauge-overview"
437+
"Circular Gauge": "circular-gauge-overview"
432438

433439
-
434440

‎_contentTemplates/gauges/additional-customization.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#linear-gauge-additional-customization
2+
To further customize the elements of the linear gauge you can use nested tags. When configuring nested properties and child elements in your Linear Gauge, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be `<LinearGauge*Category**Specifics*>` where the **Category** can be one of the following:
3+
4+
* Scale
5+
* GaugeArea
6+
* Pointers
7+
#end
8+
9+
10+

‎components/gauge-arc/overview.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: Overview
3+
page_title: Arc Gauge Overview
4+
description: Overview of the Arc Gauge for Blazor.
5+
slug: arc-gauge-overview
6+
tags: telerik,blazor,chart,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# Chart Overview
12+
13+
The <a href="https://www.telerik.com/blazor-ui/chart" target="_blank">Blazor Chart component</a> allows you to visualize data to your users in a meaningful way so they can draw conclusions. You can use a variety of chart types and control all aspects of the chart's appearance - from colors and fonts, to paddings, margins and templates.
14+
15+
#### To use a Telerik chart for Blazor, add the `TelerikChart` tag.
16+
17+
>caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings
18+
19+
````CSHTML
20+
Basic chart and common settings/elements
21+
22+
<TelerikChart>
23+
<ChartSeriesItems>
24+
<ChartSeries Type="ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@simpleData">
25+
</ChartSeries>
26+
<ChartSeries Type="ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
27+
<ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
28+
</ChartSeries>
29+
</ChartSeriesItems>
30+
31+
<ChartValueAxes>
32+
<ChartValueAxis Color="red"></ChartValueAxis>
33+
</ChartValueAxes>
34+
35+
<ChartCategoryAxes>
36+
<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
37+
</ChartCategoryAxes>
38+
39+
<ChartTitle Text="Quarterly sales trend"></ChartTitle>
40+
41+
<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
42+
</ChartLegend>
43+
</TelerikChart>
44+
45+
@code {
46+
public class MyDataModel
47+
{
48+
public int SecondSeriesValue { get; set; }
49+
public string ExtraData { get; set; }
50+
51+
}
52+
53+
public List<MyDataModel> modelData = new List<MyDataModel>()
54+
{
55+
new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
56+
new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
57+
new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
58+
new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
59+
};
60+
61+
public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };
62+
63+
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
64+
}
65+
````
66+
67+
>caption The result from the code snippet above
68+
69+
![](images/overview-chart.png)
70+
71+
72+
73+
@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)
74+
75+
>caption Component namespace and reference
76+
77+
````CSHTML
78+
@using Telerik.Blazor.Components
79+
80+
<TelerikChart @ref="myChartRef">
81+
</TelerikChart>
82+
83+
@code {
84+
Telerik.Blazor.Components.TelerikChart myChartRef;
85+
}
86+
````
87+
88+
## Chart Size
89+
90+
To control the chart size, use its `Width` and `Height` properties. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article.
91+
92+
You can also set the chart size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample.
93+
94+
95+
>caption Change the 100% chart size dynamically to have a responsive chart
96+
97+
````CSHTML
98+
You can make a responsive chart
99+
100+
<TelerikButton OnClick="@ResizeChart">Resize the container and redraw the chart</TelerikButton>
101+
102+
<div style="border: 1px solid red;width:@ContainerWidth; height: @ContainerHeight">
103+
104+
<TelerikChart Width ="100%" Height="100%" @ref="theChart">
105+
106+
<ChartSeriesItems>
107+
<ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@someData">
108+
</ChartSeries>
109+
</ChartSeriesItems>
110+
<ChartCategoryAxes>
111+
<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
112+
</ChartCategoryAxes>
113+
<ChartTitle Text="Quarterly sales trend"></ChartTitle>
114+
115+
</TelerikChart>
116+
117+
</div>
118+
119+
@code {
120+
string ContainerWidth { get; set; } = "400px";
121+
string ContainerHeight { get; set; } = "300px";
122+
Telerik.Blazor.Components.TelerikChart theChart { get; set; }
123+
124+
async Task ResizeChart()
125+
{
126+
//resize the container
127+
ContainerHeight = "500px";
128+
ContainerWidth = "800px";
129+
130+
//give time to the framework and browser to resize the actual DOM so the chart can use the expected size
131+
await Task.Delay(20);
132+
133+
//redraw the chart
134+
theChart.Refresh();
135+
}
136+
137+
public List<object> someData = new List<object>() { 10, 2, 7, 5 };
138+
139+
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
140+
}
141+
````
142+
143+
## See Also
144+
145+
* [Data Binding]({%slug components/chart/databind%})
146+
* [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index)
147+
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChart)

‎components/gauge-circular/overview.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: Overview
3+
page_title: Chart Overview
4+
description: Overview of the Chart for Blazor.
5+
slug: circular-gauge-overview
6+
tags: telerik,blazor,chart,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# Chart Overview
12+
13+
The <a href="https://www.telerik.com/blazor-ui/chart" target="_blank">Blazor Chart component</a> allows you to visualize data to your users in a meaningful way so they can draw conclusions. You can use a variety of chart types and control all aspects of the chart's appearance - from colors and fonts, to paddings, margins and templates.
14+
15+
#### To use a Telerik chart for Blazor, add the `TelerikChart` tag.
16+
17+
>caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings
18+
19+
````CSHTML
20+
Basic chart and common settings/elements
21+
22+
<TelerikChart>
23+
<ChartSeriesItems>
24+
<ChartSeries Type="ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@simpleData">
25+
</ChartSeries>
26+
<ChartSeries Type="ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
27+
<ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
28+
</ChartSeries>
29+
</ChartSeriesItems>
30+
31+
<ChartValueAxes>
32+
<ChartValueAxis Color="red"></ChartValueAxis>
33+
</ChartValueAxes>
34+
35+
<ChartCategoryAxes>
36+
<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
37+
</ChartCategoryAxes>
38+
39+
<ChartTitle Text="Quarterly sales trend"></ChartTitle>
40+
41+
<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
42+
</ChartLegend>
43+
</TelerikChart>
44+
45+
@code {
46+
public class MyDataModel
47+
{
48+
public int SecondSeriesValue { get; set; }
49+
public string ExtraData { get; set; }
50+
51+
}
52+
53+
public List<MyDataModel> modelData = new List<MyDataModel>()
54+
{
55+
new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
56+
new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
57+
new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
58+
new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
59+
};
60+
61+
public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };
62+
63+
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
64+
}
65+
````
66+
67+
>caption The result from the code snippet above
68+
69+
![](images/overview-chart.png)
70+
71+
72+
73+
@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)
74+
75+
>caption Component namespace and reference
76+
77+
````CSHTML
78+
@using Telerik.Blazor.Components
79+
80+
<TelerikChart @ref="myChartRef">
81+
</TelerikChart>
82+
83+
@code {
84+
Telerik.Blazor.Components.TelerikChart myChartRef;
85+
}
86+
````
87+
88+
## Chart Size
89+
90+
To control the chart size, use its `Width` and `Height` properties. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article.
91+
92+
You can also set the chart size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample.
93+
94+
95+
>caption Change the 100% chart size dynamically to have a responsive chart
96+
97+
````CSHTML
98+
You can make a responsive chart
99+
100+
<TelerikButton OnClick="@ResizeChart">Resize the container and redraw the chart</TelerikButton>
101+
102+
<div style="border: 1px solid red;width:@ContainerWidth; height: @ContainerHeight">
103+
104+
<TelerikChart Width ="100%" Height="100%" @ref="theChart">
105+
106+
<ChartSeriesItems>
107+
<ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@someData">
108+
</ChartSeries>
109+
</ChartSeriesItems>
110+
<ChartCategoryAxes>
111+
<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
112+
</ChartCategoryAxes>
113+
<ChartTitle Text="Quarterly sales trend"></ChartTitle>
114+
115+
</TelerikChart>
116+
117+
</div>
118+
119+
@code {
120+
string ContainerWidth { get; set; } = "400px";
121+
string ContainerHeight { get; set; } = "300px";
122+
Telerik.Blazor.Components.TelerikChart theChart { get; set; }
123+
124+
async Task ResizeChart()
125+
{
126+
//resize the container
127+
ContainerHeight = "500px";
128+
ContainerWidth = "800px";
129+
130+
//give time to the framework and browser to resize the actual DOM so the chart can use the expected size
131+
await Task.Delay(20);
132+
133+
//redraw the chart
134+
theChart.Refresh();
135+
}
136+
137+
public List<object> someData = new List<object>() { 10, 2, 7, 5 };
138+
139+
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
140+
}
141+
````
142+
143+
## See Also
144+
145+
* [Data Binding]({%slug components/chart/databind%})
146+
* [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index)
147+
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChart)

‎components/gauge-linear/images/arrow-pointers.png‎

1.82 KB
Loading

‎components/gauge-linear/images/basic-linear-gauge.png‎

1.81 KB
Loading

‎components/gauge-linear/images/color-parameter-labels.png‎

1.73 KB
Loading

‎components/gauge-linear/images/color-parameter-ranges.png‎

1.82 KB
Loading

‎components/gauge-linear/images/color-parameter.png‎

1.9 KB
Loading

‎components/gauge-linear/images/custom-pointer-track.png‎

1.39 KB
Loading

0 commit comments

Comments
 (0)