Skip to content

Commit b54fdfe

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 96b6dc5 commit b54fdfe

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+2327
-313
lines changed

‎docs-aspnet-core/_config.yml‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,15 +156,24 @@ navigation:
156156
position: 50
157157
"html-helpers/charts":
158158
title: "Charts"
159+
"html-helpers/charts/chart":
160+
title: "Chart"
161+
position: 1
159162
"html-helpers/charts/chart-types":
160163
title: "Chart Types"
164+
position: 2
165+
"html-helpers/charts/elements":
166+
title: "Elements"
161167
position: 3
168+
"html-helpers/charts/sparkline":
169+
title: "Sparkline"
170+
position: 4
162171
"html-helpers/charts/stockchart":
163172
title: "StockChart"
164-
position: 4
173+
position: 5
165174
"html-helpers/charts/treemap":
166175
title: "TreeMap"
167-
position: 5
176+
position: 6
168177
"html-helpers/gauges":
169178
title: "Gauges"
170179
"html-helpers/barcodes":

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,7 @@ To configure the axes, use the `CategoryAxis` and `ValueAxis`. Multiple value ax
5050

5151
The configuration from the previous example results in the following Area Chart.
5252

53-
**Figure 1: A sample Area Chart**
54-
55-
![Area Chart](images/chart-area.png)
53+
![A simple Area Chart](images/chart-area.png)
5654

5755
## Configuring the Line Styles
5856

@@ -64,13 +62,11 @@ The Area Chart supports the following styles:
6462
* Step—The style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
6563
* Smooth—This style causes the Area Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.
6664

67-
**Figure 2: A step-line Area Chart**
68-
69-
![Step Line Chart](images/chart-step-area.png)
65+
![A step-line Area Chart](images/chart-step-area.png)
7066

71-
**Figure 3: A smooth-line Area Chart**
67+
The following image displays a smooth-line Area Chart.
7268

73-
![Smooth Line Chart](images/chart-smooth-area.png)
69+
![A smooth-line Area Chart](images/chart-smooth-area.png)
7470

7571
## See Also
7672

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,7 @@ The [Telerik UI Column Chart for ASP.NET Core](https://demos.telerik.com/aspnet-
4545
)
4646
)
4747

48-
**Figure 1: A sample Column Chart with categories**
49-
50-
![Column Chart with categories](images/chart-column-categories.png)
48+
![A sample Column Chart with categories](images/chart-column-categories.png)
5149

5250
## Defining the Bar Chart
5351

@@ -68,9 +66,7 @@ Setting the `Series` object to `"Bar"` renders horizontal bars.
6866
)
6967
)
7068

71-
**Figure 2: A sample Bar Chart**
72-
73-
![Bar Chart](images/chart-bar.png)
69+
![A sample Bar Chart](images/chart-bar.png)
7470

7571
## See Also
7672

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Bubble Charts
3-
page_title: Bubble Charts | Telerik UI Charts HtmlHelpers for ASP.NET Core
3+
page_title: Bubble Charts | Telerik UI Chart HtmlHelper for ASP.NET Core
44
description: "Learn how to create a Telerik UI Bubble Chart for ASP.NET Core to visualize data points and how to set its properties."
55
slug: bubblecharts_aspnetcore_htmlhelper
66
---
@@ -45,9 +45,7 @@ The following example demonstrates how to create a Bubble Chart and visualizes s
4545
})
4646
)
4747

48-
**Figure 1: A sample Bubble Chart**
49-
50-
![Bubble Chart](images/chart-bubble.png)
48+
![A sample Bubble Chart](images/chart-bubble.png)
5149

5250
## See Also
5351

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Bullet Charts
3-
page_title: Bullet Charts | Telerik UI Charts HtmlHelper for ASP.NET Core
3+
page_title: Bullet Charts | Telerik UI Chart HtmlHelper for ASP.NET Core
44
description: "Learn how to define and configure Telerik UI Bullet Charts."
55
slug: bulletcharts_aspnetcore_htmlhelper
66
---
@@ -60,9 +60,7 @@ To configure the axes, use the `CategoryAxis` and `ValueAxis` settings. Multiple
6060

