Skip to content

Commit 6acbbaa

Browse files
committed
Sync with Kendo UI Professional
1 parent a5ddc4a commit 6acbbaa

File tree

24 files changed

+400
-11060
lines changed

24 files changed

+400
-11060
lines changed

build/gulp/tasks/karma.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,17 @@ var TESTS = require(glob.sync('../../test-paths-*.js', { cwd: __dirname })[0]);
1414

1515
var browserOption = argv.browser;
1616
var testsOption = argv.tests;
17-
var jqueryOption = argv.jquery;
17+
var jqueryOption = argv.jquery || '3.7.0';
1818

19-
var tests, jquery, browsers;
19+
var tests, browsers;
2020

2121
if (testsOption) {
2222
tests = [ testsOption ];
2323
} else {
2424
tests = [ "tests/!(download-builder)/**/*.js" ];
2525
}
2626

27-
if (jqueryOption) {
28-
jquery = "http://code.jquery.com/jquery-" + jqueryOption + ".min.js";
29-
} else {
30-
jquery = 'src/jquery.js';
31-
}
27+
let jquery = "http://code.jquery.com/jquery-" + jqueryOption + ".min.js";
3228

3329
if (browserOption) {
3430
browsers = [ browserOption ];

docs-aspnet/html-helpers/data-management/grid/faq.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ The following example demonstrates how to add a Kendo UI Menu inside a Grid colu
299299
});
300300
301301
})
302-
.ToClientTemplate().Value
302+
.ToClientTemplate().ToString()
303303
);
304304
})
305305
.Events(ev => ev.DataBound("initMenus"))
@@ -321,7 +321,7 @@ The following example demonstrates how to add a Kendo UI Menu inside a Grid colu
321321
});
322322
323323
})
324-
.ToClientTemplate().Value)">
324+
.ToClientTemplate().ToString())">
325325
</column>
326326
</columns>
327327
</kendo-grid>

docs/api/javascript/dataviz/ui/chart.md

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13234,6 +13234,50 @@ The data item field which contains the series value. **The field name should be
1323413234
});
1323513235
</script>
1323613236

13237+
### series.for `String`
13238+
13239+
The name of the parent series of the trendline.
13240+
13241+
> The `for` option is supported when [series.type](/api/javascript/dataviz/ui/chart#configuration-series.type) is set to "linearTrendline" or "movingAverageTrendline".
13242+
13243+
#### Example - set the trendline parent series fromField
13244+
13245+
<div id="chart"></div>
13246+
<script>
13247+
$("#chart").kendoChart({
13248+
dataSource: {
13249+
data: [
13250+
{
13251+
period: "2021 Q1",
13252+
count: 669590.0
13253+
},
13254+
{
13255+
period: "2021 Q2",
13256+
count: 793564.0
13257+
},
13258+
{
13259+
period: "2021 Q3",
13260+
count: 941133.0
13261+
},
13262+
{
13263+
period: "2021 Q4",
13264+
count: 1133020.0
13265+
},
13266+
]
13267+
},
13268+
series: [{
13269+
name: "Sales By Quarter",
13270+
type: "line",
13271+
field: "count",
13272+
categoryField: "period"
13273+
}, {
13274+
name: "Sales Trend (LINEAR)",
13275+
type: "linearTrendline",
13276+
for: "Sales By Quarter"
13277+
}]
13278+
});
13279+
</script>
13280+
1323713281
### series.fromField `String` *(default: "min")*
1323813282

1323913283
The data item field which contains the series from value.
@@ -13278,6 +13322,162 @@ The data item field which contains the series to value.
1327813322
});
1327913323
</script>
1328013324

