Skip to content

Commit 92b9b50

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 4d5edb5 commit 92b9b50

File tree

4 files changed

+647
-37
lines changed

4 files changed

+647
-37
lines changed

‎docs-aspnet/html-helpers/charts/elements/trendlines.md‎

Lines changed: 225 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@ The following example demonstrates how to create a linear trendline for Categori
2727
.Legend(legend => legend
2828
.Visible(false)
2929
)
30-
.ChartArea(chartArea => chartArea
31-
.Background("transparent")
32-
)
3330
.Series(series =>
3431
{
3532
series.Bar(new double[] { 56000 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
@@ -79,8 +76,6 @@ The following example demonstrates how to create a linear trendline for Categori
7976
<major-grid-lines visible="true" />
8077
</value-axis-item>
8178
</value-axis>
82-
<chart-area background="transparent">
83-
</chart-area>
8479
<chart-legend visible="false">
8580
</chart-legend>
8681
<chart-title text="Site Visitors Stats /thousands/">
@@ -97,13 +92,99 @@ Exponential trendlines are most suitable for data sets with accelerating rate of
9792

9893
The following example demonstrates how to create a exponential trendline for Categorical series.
9994

95+
```
96+
@(Html.Kendo().Chart()
97+
.Name("chart")
98+
.Series(series =>
99+
{
100+
series.Bar(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
101+
series.ExponentialTrendline().For("World").Name("Trend (EXP)");
102+
})
103+
.CategoryAxis(axis => axis
104+
.Categories(2005, 2006, 2007, 2008, 2009)
105+
)
106+
.Tooltip(tooltip => tooltip
107+
.Visible(true)
108+
.Shared(true))
109+
)
110+
)
111+
```
112+
{% if site.core %}
113+
```TagHelper
114+
@addTagHelper *, Kendo.Mvc
115+
@{
116+
var categories = new string[] { 2005, 2006, 2007, 2008, 2009 };
117+
}
118+
<kendo-chart name="chart">
119+
<category-axis>
120+
<category-axis-item categories="categories">
121+
</category-axis-item>
122+
</category-axis>
123+
<series>
124+
<series-item type="ChartSeriesType.Bar"
125+
name="World"
126+
data="new double[] { 15.7, 16.7, 20, 23.5, 26.6 }">
127+
</series-item>
128+
<series-item type="ChartSeriesType.ExponentialTrendline"
129+
for="World"
130+
name="Trend (EXP)">
131+
</series-item>
132+
</series>
133+
<tooltip shared="true" visible="true">
134+
</tooltip>
135+
</kendo-chart>
136+
```
137+
{% endif %}
100138

101139
### Logarithmic Trendline
102140

103141
Logarithmic trendlines are best suited for data sets that grow quickly at the beginning and then taper off. They can only be use with both positive and negative values.
104142

105143
The following example demonstrates how to create a logarithmic trendline for Categorical series.
106144

145+
```
146+
@(Html.Kendo().Chart()
147+
.Name("chart")
148+
.Series(series =>
149+
{
150+
series.Bar(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
151+
series.LogarithmicTrendline().For("World").Name("Trend (LOG)");
152+
})
153+
.CategoryAxis(axis => axis
154+
.Categories(2005, 2006, 2007, 2008, 2009)
155+
)
156+
.Tooltip(tooltip => tooltip
157+
.Visible(true)
158+
.Shared(true))
159+
)
160+
)
161+
```
162+
{% if site.core %}
163+
```TagHelper
164+
@addTagHelper *, Kendo.Mvc
165+
@{
166+
var categories = new string[] { 2005, 2006, 2007, 2008, 2009 };
167+
}
168+
<kendo-chart name="chart">
169+
<category-axis>
170+
<category-axis-item categories="categories">
171+
</category-axis-item>
172+
</category-axis>
173+
<series>
174+
<series-item type="ChartSeriesType.Bar"
175+
name="World"
176+
data="new double[] { 15.7, 16.7, 20, 23.5, 26.6 }">
177+
</series-item>
178+
<series-item type="ChartSeriesType.LogarithmicTrendline"
179+
for="World"
180+
name="Trend (LOG)">
181+
</series-item>
182+
</series>
183+
<tooltip shared="true" visible="true">
184+
</tooltip>
185+
</kendo-chart>
186+
```
187+
{% endif %}
107188

108189
### Power Trendline
109190

@@ -117,7 +198,7 @@ The following example demonstrates how to create a power trendline for Categoric
117198
.Series(series =>
118199
{
119200
series.Bar(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
120-
series.PowerTrendline().For("World").Name("Sales Forecast (POWER)");
201+
series.PowerTrendline().For("World").Name("Trend (POWER)");
121202
})
122203
.CategoryAxis(axis => axis
123204
.Categories(2005, 2006, 2007, 2008, 2009)
@@ -146,7 +227,7 @@ The following example demonstrates how to create a power trendline for Categoric
146227
</series-item>
147228
<series-item type="ChartSeriesType.PowerTrendline"
148229
for="World"
149-
name="Sales Forecast (POWER)">
230+
name="Trend (POWER)">
150231
</series-item>
151232
</series>
152233
<tooltip shared="true" visible="true">
@@ -156,6 +237,66 @@ The following example demonstrates how to create a power trendline for Categoric
156237
{% endif %}
157238

158239

240+
### Polynomial Trendline
241+
242+
Polynomial trendlines are best suited for data series that alternates between growth and decline.
243+
244+
This type of trendlines accepts an [series.trendline.order](/api/javascript/dataviz/ui/chart#configuration-series.trendline.order) parameter that specifies the degree of the polynomial.
245+
The default order is 2. Accepted values are from 2 to 6:
246+
* 2: a Quadratic polynomial with a single extreme point (minimum or maximum) point.
247+
* 3: a Cubic polynomial with up to 2 extreme points.
248+
* 4: a polynomial of 4th degree with up to 3 extreme points.
249+
* 5: a polynomial of 5th degree with up to 4 extreme points.
250+
* 6: a polynomial of 6th degree with up to 5 extreme points.
251+
252+
The following example demonstrates how to create a polynomial trendline for Categorical series.
253+
254+
```
255+
@(Html.Kendo().Chart()
256+
.Name("chart")
257+
.Series(series =>
258+
{
259+
series.Bar(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
260+
series.PolynomialTrendline().For("World").Name("Trend (POLY)")
261+
.Trendline(trendline => trendline.Order(3));
262+
})
263+
.CategoryAxis(axis => axis
264+
.Categories(2005, 2006, 2007, 2008, 2009)
265+
)
266+
.Tooltip(tooltip => tooltip
267+
.Visible(true)
268+
.Shared(true))
269+
)
270+
)
271+
```
272+
{% if site.core %}
273+
```TagHelper
274+
@addTagHelper *, Kendo.Mvc
275+
@{
276+
var categories = new string[] { 2005, 2006, 2007, 2008, 2009 };
277+
}
278+
<kendo-chart name="chart">
279+
<category-axis>
280+
<category-axis-item categories="categories">
281+
</category-axis-item>
282+
</category-axis>
283+
<series>
284+
<series-item type="ChartSeriesType.Bar"
285+
name="World"
286+
data="new double[] { 15.7, 16.7, 20, 23.5, 26.6 }">
287+
</series-item>
288+
<series-item type="ChartSeriesType.PolynomialTrendline"
289+
for="World"
290+
name="Trend (POLY)">
291+
<trendline order="3"></trendline>
292+
</series-item>
293+
</series>
294+
<tooltip shared="true" visible="true">
295+
</tooltip>
296+
</kendo-chart>
297+
```
298+
{% endif %}
299+
159300
### Moving Average Trendline
160301

161302
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. To add a moving average trendline use the `MovingAverageTrendline()` fluent method.
@@ -176,8 +317,8 @@ The following example demonstrates how to create a moving average trendline for
176317
.Series(series =>
177318
{
178319
series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
179-
series.MovingAverageTrendline().For("Total Visitors").Name("Visitors Trend (LINEAR)")
180-
.Trendline(trendline=>trendline.Period(4));
320+
series.MovingAverageTrendline().For("Total Visitors").Name("Moving Average")
321+
.Trendline(trendline => trendline.Period(4));
181322
})
182323
.CategoryAxis(axis => axis
183324
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
@@ -214,7 +355,7 @@ The following example demonstrates how to create a moving average trendline for
214355
</series-item>
215356
<series-item type="ChartSeriesType.MovingAverageTrendline"
216357
for="Total Visitors"
217-
name="Visitors Trend (M.AVG)">
358+
name="Moving Average">
218359
<trendline period="4"></trendline>
219360
</series-item>
220361
</series>
@@ -242,6 +383,80 @@ To create a forecast, extend the trendline by specifying the number of intervals
242383

243384
> The `forecast` option is supported for **linear**, **exponential**, **logarithmic** and **power** trendlines. The parent series must be either a [Date Series]({% slug htmlhelpers_charts_dateseries_aspnetcore %}), "scatter" or "scatterLine".
244385
386+
The following example demonstrates how to create a forecast.
387+
388+
```
389+
@(Html.Kendo().Chart()
390+
.Name("chart")
391+
.Title("Site Visitors Stats")
392+
.Subtitle("/thousands/")
393+
.Legend(legend => legend
394+
.Visible(false)
395+
)
396+
.Series(series =>
397+
{
398+
series.Bar(new double[] { 56000 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
399+
series.LinearTrendline().For("Total Visitors").Name("Visitors Trend (LINEAR)")
400+
.Trendline(trendline => trendline.Forecast(forecast => forecast.Before(3).After(5)));
401+
})
402+
.CategoryAxis(axis => axis
403+
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
404+
.MajorGridLines(lines => lines.Visible(false))
405+
)
406+
.ValueAxis(axis => axis
407+
.Numeric()
408+
.Max(140000)
409+
.Line(line => line.Visible(false))
410+
.MajorGridLines(lines => lines.Visible(true))
411+
)
412+
.Tooltip(tooltip => tooltip
413+
.Visible(true)
414+
.Shared(true))
415+
)
416+
)
417+
```
418+
{% if site.core %}
419+
```TagHelper
420+
@addTagHelper *, Kendo.Mvc
421+
@{
422+
var categories = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };
423+
}
424+
<kendo-chart name="chart">
425+
<category-axis>
426+
<category-axis-item categories="categories">
427+
<major-grid-lines visible="false" />
428+
</category-axis-item>
429+
</category-axis>
430+
<series>
431+
<series-item type="ChartSeriesType.Bar"
432+
name="Total Visits"
433+
data="new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }">
434+
</series-item>
435+
<series-item type="ChartSeriesType.LinearTrendline"
436+
for="Total Visitors"
437+
name="Visitors Trend (LINEAR)">
438+
<trendline>
439+
<forecast before="3" after="5" />
440+
</trendline>
441+
</series-item>
442+
</series>
443+
<value-axis>
444+
<value-axis-item max="140000" name="" type="numeric">
445+
<line visible="false" />
446+
<major-grid-lines visible="true" />
447+
</value-axis-item>
448+
</value-axis>
449+
<chart-area background="transparent">
450+
</chart-area>
451+
<chart-legend visible="false">
452+
</chart-legend>
453+
<chart-title text="Site Visitors Stats /thousands/">
454+
</chart-title>
455+
<tooltip shared="true" visible="true">
456+
</tooltip>
457+
</kendo-chart>
458+
```
459+
{% endif %}
245460

246461
## Data Binding
247462

0 commit comments

Comments
 (0)