6161
The configuration from the previous example results in the following Bullet Chart.
6262

63-
**Figure 1: A sample Bullet Chart**
64-
65-
![Bullet Chart](images/chart-bullet.png)
63+
![A sample Bullet Chart](images/chart-bullet.png)
6664

6765
## Customizing the Target Value Lines
6866

@@ -87,9 +85,7 @@ The following example demonstrates how to use all three options to customize the
8785
})
8886
```
8987

90-
**Figure 2: A Bullet Chart with custom target line**
91-
92-
![Bullet Chart with Custom Line](images/chart-bullet-target.png)
88+
![A Bullet Chart with custom target line](images/chart-bullet-target.png)
9389

9490
## See Also
9591

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

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
title: Categorical Charts
3+
page_title: Categorical Charts | Telerik UI Chart HtmlHelper for ASP.NET Core
4+
description: "Learn the basics when working with the categorical charts in the Telerik UI for ASP.NET Core suite."
5+
slug: htmlhelpers_categoricalcharts_aspnetcore
6+
position: 2
7+
---
8+
9+
# Categorical Charts
10+
11+
Categorical charts use a single category axis and a single value axis.
12+
13+
The axis orientation (horizontal or vertical) is inferred from the series type. Categorical charts are the [Bar](https://demos.telerik.com/aspnet-core/bar-charts/index), [Column](https://demos.telerik.com/aspnet-core/bar-charts/column), and [Line Charts](https://demos.telerik.com/aspnet-core/line-charts/index).
14+
15+
## Setting the Category Axis
16+
17+
Use the `CategoryAxis` object to set the category names, as demonstrated in the example below.
18+
19+
```
20+
@(Html.Kendo().Chart()
21+
.Name("chart")
22+
.Series(series =>
23+
{
24+
series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
25+
})
26+
.CategoryAxis(axis => axis
27+
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
28+
)
29+
)
30+
```
31+
32+
The category name can also be bound to a field of the data item, as demonstrated below.
33+
34+
```
35+
@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
36+
.Name("chart")
37+
.DataSource(ds => ds.Read(read => read.Action("_SpainElectricityProduction", "Bar_Charts")))
38+
.Series(series => {
39+
series.Column(model => model.Wind).Name("Wind");
40+
})
41+
.CategoryAxis(axis => axis
42+
.Field("Year")
43+
)
44+
)
45+
```
46+
47+
## Positioning the Label
48+
49+
The category and value axes provide options for displaying their labels either next to the axis or at the outer edges of the plot area. By default, the labels are positioned next to the axis.
50+
51+
To change the label position, set the [`Position`](/api//Kendo.Mvc.UI.Fluent/ChartCategoryAxisLabelsSettingsBuilder#positionkendomvcuichartaxislabelsposition) option of the axis labels which provides the following available options:
52+
53+
* (Default) When `Position` is set to `"ChartAxisLabelsPosition.OnAxis"`, the labels are positioned next to the axis.
54+
* When `Position` is set to `"ChartAxisLabelsPosition.End"`, the labels are placed at the end of the crossing axis. Typically, this configuration positions the labels at the top or right end of the Chart unless the crossing axis was reversed.
55+
* When `Position` is set to `"ChartAxisLabelsPosition.Start"`, the labels are placed at the start of the crossing axis. Typically, this configuration positions the labels at the left or bottom end of the Chart unless the crossing axis was reversed.
56+
57+
58+
```
59+
.CategoryAxis(axis => axis
60+
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
61+
.Labels(l => l.Position(ChartAxisLabelsPosition.Start))
62+
)
63+
```
64+
65+
## Setting the Value Axis
66+
67+
Currently, the Chart supports only numeric value axes. To access the configuration options, use the [`ValueAxis`](/api//Kendo.Mvc.UI.Fluent/ChartBuilder#valueaxissystemactionkendomvcuifluentchartvalueaxisbuildert) setting.
68+
69+
The following example demonstrates how to configure a numeric axis with a minimum value of `0` and a maximum value of `100`.
70+
71+
```
72+
@(Html.Kendo().Chart()
73+
.Name("chart")
74+
.Series(series =>
75+
{
76+
series.Bar(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("Visits");
77+
})
78+
.ValueAxis(v => v
79+
.Min(0)
80+
.Max(100)
81+
)
82+
.CategoryAxis(axis => axis
83+
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
84+
.Labels(l => l.Position(ChartAxisLabelsPosition.Start))
85+
)
86+
)
87+
```
88+
89+
## Setting Multiple Value Axes
90+
91+
A Telerik UI Chart can have more than one value axis. The additional axes must have unique names.
92+
93+
The following example demonstrates how to define the `miles` and `km` axes. Series are associated to a value axis by specifying its name.
94+
95+
```
96+
@(Html.Kendo().Chart()
97+
.Name("chart")
98+
.Series(series =>
99+
{
100+
series
101+
.Column(new int[] { 20, 40, 45, 30, 50 })
102+
.Name("on battery");
103+
series
104+
.Column(new int[] { 20, 30, 35, 35, 40 })
105+
.Name("on gas");
106+
})
107+
.CategoryAxis(axis => axis
108+
.Categories("Mon", "Tue", "Wed", "Thu", "Fri")
109+
)
110+
.ValueAxis(axis => axis
111+
.Numeric()
112+
.Title("miles")
113+
.Min(0).Max(100)
114+
)
115+
.ValueAxis(axis => axis
116+
.Numeric("km")
117+
.Title("km")
118+
.Min(0).Max(161).MajorUnit(32)
119+
)
120+
)
121+
```
122+
123+
## Arranging the Value Axes
124+
125+
You can also control the arrangement of the value axes by specifying the values (category indices) at which they cross the category axis. In the following example, the first value axis crosses the category axis at the first category (leftmost). The second value axis crosses it at the last category.
126+
127+
```
128+
.CategoryAxis(axis => axis
129+
.Categories("Mon", "Tue", "Wed")
130+
.AxisCrossingValue(0, 3)
131+
)
132+
```
133+
134+
## See Also
135+
136+
* [Using the API of the Chart HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/chart-api/index)
137+
* [Basic Usage of the Bar Chart HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/bar-charts/index)
138+
* [Basic Usage of the Line Chart HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/line-charts/index)
139+
* [Server-Side API](/api/chart)

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Funnel Charts
3+
page_title: Funnel Charts | Telerik UI Chart HtmlHelper for ASP.NET Core
4+
description: "Learn how to define and configure Telerik UI Funnel Chart."
5+
slug: funnelchart_aspnetcore_htmlhelper
6+
---
7+
8+
# Funnel Charts
9+
10+
The Telerik UI Funnel HtmlHelper for ASP.NET Core is a server-side wrapper for the Kendo UI Funnel Chart widget.
11+
12+
Funnel Charts display a single series of data in progressively decreasing or increasing proportions, organized in segments, where each segment represents the value for the particular item from the series. The values of the items can also influence the height and the shape of the corresponding segments.
13+
14+
Funnel Charts are suitable for representing stages in a sales process and for showing the amount of the potential revenue from each stage. They are also useful when identifying potential problem areas in the sales processes of an organization. Funnel Charts are similar to the [Stacked Bar Charts](https://demos.telerik.com/aspnet-core/bar-charts/stacked-bar) and are well suited for displaying several values.
15+
16+
* [Demo page for the Funnel Chart](https://demos.telerik.com/aspnet-core/funnel-charts/index)
17+
18+
## Concepts
19+
20+
The basic conceptual options of a Telerik UI Funnel Chart are:
21+
22+
* `dynamicHeight`&mdah;When `equal` is set to `false`, `dynamicHeight` specifies whether the different elements will have equal height, or specifies whether the height of each element has to be based on its value.
23+
* `dynamicSlope`&mdash;When disabled, the Chart takes the `neckRatio` option into account. When enabled, the Chart neglects the `neckRatio` option and each segment creates its form based on the ratio between the current value and the next value.
24+
* `neckRatio`&mdash;Specifies the ratio between the top and the bottom bases of the whole Funnel series. For example, if set to `ten`, the top base will be ten times smaller than the bottom base, as demonstrated below.
25+
26+
![Using the neckRatio option in the Funnel Chart](images/funnel-neckratio.png)
27+
28+
## Getting Started
29+
30+
The following example demonstrates how to base the widths of the bases for each segment on the `currentValue/nextValue` ratio.
31+
32+
```
33+
@(Html.Kendo().Chart().Name("chart-oct")
34+
.Series(series =>
35+
series.Funnel(new dynamic[]{
36+
new {
37+
value= 40
38+
},
39+
new {
40+
value= 80
41+
},
42+
new {
43+
value= 40,
44+
},
45+
new {
46+
value= 10,
47+
}
48+
})
49+
.DynamicHeight(false)
50+
.DynamicSlope(true)
51+
.Labels(l=>l.Visible(true))
52+
)
53+
)
54+
```
55+
56+
![Basing the segment widths on the ratio in the Funnel Chart](images/funnel-dynamicslope.png)
57+
58+
## See Also
59+
60+
* [Basic Usage of the Funnel Chart HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/funnel-charts/index)
61+
* [Server-Side API](/api/chart)

‎docs-aspnet-core/html-helpers/charts/chart-types/images/funnel-dynamicslope.png‎

3.19 KB
Loading

‎docs-aspnet-core/html-helpers/charts/chart-types/images/funnel-neckratio.png‎

2.87 KB
Loading

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Line Charts
3-
page_title: Line Charts | Telerik UI Charts HtmlHelper for ASP.NET Core
3+
page_title: Line Charts | Telerik UI Chart HtmlHelper for ASP.NET Core
44
description: "Learn how to define and configure Telerik UI Line Charts."
55
slug: linecharts_aspnetcore_htmlhelper
66
---
@@ -50,9 +50,7 @@ To configure the axes, use the `CategoryAxis` and `ValueAxis` settings. Multiple
5050

5151
The configuration from the previous example results in the following Line Chart.
5252

53-
**Figure 1: A sample Line Chart**
54-
55-
![Line Chart](images/chart-line.png)
53+
![A sample Line Chart](images/chart-line.png)
5654

5755
## Configuring the Line Styles
5856

@@ -82,13 +80,11 @@ You can also set the line style for each Line series individually.
8280
})
8381
```
8482

85-
**Figure 2: A step-line Line Chart**
86-
87-
![Step Line Chart](images/chart-step-line.png)
83+
![A step-line Line Chart](images/chart-step-line.png)
8884

89-
**Figure 3: A smooth-line Line Chart**
85+
The following image displays a smooth-line Line Chart.
9086

91-
![Smooth Line Chart](images/chart-smooth-line.png)
87+
![A smooth-line Line Chart](images/chart-smooth-line.png)
9288

9389
## Setting the Type of Lines
9490

@@ -102,9 +98,7 @@ By default, the Chart draws its Line series as solid lines. You can configure th
10298
})
10399
```
104100

105-
**Figure 4: A dotted Line Series**
106-
107-
![Dotted Line Series](images/chart-dotted-line.png)
101+
![A dotted Line Series](images/chart-dotted-line.png)
108102

109103
## Customizing the Markers
110104

@@ -119,9 +113,7 @@ The series markers are the visuals that represent the point value in the Line se
119113
);
120114
```
121115

122-
**Figure 5: A Line Chart with custom markers**
123-
124-
![Line Chart with Custom Markers](images/chart-line-markers.png)
116+
![A Line Chart with custom markers](images/chart-line-markers.png)
125117

126118
You can also completely draw custom markers for the Line series through the `Visual` setting as shown in the [Custom Visuals](https://demos.telerik.com/aspnet-core/line-charts/visuals) demo.
127119

0 commit comments

Comments
 (0)