13325+
### series.trendline `Object`
13326+
13327+
The trendline configuration options.
13328+
13329+
> The `trendline` option is supported when [series.type](/api/javascript/dataviz/ui/chart#configuration-series.type) is set to "linearTrendline" or "movingAverageTrendline".
13330+
13331+
#### Example - set the trendline options
13332+
13333+
<div id="chart"></div>
13334+
<script>
13335+
$("#chart").kendoChart({
13336+
dataSource: {
13337+
data: [
13338+
{
13339+
period: "2021 Q1",
13340+
count: 669590.0
13341+
},
13342+
{
13343+
period: "2021 Q2",
13344+
count: 793564.0
13345+
},
13346+
{
13347+
period: "2021 Q3",
13348+
count: 941133.0
13349+
},
13350+
{
13351+
period: "2021 Q4",
13352+
count: 1133020.0
13353+
}
13354+
]
13355+
},
13356+
series: [{
13357+
name: "Sales By Quarter",
13358+
type: "line",
13359+
field: "count",
13360+
categoryField: "period"
13361+
}, {
13362+
name: "Sales Trend",
13363+
type: "movingAverageTrendline",
13364+
for: "Sales By Quarter",
13365+
trendline: {
13366+
period: 3
13367+
}
13368+
}]
13369+
});
13370+
</script>
13371+
13372+
### series.trendline.forecast `Object`
13373+
13374+
The trendline forecast settings. By default, the trendline does not display a forecast.
13375+
13376+
> The `forecast` option is supported when [series.type](/api/javascript/dataviz/ui/chart#configuration-series.type) is set to "linearTrendline" and the parent series are either date series, "scatter" or "scatterLine" series.
13377+
13378+
#### Example - set the trendline forecast
13379+
13380+
<div id="chart"></div>
13381+
<script>
13382+
$("#chart").kendoChart({
13383+
dataSource: {
13384+
data: [
13385+
{
13386+
period: "2021 Q1",
13387+
date: new Date(2021, 0, 1),
13388+
count: 669590.0
13389+
},
13390+
{
13391+
period: "2021 Q2",
13392+
date: new Date(2021, 3, 1),
13393+
count: 793564.0
13394+
},
13395+
{
13396+
period: "2021 Q3",
13397+
date: new Date(2021, 6, 1),
13398+
count: 941133.0
13399+
},
13400+
{
13401+
period: "2021 Q4",
13402+
date: new Date(2021, 9, 1),
13403+
count: 1133020.0
13404+
}
13405+
]
13406+
},
13407+
series: [{
13408+
name: "Sales By Quarter",
13409+
type: "line",
13410+
field: "count",
13411+
categoryField: "date"
13412+
}, {
13413+
name: "Sales Trend",
13414+
type: "linearTrendline",
13415+
for: "Sales By Quarter",
13416+
trendline: {
13417+
forecast: {
13418+
before: 3,
13419+
after: 5
13420+
}
13421+
}
13422+
}]
13423+
});
13424+
</script>
13425+
13426+
### series.trendline.forecast.before `Number` *(default: 0)*
13427+
13428+
The number of intervals to extend the trendline before the first data point.
13429+
13430+
### series.trendline.forecast.after `Number` *(default: 0)*
13431+
13432+
The number of intervals to extend the trendline after the last data point.
13433+
13434+
### series.trendline.period `Number` *(default: 2)*
13435+
13436+
The number of intervals to take when calculating averages. The value should be an integer greater than 2.
13437+
13438+
> The period setting is supported only when [series.type](/api/javascript/dataviz/ui/chart#configuration-series.type) is set to "movingAverageTrendline".
13439+
13440+
#### Example - set the moving average trendline period
13441+
13442+
<div id="chart"></div>
13443+
<script>
13444+
$("#chart").kendoChart({
13445+
dataSource: {
13446+
data: [
13447+
{
13448+
period: "2021 Q1",
13449+
count: 669590.0
13450+
},
13451+
{
13452+
period: "2021 Q2",
13453+
count: 793564.0
13454+
},
13455+
{
13456+
period: "2021 Q3",
13457+
count: 941133.0
13458+
},
13459+
{
13460+
period: "2021 Q4",
13461+
count: 1133020.0
13462+
}
13463+
]
13464+
},
13465+
series: [{
13466+
name: "Sales By Quarter",
13467+
type: "line",
13468+
field: "count",
13469+
categoryField: "period"
13470+
}, {
13471+
name: "Sales Trend",
13472+
type: "movingAverageTrendline",
13473+
for: "Sales By Quarter",
13474+
trendline: {
13475+
period: 3
13476+
}
13477+
}]
13478+
});
13479+
</script>
13480+
1328113481
### series.noteTextField `String` *(default: "noteText")*
1328213482

1328313483
The data item field which contains the series note text.
@@ -17405,6 +17605,8 @@ The supported values are:
1740517605
* [`heatmap`](/controls/charts/chart-types/heatmap)
1740617606
* [`horizontalWaterfall`](https://demos.telerik.com/kendo-ui/waterfall-charts/horizontal)
1740717607
* [`line`](/controls/charts/chart-types/line-charts)
17608+
* [`linearTrendline`](/controls/charts/elements/trendlines)
17609+
* [`movingAverageTrendline`](/controls/charts/elements/trendlines)
1740817610
* [`ohlc`](/api/javascript/dataviz/ui/chart/configuration/seriesdefaults.ohlc)
1740917611
* [`pie`](/controls/charts/chart-types/pie-charts)
1741017612
* [`polarArea`](https://demos.telerik.com/kendo-ui/polar-charts/polar-area)
Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
title: Trendlines
3+
description: "Explore data trends by using trendlines in the Kendo UI for jQuery Chart."
4+
slug: trendlines_chart_charts
5+
---
6+
7+
# Trendlines
8+
Trendlines (or trend lines) are automatically generated indicators that show the overall trends in the series data. They are defined as a special type of series that are linked to the main series by name.
9+
10+
## Trendline Types
11+
12+
The Chart supports the following types of trendlines - Linear Trendline and Moving Average Trendline.
13+
14+
### Linear Trendline
15+
16+
A linear trendline is usually used to show if a particular quantity is increasing or decreasing in time.
17+
18+
The following example demonstrates how to create a linear trendline for Categorical series.
19+
20+
```dojo
21+
<div id="chart"></div>
22+
<script>
23+
$("#chart").kendoChart({
24+
series: [
25+
{
26+
name: "World",
27+
data: [15.7, 16.7, 20, 23.5, 26.6]
28+
},
29+
{
30+
name: 'Sales Forecast (LINEAR)',
31+
type: 'linearTrendline', // linearTrendline, movingAverageTrendline
32+
for: 'World',
33+
color:"lime"
34+
}
35+
],
36+
tooltip: {
37+
visible: true,
38+
shared: true
39+
},
40+
categoryAxis: {
41+
categories: [2005, 2006, 2007, 2008, 2009]
42+
}
43+
});
44+
</script>
45+
```
46+
47+
### Moving Average Trendline
48+
49+
The moving average trendline is used to smooth out the variations in the data by averaging all points in a period. By default, the period is set to `2` chart intervals.
50+
51+
The following example demonstrates how to create a moving average trendline for Categorical series.
52+
53+
```dojo
54+
<div id="chart"></div>
55+
<script>
56+
$("#chart").kendoChart({
57+
series: [
58+
{
59+
name: "World",
60+
data: [15.7, 16.7, 20, 23.5, 26.6]
61+
},
62+
{
63+
name: 'Sales Forecast (Moving AVG.)',
64+
type: 'movingAverageTrendline', // linearTrendline, movingAverageTrendline
65+
for: 'World',
66+
color:"lime"
67+
}
68+
],
69+
tooltip: {
70+
visible: true,
71+
shared: true
72+
},
73+
categoryAxis: {
74+
categories: [2005, 2006, 2007, 2008, 2009]
75+
}
76+
});
77+
</script>
78+
```
79+
80+
## Data Binding
81+
82+
Trendline series use the data from the main series and do not support binding to a different data set.
83+
84+
### Date Series and Aggregates
85+
86+
If the main series is using `aggregates`, as is most common for [Date Series]({% slug dateseries_charts_widget %}), the trendlines will bind to the aggregated data. For example, if you're using a `"sum"` aggregate, the trendline will plot the trend for the sums in each category.
87+
88+
## Supported Series Types
89+
90+
Trendlines are supported for the following [chart types]({% slug overview_charttypes_charts %}):
91+
* `"area"`
92+
* `"bar"`
93+
* `"boxPlot"`
94+
* `"bubble"`
95+
* `"bullet"`
96+
* `"candlestick"`
97+
* `"column"`
98+
* `"horizontalWaterfall"`
99+
* `"line"`
100+
* `"ohlc"`
101+
* `"pie"`
102+
* `"polarArea"`
103+
* `"polarLine"`
104+
* `"polarScatter"`
105+
* `"radarArea"`
106+
* `"radarColumn"`
107+
* `"radarLine"`
108+
* `"rangeArea"`
109+
* `"rangeBar"`
110+
* `"rangeColumn"`
111+
* `"scatter"`
112+
* `"scatterLine"`
113+
* `"verticalArea"`
114+
* `"verticalBoxPlot"`
115+
* `"verticalBullet"`
116+
* `"verticalLine"`
117+
* `"verticalRangeArea"`
118+
* `"waterfall"`
119+
120+
## See Also
121+
122+
* [Getting Started with the Kendo UI for jQuery Chart]({% slug getting_started_kendoui_chart_widget %})
123+
* [API Reference of the Chart](/api/javascript/dataviz/ui/chart)
124+
* [Knowledge Base](/knowledge-base)

0 commit comments

Comments
 (0)