Skip to content

Commit 7658696

Browse files
xristianstefanovxristianstefanov
authored
[4.6] docs(charts): add charts trendline documentation (#1671)
* docs(charts): add charts trendline documentation * docs(charts): fixes as per comments
1 parent ab74cc5 commit 7658696

File tree

1 file changed

+348
-0
lines changed

1 file changed

+348
-0
lines changed

‎components/chart/trendlines.md

Lines changed: 348 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,348 @@
1+
---
2+
title: Trendlines
3+
page_title: Chart - Trendlines
4+
description: How to define Trendlines in the Charts for Blazor to track trends. Explore the two types of trendlines - Linear Trendline and Moving Average Trendline.
5+
slug: chart-trendlines
6+
tags: telerik,blazor,chart,trendlines
7+
published: true
8+
position: 25
9+
---
10+
11+
# Trendlines
12+
13+
Trendlines are dynamic indicators that automatically reveal the overarching trends within your series data. These trendlines are defined as a special type of series linked to the main series by name.
14+
15+
Trendline series use the data from the main series. When the main series employs aggregates, which is common for date series, the trendlines align with the aggregated data. For instance, when using a `sum` aggregate, the trendline illustrates the trends for the sum within each category.
16+
17+
## Trendline Types
18+
19+
The Chart supports two fundamental types of trendlines - the `Linear Trendline` and the `Moving Average Trendline`.
20+
21+
### Linear Trendline
22+
23+
The Linear Trendline serves the purpose of indicating whether a specific quantity is on the rise or decline over time.
24+
25+
>caption Linear trendline in scatter line Chart series
26+
27+
`````CSHTML
28+
<TelerikChart Width="100%"
29+
Height="400px">
30+
<ChartPannable Enabled="true"
31+
Lock="@ChartAxisLock.Y">
32+
</ChartPannable>
33+
34+
<ChartZoomable Enabled="true" />
35+
36+
<ChartLegend Visible="true"
37+
Position="@ChartLegendPosition.Bottom">
38+
</ChartLegend>
39+
40+
<ChartTooltip Visible="true"
41+
Shared="false">
42+
</ChartTooltip>
43+
44+
<ChartSeriesItems>
45+
<ChartSeries Type="ChartSeriesType.ScatterLine"
46+
Name="@Series1Name"
47+
Data="@ScatterData"
48+
XField="@nameof(SalesData.NumericPeriod)"
49+
YField="@nameof(SalesData.Count)">
50+
</ChartSeries>
51+
52+
<ChartSeries Type="ChartSeriesType.LinearTrendline"
53+
Name="Sales Forecast (LINEAR)"
54+
For="@Series1Name"
55+
Color="blue">
56+
<ChartSeriesMarkers Visible="true" />
57+
<ChartSeriesTrendline>
58+
<ChartSeriesTrendlineForecast Before="0"
59+
After="10">
60+
</ChartSeriesTrendlineForecast>
61+
</ChartSeriesTrendline>
62+
</ChartSeries>
63+
</ChartSeriesItems>
64+
65+
<ChartXAxes>
66+
<ChartXAxis>
67+
<ChartXAxisLabels Position="@ChartAxisLabelsPosition.Start">
68+
<ChartXAxisLabelsRotation Angle="-90" />
69+
</ChartXAxisLabels>
70+
</ChartXAxis>
71+
</ChartXAxes>
72+
73+
<ChartYAxes>
74+
<ChartYAxis Min="-4e5"
75+
Max="1.2e6">
76+
</ChartYAxis>
77+
</ChartYAxes>
78+
</TelerikChart>
79+
80+
@code {
81+
private const string Series1Name = "Sales By Quarter";
82+
83+
private List<SalesData> ScatterData { get; set; } = new List<SalesData>();
84+
85+
public class SalesData
86+
{
87+
public string Period { get; set; }
88+
public int NumericPeriod { get; set; }
89+
public DateTime Date { get; set; }
90+
public int Count { get; set; }
91+
}
92+
93+
#region Load Data
94+
95+
protected override Task OnInitializedAsync()
96+
{
97+
ScatterData = GenerateScatterData();
98+
return base.OnInitializedAsync();
99+
}
100+
101+
private static List<SalesData> GenerateData()
102+
{
103+
var data = new List<SalesData>()
104+
{
105+
new SalesData() { Period = "2010 Q1", Date = new DateTime(2010, 1, 1), Count = 4485 },
106+
new SalesData() { Period = "2010 Q2", Date = new DateTime(2010, 4, 1), Count = 4409 },
107+
new SalesData() { Period = "2010 Q3", Date = new DateTime(2010, 7, 1), Count = 4469 },
108+
new SalesData() { Period = "2010 Q4", Date = new DateTime(2010, 10, 1), Count = 4682 },
109+
new SalesData() { Period = "2011 Q1", Date = new DateTime(2011, 1, 1), Count = 5610 },
110+
new SalesData() { Period = "2011 Q2", Date = new DateTime(2011, 4, 1), Count = 6580 },
111+
new SalesData() { Period = "2011 Q3", Date = new DateTime(2011, 7, 1), Count = 7534 },
112+
new SalesData() { Period = "2011 Q4", Date = new DateTime(2011, 10, 1), Count = 7894 },
113+
new SalesData() { Period = "2012 Q1", Date = new DateTime(2012, 1, 1), Count = 8748 },
114+
new SalesData() { Period = "2012 Q2", Date = new DateTime(2012, 4, 1), Count = 10223 },
115+
new SalesData() { Period = "2012 Q3", Date = new DateTime(2012, 7, 1), Count = 10797 },
116+
new SalesData() { Period = "2012 Q4", Date = new DateTime(2012, 10, 1), Count = 12295 },
117+
new SalesData() { Period = "2013 Q1", Date = new DateTime(2013, 1, 1), Count = 13153 },
118+
new SalesData() { Period = "2013 Q2", Date = new DateTime(2013, 4, 1), Count = 14628 },
119+
new SalesData() { Period = "2013 Q3", Date = new DateTime(2013, 7, 1), Count = 16779 },
120+
new SalesData() { Period = "2013 Q4", Date = new DateTime(2013, 10, 1), Count = 18710 },
121+
new SalesData() { Period = "2014 Q1", Date = new DateTime(2014, 1, 1), Count = 22219 },
122+
new SalesData() { Period = "2014 Q2", Date = new DateTime(2014, 4, 1), Count = 25886 },
123+
new SalesData() { Period = "2014 Q3", Date = new DateTime(2014, 7, 1), Count = 31640 },
124+
new SalesData() { Period = "2014 Q4", Date = new DateTime(2014, 10, 1), Count = 36846 },
125+
new SalesData() { Period = "2015 Q1", Date = new DateTime(2015, 1, 1), Count = 43433 },
126+
new SalesData() { Period = "2015 Q2", Date = new DateTime(2015, 4, 1), Count = 48575 },
127+
new SalesData() { Period = "2015 Q3", Date = new DateTime(2015, 7, 1), Count = 54533 },
128+
new SalesData() { Period = "2015 Q4", Date = new DateTime(2015, 10, 1), Count = 62388 },
129+
new SalesData() { Period = "2016 Q1", Date = new DateTime(2016, 1, 1), Count = 70706 },
130+
new SalesData() { Period = "2016 Q2", Date = new DateTime(2016, 4, 1), Count = 75439 },
131+
new SalesData() { Period = "2016 Q3", Date = new DateTime(2016, 7, 1), Count = 83213 },
132+
new SalesData() { Period = "2016 Q4", Date = new DateTime(2016, 10, 1), Count = 88527 },
133+
new SalesData() { Period = "2017 Q1", Date = new DateTime(2017, 1, 1), Count = 99865 },
134+
new SalesData() { Period = "2017 Q2", Date = new DateTime(2017, 4, 1), Count = 107388 },
135+
new SalesData() { Period = "2017 Q3", Date = new DateTime(2017, 7, 1), Count = 117761 },
136+
new SalesData() { Period = "2017 Q4", Date = new DateTime(2017, 10, 1), Count = 125263 },
137+
new SalesData() { Period = "2018 Q1", Date = new DateTime(2018, 1, 1), Count = 135950 },
138+
new SalesData() { Period = "2018 Q2", Date = new DateTime(2018, 4, 1), Count = 144737 },
139+
new SalesData() { Period = "2018 Q3", Date = new DateTime(2018, 7, 1), Count = 155933 },
140+
new SalesData() { Period = "2018 Q4", Date = new DateTime(2018, 10, 1), Count = 167960 },
141+
new SalesData() { Period = "2019 Q1", Date = new DateTime(2019, 1, 1), Count = 182725 },
142+
new SalesData() { Period = "2019 Q2", Date = new DateTime(2019, 4, 1), Count = 199079 },
143+
new SalesData() { Period = "2019 Q3", Date = new DateTime(2019, 7, 1), Count = 234952 },
144+
new SalesData() { Period = "2019 Q4", Date = new DateTime(2019, 10, 1), Count = 271298 },
145+
new SalesData() { Period = "2020 Q1", Date = new DateTime(2020, 1, 1), Count = 323309 },
146+
new SalesData() { Period = "2020 Q2", Date = new DateTime(2020, 4, 1), Count = 358145 },
147+
new SalesData() { Period = "2020 Q3", Date = new DateTime(2020, 7, 1), Count = 460927 },
148+
new SalesData() { Period = "2020 Q4", Date = new DateTime(2020, 10, 1), Count = 579568 },
149+
new SalesData() { Period = "2021 Q1", Date = new DateTime(2021, 1, 1), Count = 669590 },
150+
new SalesData() { Period = "2021 Q2", Date = new DateTime(2021, 4, 1), Count = 793564 },
151+
new SalesData() { Period = "2021 Q3", Date = new DateTime(2021, 7, 1), Count = 941133 },
152+
new SalesData() { Period = "2021 Q4", Date = new DateTime(2021, 10, 1), Count = 1133020 },
153+
new SalesData() { Period = "2022 Q1", Date = new DateTime(2022, 1, 1), Count = 426324 },
154+
};
155+
156+
return data;
157+
}
158+
159+
private static List<SalesData> GenerateScatterData()
160+
{
161+
var data = GenerateData();
162+
163+
for (int i = 0; i < data.Count; i++)
164+
{
165+
data[i].NumericPeriod = i + 10;
166+
}
167+
168+
return data;
169+
}
170+
171+
#endregion
172+
}
173+
`````
174+
175+
### Moving Average Trendline
176+
177+
The Moving Average Trendline smoothens out data fluctuations by computing an average of all data points over a specified period. By default, this period is set to `2` chart intervals.
178+
179+
>caption Line Chart with a moving average trendline
180+
181+
`````CSHTML
182+
<TelerikChart Width="100%"
183+
Height="400px">
184+
<ChartPannable Enabled="true"
185+
Lock="@ChartAxisLock.Y">
186+
</ChartPannable>
187+
188+
<ChartZoomable Enabled="true" />
189+
190+
<ChartLegend Visible="true"
191+
Position="@ChartLegendPosition.Bottom">
192+
</ChartLegend>
193+
194+
<ChartTooltip Visible="true"
195+
Shared="true">
196+
</ChartTooltip>
197+
198+
<ChartSeriesItems>
199+
<ChartSeries Type="ChartSeriesType.Line"
200+
Name="@Series1Name"
201+
Data="@Data"
202+
Field="@nameof(SalesData.Count)"
203+
CategoryField="@nameof(SalesData.Period)">
204+
<ChartSeriesMarkers Visible="false" />
205+
</ChartSeries>
206+
207+
<ChartSeries Type="ChartSeriesType.MovingAverageTrendline"
208+
Name="Sales Forecast (MOVING AVERAGE)"
209+
For="@Series1Name"
210+
Color="teal">
211+
<ChartSeriesMarkers Visible="false" />
212+
<ChartSeriesTrendline>
213+
<ChartSeriesTrendline Period="4" />
214+
</ChartSeriesTrendline>
215+
</ChartSeries>
216+
</ChartSeriesItems>
217+
218+
<ChartCategoryAxes>
219+
<ChartCategoryAxis>
220+
<ChartCategoryAxisLabels Position="@ChartAxisLabelsPosition.Start">
221+
<ChartCategoryAxisLabelsRotation Angle="-90" />
222+
</ChartCategoryAxisLabels>
223+
</ChartCategoryAxis>
224+
</ChartCategoryAxes>
225+
226+
<ChartValueAxes>
227+
<ChartValueAxis Min="-4e5"
228+
Max="1.2e6">
229+
</ChartValueAxis>
230+
</ChartValueAxes>
231+
</TelerikChart>
232+
233+
@code {
234+
private const string Series1Name = "Sales By Quarter";
235+
236+
private List<SalesData> Data { get; set; } = new List<SalesData>();
237+
238+
public class SalesData
239+
{
240+
public string Period { get; set; }
241+
public int NumericPeriod { get; set; }
242+
public DateTime Date { get; set; }
243+
public int Count { get; set; }
244+
}
245+
246+
#region Load Data
247+
248+
protected override Task OnInitializedAsync()
249+
{
250+
Data = GenerateData();
251+
return base.OnInitializedAsync();
252+
}
253+
254+
private static List<SalesData> GenerateData()
255+
{
256+
var data = new List<SalesData>()
257+
{
258+
new SalesData() { Period = "2010 Q1", Date = new DateTime(2010, 1, 1), Count = 4485 },
259+
new SalesData() { Period = "2010 Q2", Date = new DateTime(2010, 4, 1), Count = 4409 },
260+
new SalesData() { Period = "2010 Q3", Date = new DateTime(2010, 7, 1), Count = 4469 },
261+
new SalesData() { Period = "2010 Q4", Date = new DateTime(2010, 10, 1), Count = 4682 },
262+
new SalesData() { Period = "2011 Q1", Date = new DateTime(2011, 1, 1), Count = 5610 },
263+
new SalesData() { Period = "2011 Q2", Date = new DateTime(2011, 4, 1), Count = 6580 },
264+
new SalesData() { Period = "2011 Q3", Date = new DateTime(2011, 7, 1), Count = 7534 },
265+
new SalesData() { Period = "2011 Q4", Date = new DateTime(2011, 10, 1), Count = 7894 },
266+
new SalesData() { Period = "2012 Q1", Date = new DateTime(2012, 1, 1), Count = 8748 },
267+
new SalesData() { Period = "2012 Q2", Date = new DateTime(2012, 4, 1), Count = 10223 },
268+
new SalesData() { Period = "2012 Q3", Date = new DateTime(2012, 7, 1), Count = 10797 },
269+
new SalesData() { Period = "2012 Q4", Date = new DateTime(2012, 10, 1), Count = 12295 },
270+
new SalesData() { Period = "2013 Q1", Date = new DateTime(2013, 1, 1), Count = 13153 },
271+
new SalesData() { Period = "2013 Q2", Date = new DateTime(2013, 4, 1), Count = 14628 },
272+
new SalesData() { Period = "2013 Q3", Date = new DateTime(2013, 7, 1), Count = 16779 },
273+
new SalesData() { Period = "2013 Q4", Date = new DateTime(2013, 10, 1), Count = 18710 },
274+
new SalesData() { Period = "2014 Q1", Date = new DateTime(2014, 1, 1), Count = 22219 },
275+
new SalesData() { Period = "2014 Q2", Date = new DateTime(2014, 4, 1), Count = 25886 },
276+
new SalesData() { Period = "2014 Q3", Date = new DateTime(2014, 7, 1), Count = 31640 },
277+
new SalesData() { Period = "2014 Q4", Date = new DateTime(2014, 10, 1), Count = 36846 },
278+
new SalesData() { Period = "2015 Q1", Date = new DateTime(2015, 1, 1), Count = 43433 },
279+
new SalesData() { Period = "2015 Q2", Date = new DateTime(2015, 4, 1), Count = 48575 },
280+
new SalesData() { Period = "2015 Q3", Date = new DateTime(2015, 7, 1), Count = 54533 },
281+
new SalesData() { Period = "2015 Q4", Date = new DateTime(2015, 10, 1), Count = 62388 },
282+
new SalesData() { Period = "2016 Q1", Date = new DateTime(2016, 1, 1), Count = 70706 },
283+
new SalesData() { Period = "2016 Q2", Date = new DateTime(2016, 4, 1), Count = 75439 },
284+
new SalesData() { Period = "2016 Q3", Date = new DateTime(2016, 7, 1), Count = 83213 },
285+
new SalesData() { Period = "2016 Q4", Date = new DateTime(2016, 10, 1), Count = 88527 },
286+
new SalesData() { Period = "2017 Q1", Date = new DateTime(2017, 1, 1), Count = 99865 },
287+
new SalesData() { Period = "2017 Q2", Date = new DateTime(2017, 4, 1), Count = 107388 },
288+
new SalesData() { Period = "2017 Q3", Date = new DateTime(2017, 7, 1), Count = 117761 },
289+
new SalesData() { Period = "2017 Q4", Date = new DateTime(2017, 10, 1), Count = 125263 },
290+
new SalesData() { Period = "2018 Q1", Date = new DateTime(2018, 1, 1), Count = 135950 },
291+
new SalesData() { Period = "2018 Q2", Date = new DateTime(2018, 4, 1), Count = 144737 },
292+
new SalesData() { Period = "2018 Q3", Date = new DateTime(2018, 7, 1), Count = 155933 },
293+
new SalesData() { Period = "2018 Q4", Date = new DateTime(2018, 10, 1), Count = 167960 },
294+
new SalesData() { Period = "2019 Q1", Date = new DateTime(2019, 1, 1), Count = 182725 },
295+
new SalesData() { Period = "2019 Q2", Date = new DateTime(2019, 4, 1), Count = 199079 },
296+
new SalesData() { Period = "2019 Q3", Date = new DateTime(2019, 7, 1), Count = 234952 },
297+
new SalesData() { Period = "2019 Q4", Date = new DateTime(2019, 10, 1), Count = 271298 },
298+
new SalesData() { Period = "2020 Q1", Date = new DateTime(2020, 1, 1), Count = 323309 },
299+
new SalesData() { Period = "2020 Q2", Date = new DateTime(2020, 4, 1), Count = 358145 },
300+
new SalesData() { Period = "2020 Q3", Date = new DateTime(2020, 7, 1), Count = 460927 },
301+
new SalesData() { Period = "2020 Q4", Date = new DateTime(2020, 10, 1), Count = 579568 },
302+
new SalesData() { Period = "2021 Q1", Date = new DateTime(2021, 1, 1), Count = 669590 },
303+
new SalesData() { Period = "2021 Q2", Date = new DateTime(2021, 4, 1), Count = 793564 },
304+
new SalesData() { Period = "2021 Q3", Date = new DateTime(2021, 7, 1), Count = 941133 },
305+
new SalesData() { Period = "2021 Q4", Date = new DateTime(2021, 10, 1), Count = 1133020 },
306+
new SalesData() { Period = "2022 Q1", Date = new DateTime(2022, 1, 1), Count = 426324 },
307+
};
308+
309+
return data;
310+
}
311+
312+
#endregion
313+
}
314+
`````
315+
316+
## Chart Trendlines Parameters
317+
318+
The following table lists Chart Trendlines parameters.
319+
320+
| Parameter | Type | Description |
321+
| --- | --- | --- |
322+
| `ChartSeries.For` | `string` | The name of the parent series of the trendline. |
323+
| `ChartSeriesTrendline` | `object` | The trendline configuration options. |
324+
| `ChartSeriesTrendlineForecast` | `object` | The trendline forecast settings. By default, the trendline does not display a forecast. |
325+
| `ChartSeriesTrendlineForecast.Before` | `int` | The number of intervals to extend the trendline before the first data point. |
326+
| `ChartSeriesTrendlineForecast.After` | `int` | The number of intervals to extend the trendline after the last data point. |
327+
| `ChartSeriesTrendline.Period` | `int` | The number of intervals to take when calculating averages. The value must be an integer greater than `2`. |
328+
| `Type` | `ChartSeriesType` enum | The type of the series. |
329+
330+
## Supported Series Types
331+
332+
Trendlines are supported for the following chart types:
333+
334+
* `Area`
335+
* `Bar`
336+
* `BoxPlot`
337+
* `Candlestick`
338+
* `Column`
339+
* `Line`
340+
* `OHLC`
341+
* `RangeArea`
342+
* `RangeColumn`
343+
* `Scatter`
344+
* `ScatterLine`
345+
346+
## See Also
347+
348+
* [Live Demos: Trendline Chart](https://demos.telerik.com/blazor-ui/chart/trendline-chart)

0 commit comments

Comments
 (0)