From edb52e4e4666f12dd711b8dffeaf2fb6571d945c Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 26 Jan 2024 09:53:39 +0200 Subject: [PATCH 1/2] docs(charts): update trendline articles to include the new types --- components/chart/trendlines.md | 759 ++++++++++++++++++++++++++++++++- 1 file changed, 756 insertions(+), 3 deletions(-) diff --git a/components/chart/trendlines.md b/components/chart/trendlines.md index 583f794767..e5b2baad85 100644 --- a/components/chart/trendlines.md +++ b/components/chart/trendlines.md @@ -16,11 +16,18 @@ Trendline series use the data from the main series. When the main series employs ## Trendline Types -The Chart supports two fundamental types of trendlines - the `Linear Trendline` and the `Moving Average Trendline`. +The Chart supports the following fundamental types of trendlines: + +* [`Linear Trendline`](#linear-trendline) +* [`Moving Average Trendline`](#moving-average-trendline) +* [`Exponential Trendline`](#exponential-trendline) +* [`Logarithmic Trendline`](#logarithmic-trendline) +* [`Power Trendline`](#power-trendline) +* [`Polynomial Trendline`](#polynomial-trendline) ### Linear Trendline -The Linear Trendline serves the purpose of indicating whether a specific quantity is on the rise or decline over time. +The `Linear Trendline` serves the purpose of indicating whether a specific quantity is on the rise or decline over time. >caption Linear trendline in scatter line Chart series @@ -174,7 +181,7 @@ The Linear Trendline serves the purpose of indicating whether a specific quantit ### Moving Average Trendline -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. +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. >caption Line Chart with a moving average trendline @@ -313,12 +320,758 @@ The Moving Average Trendline smoothens out data fluctuations by computing an ave } ````` +### Exponential Trendline + +The `Exponential Trendline` shows data with rapidly accelerating growth or decay over time. It's used to emphasize trends that follow an exponential pattern, and it requires positive `Y` values. + +>caption Chart with an Exponential Trendline + +`````CSHTML + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + private List ChartData { get; set; } + + protected override void OnInitialized() + { + ChartData = GetTrendlineData(); + } + + private List GetTrendlineData() + { + return new List() + { + new StockPriceTrend() + { + Period = "Q1 2019", + NumericPeriod = 10, + Date = new DateTime(2019, 1, 1), + Price = 10.28m + }, + new StockPriceTrend() + { + Period = "Q2 2019", + NumericPeriod = 20, + Date = new DateTime(2019, 4, 1), + Price = 20.54m + }, + new StockPriceTrend() + { + Period = "Q3 2019", + NumericPeriod = 30, + Date = new DateTime(2019, 7, 1), + Price = 29.33m + }, + new StockPriceTrend() + { + Period = "Q4 2019", + NumericPeriod = 40, + Date = new DateTime(2019, 10, 1), + Price = 69.81m + }, + new StockPriceTrend() + { + Period = "Q1 2020", + NumericPeriod = 50, + Date = new DateTime(2020, 1, 1), + Price = 45.5m + }, + new StockPriceTrend() + { + Period = "Q2 2020", + NumericPeriod = 60, + Date = new DateTime(2020, 4, 1), + Price = 57.54m + }, + new StockPriceTrend() + { + Period = "Q3 2020", + NumericPeriod = 70, + Date = new DateTime(2020, 7, 1), + Price = 68.3m + }, + new StockPriceTrend() + { + Period = "Q4 2020", + NumericPeriod = 80, + Date = new DateTime(2020, 10, 1), + Price = 70.73m + }, + new StockPriceTrend() + { + Period = "Q1 2021", + NumericPeriod = 90, + Date = new DateTime(2021, 1, 1), + Price = 68.15m + }, + new StockPriceTrend() + { + Period = "Q2 2021", + NumericPeriod = 100, + Date = new DateTime(2021, 4, 1), + Price = 76.24m + }, + new StockPriceTrend() + { + Period = "Q3 2021", + NumericPeriod = 110, + Date = new DateTime(2021, 7, 1), + Price = 52.3m + }, + new StockPriceTrend() + { + Period = "Q4 2021", + NumericPeriod = 120, + Date = new DateTime(2021, 10, 1), + Price = 75.73m + }, + new StockPriceTrend() + { + Period = "Q1 2022", + NumericPeriod = 130, + Date = new DateTime(2022, 1, 1), + Price = 84.25m + }, + new StockPriceTrend() + { + Period = "Q2 2022", + NumericPeriod = 140, + Date = new DateTime(2022, 4, 1), + Price = 85.4m + }, + new StockPriceTrend() + { + Period = "Q3 2022", + NumericPeriod = 150, + Date = new DateTime(2022, 7, 1), + Price = 79.93m + }, + new StockPriceTrend() + { + Period = "Q4 2022", + NumericPeriod = 160, + Date = new DateTime(2022, 10, 1), + Price = 80.76m + }, + new StockPriceTrend() + { + Period = "Q1 2023", + NumericPeriod = 170, + Date = new DateTime(2023, 1, 1), + Price = 128.36m + }, + }; + } + + private class StockPriceTrend + { + public string Period { get; set; } + public int NumericPeriod { get; set; } + public DateTime Date { get; set; } + public decimal Price { get; set; } + } +} +````` + +### Logarithmic Trendline + +The `Logarithmic Trendline` is applied to data that displays rapid initial growth that slows over time or vice versa. It emphasizes trends with a logarithmic pattern, and it requires positive `X` values. + +>caption Chart with a Logarithmic Trendline + +`````CSHTML + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + private List ChartData { get; set; } + + protected override void OnInitialized() + { + ChartData = GetTrendlineData(); + } + + private List GetTrendlineData() + { + return new List() + { + new StockPriceTrend() + { + Period = "Q1 2019", + NumericPeriod = 10, + Date = new DateTime(2019, 1, 1), + Price = 10.28m + }, + new StockPriceTrend() + { + Period = "Q2 2019", + NumericPeriod = 20, + Date = new DateTime(2019, 4, 1), + Price = 20.54m + }, + new StockPriceTrend() + { + Period = "Q3 2019", + NumericPeriod = 30, + Date = new DateTime(2019, 7, 1), + Price = 29.33m + }, + new StockPriceTrend() + { + Period = "Q4 2019", + NumericPeriod = 40, + Date = new DateTime(2019, 10, 1), + Price = 69.81m + }, + new StockPriceTrend() + { + Period = "Q1 2020", + NumericPeriod = 50, + Date = new DateTime(2020, 1, 1), + Price = 45.5m + }, + new StockPriceTrend() + { + Period = "Q2 2020", + NumericPeriod = 60, + Date = new DateTime(2020, 4, 1), + Price = 57.54m + }, + new StockPriceTrend() + { + Period = "Q3 2020", + NumericPeriod = 70, + Date = new DateTime(2020, 7, 1), + Price = 68.3m + }, + new StockPriceTrend() + { + Period = "Q4 2020", + NumericPeriod = 80, + Date = new DateTime(2020, 10, 1), + Price = 70.73m + }, + new StockPriceTrend() + { + Period = "Q1 2021", + NumericPeriod = 90, + Date = new DateTime(2021, 1, 1), + Price = 68.15m + }, + new StockPriceTrend() + { + Period = "Q2 2021", + NumericPeriod = 100, + Date = new DateTime(2021, 4, 1), + Price = 76.24m + }, + new StockPriceTrend() + { + Period = "Q3 2021", + NumericPeriod = 110, + Date = new DateTime(2021, 7, 1), + Price = 52.3m + }, + new StockPriceTrend() + { + Period = "Q4 2021", + NumericPeriod = 120, + Date = new DateTime(2021, 10, 1), + Price = 75.73m + }, + new StockPriceTrend() + { + Period = "Q1 2022", + NumericPeriod = 130, + Date = new DateTime(2022, 1, 1), + Price = 84.25m + }, + new StockPriceTrend() + { + Period = "Q2 2022", + NumericPeriod = 140, + Date = new DateTime(2022, 4, 1), + Price = 85.4m + }, + new StockPriceTrend() + { + Period = "Q3 2022", + NumericPeriod = 150, + Date = new DateTime(2022, 7, 1), + Price = 79.93m + }, + new StockPriceTrend() + { + Period = "Q4 2022", + NumericPeriod = 160, + Date = new DateTime(2022, 10, 1), + Price = 80.76m + }, + new StockPriceTrend() + { + Period = "Q1 2023", + NumericPeriod = 170, + Date = new DateTime(2023, 1, 1), + Price = 128.36m + }, + }; + } + + private class StockPriceTrend + { + public string Period { get; set; } + public int NumericPeriod { get; set; } + public DateTime Date { get; set; } + public decimal Price { get; set; } + } +} +````` + +### Power Trendline + +The `Power Trendline` is used for data that follows a power-law relationship, indicating that one variable's change is proportional to a power of another variable. It helps highlight trends where the rate of change isn't constant. The `Y` and `X` require positive values. + +>caption Chart with a Power Trendline + +`````CSHTML + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + private List ChartData { get; set; } + + protected override void OnInitialized() + { + ChartData = GetTrendlineData(); + } + + private List GetTrendlineData() + { + return new List() + { + new StockPriceTrend() + { + Period = "Q1 2019", + NumericPeriod = 10, + Date = new DateTime(2019, 1, 1), + Price = 10.28m + }, + new StockPriceTrend() + { + Period = "Q2 2019", + NumericPeriod = 20, + Date = new DateTime(2019, 4, 1), + Price = 20.54m + }, + new StockPriceTrend() + { + Period = "Q3 2019", + NumericPeriod = 30, + Date = new DateTime(2019, 7, 1), + Price = 29.33m + }, + new StockPriceTrend() + { + Period = "Q4 2019", + NumericPeriod = 40, + Date = new DateTime(2019, 10, 1), + Price = 69.81m + }, + new StockPriceTrend() + { + Period = "Q1 2020", + NumericPeriod = 50, + Date = new DateTime(2020, 1, 1), + Price = 45.5m + }, + new StockPriceTrend() + { + Period = "Q2 2020", + NumericPeriod = 60, + Date = new DateTime(2020, 4, 1), + Price = 57.54m + }, + new StockPriceTrend() + { + Period = "Q3 2020", + NumericPeriod = 70, + Date = new DateTime(2020, 7, 1), + Price = 68.3m + }, + new StockPriceTrend() + { + Period = "Q4 2020", + NumericPeriod = 80, + Date = new DateTime(2020, 10, 1), + Price = 70.73m + }, + new StockPriceTrend() + { + Period = "Q1 2021", + NumericPeriod = 90, + Date = new DateTime(2021, 1, 1), + Price = 68.15m + }, + new StockPriceTrend() + { + Period = "Q2 2021", + NumericPeriod = 100, + Date = new DateTime(2021, 4, 1), + Price = 76.24m + }, + new StockPriceTrend() + { + Period = "Q3 2021", + NumericPeriod = 110, + Date = new DateTime(2021, 7, 1), + Price = 52.3m + }, + new StockPriceTrend() + { + Period = "Q4 2021", + NumericPeriod = 120, + Date = new DateTime(2021, 10, 1), + Price = 75.73m + }, + new StockPriceTrend() + { + Period = "Q1 2022", + NumericPeriod = 130, + Date = new DateTime(2022, 1, 1), + Price = 84.25m + }, + new StockPriceTrend() + { + Period = "Q2 2022", + NumericPeriod = 140, + Date = new DateTime(2022, 4, 1), + Price = 85.4m + }, + new StockPriceTrend() + { + Period = "Q3 2022", + NumericPeriod = 150, + Date = new DateTime(2022, 7, 1), + Price = 79.93m + }, + new StockPriceTrend() + { + Period = "Q4 2022", + NumericPeriod = 160, + Date = new DateTime(2022, 10, 1), + Price = 80.76m + }, + new StockPriceTrend() + { + Period = "Q1 2023", + NumericPeriod = 170, + Date = new DateTime(2023, 1, 1), + Price = 128.36m + }, + }; + } + + private class StockPriceTrend + { + public string Period { get; set; } + public int NumericPeriod { get; set; } + public DateTime Date { get; set; } + public decimal Price { get; set; } + } +} +````` + +### Polynomial Trendline + +The `Polynomial Trendline` is applied to data with complex patterns that cannot be captured by simpler trendlines. It fits a polynomial equation to the data points, allowing for a more flexible representation of trends with multiple turning points. + +>caption Chart with a Polynomial Trendline + +`````CSHTML + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + private List ChartData { get; set; } + + protected override void OnInitialized() + { + ChartData = GetTrendlineData(); + } + + private List GetTrendlineData() + { + return new List() + { + new StockPriceTrend() + { + Period = "Q1 2019", + NumericPeriod = 10, + Date = new DateTime(2019, 1, 1), + Price = 10.28m + }, + new StockPriceTrend() + { + Period = "Q2 2019", + NumericPeriod = 20, + Date = new DateTime(2019, 4, 1), + Price = 20.54m + }, + new StockPriceTrend() + { + Period = "Q3 2019", + NumericPeriod = 30, + Date = new DateTime(2019, 7, 1), + Price = 29.33m + }, + new StockPriceTrend() + { + Period = "Q4 2019", + NumericPeriod = 40, + Date = new DateTime(2019, 10, 1), + Price = 69.81m + }, + new StockPriceTrend() + { + Period = "Q1 2020", + NumericPeriod = 50, + Date = new DateTime(2020, 1, 1), + Price = 45.5m + }, + new StockPriceTrend() + { + Period = "Q2 2020", + NumericPeriod = 60, + Date = new DateTime(2020, 4, 1), + Price = 57.54m + }, + new StockPriceTrend() + { + Period = "Q3 2020", + NumericPeriod = 70, + Date = new DateTime(2020, 7, 1), + Price = 68.3m + }, + new StockPriceTrend() + { + Period = "Q4 2020", + NumericPeriod = 80, + Date = new DateTime(2020, 10, 1), + Price = 70.73m + }, + new StockPriceTrend() + { + Period = "Q1 2021", + NumericPeriod = 90, + Date = new DateTime(2021, 1, 1), + Price = 68.15m + }, + new StockPriceTrend() + { + Period = "Q2 2021", + NumericPeriod = 100, + Date = new DateTime(2021, 4, 1), + Price = 76.24m + }, + new StockPriceTrend() + { + Period = "Q3 2021", + NumericPeriod = 110, + Date = new DateTime(2021, 7, 1), + Price = 52.3m + }, + new StockPriceTrend() + { + Period = "Q4 2021", + NumericPeriod = 120, + Date = new DateTime(2021, 10, 1), + Price = 75.73m + }, + new StockPriceTrend() + { + Period = "Q1 2022", + NumericPeriod = 130, + Date = new DateTime(2022, 1, 1), + Price = 84.25m + }, + new StockPriceTrend() + { + Period = "Q2 2022", + NumericPeriod = 140, + Date = new DateTime(2022, 4, 1), + Price = 85.4m + }, + new StockPriceTrend() + { + Period = "Q3 2022", + NumericPeriod = 150, + Date = new DateTime(2022, 7, 1), + Price = 79.93m + }, + new StockPriceTrend() + { + Period = "Q4 2022", + NumericPeriod = 160, + Date = new DateTime(2022, 10, 1), + Price = 80.76m + }, + new StockPriceTrend() + { + Period = "Q1 2023", + NumericPeriod = 170, + Date = new DateTime(2023, 1, 1), + Price = 128.36m + }, + }; + } + + private class StockPriceTrend + { + public string Period { get; set; } + public int NumericPeriod { get; set; } + public DateTime Date { get; set; } + public decimal Price { get; set; } + } +} +````` + ## Chart Trendlines Parameters The following table lists Chart Trendlines parameters. | Parameter | Type | Description | | --- | --- | --- | +| `ChartSeriesMarkers.Visible` | `bool` | The visibility of the trendline markers. | | `ChartSeries.For` | `string` | The name of the parent series of the trendline. | | `ChartSeriesTrendline` | `object` | The trendline configuration options. | | `ChartSeriesTrendlineForecast` | `object` | The trendline forecast settings. By default, the trendline does not display a forecast. | From 9ccbb8282e7b1339df20e6e9baf8ab9b41d0fe39 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Mon, 29 Jan 2024 01:30:39 +0200 Subject: [PATCH 2/2] docs(charts): fixes as per comments --- components/chart/trendlines.md | 86 +++++++++++++++++----------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/components/chart/trendlines.md b/components/chart/trendlines.md index e5b2baad85..9c5a872b89 100644 --- a/components/chart/trendlines.md +++ b/components/chart/trendlines.md @@ -18,16 +18,47 @@ Trendline series use the data from the main series. When the main series employs The Chart supports the following fundamental types of trendlines: -* [`Linear Trendline`](#linear-trendline) -* [`Moving Average Trendline`](#moving-average-trendline) -* [`Exponential Trendline`](#exponential-trendline) -* [`Logarithmic Trendline`](#logarithmic-trendline) -* [`Power Trendline`](#power-trendline) -* [`Polynomial Trendline`](#polynomial-trendline) +* [Linear Trendline](#linear-trendline) +* [Moving Average Trendline](#moving-average-trendline) +* [Exponential Trendline](#exponential-trendline) +* [Logarithmic Trendline](#logarithmic-trendline) +* [Power Trendline](#power-trendline) +* [Polynomial Trendline](#polynomial-trendline) + +## Supported Series Types + +Trendlines are supported for the following chart types: + + * Area + * Bar + * BoxPlot + * Candlestick + * Column + * Line + * OHLC + * RangeArea + * RangeColumn + * Scatter + * ScatterLine + +## Chart Trendlines Parameters + +The following table lists Chart Trendlines parameters. + +| Parameter | Type | Description | +| --- | --- | --- | +| `ChartSeriesMarkers.Visible` | `bool` | The visibility of the trendline markers. | +| `ChartSeries.For` | `string` | The name of the parent series of the trendline. | +| `ChartSeriesTrendline` | `object` | The trendline configuration options. | +| `ChartSeriesTrendlineForecast` | `object` | The trendline forecast settings. By default, the trendline does not display a forecast. | +| `ChartSeriesTrendlineForecast.Before` | `int` | The number of intervals to extend the trendline before the first data point. | +| `ChartSeriesTrendlineForecast.After` | `int` | The number of intervals to extend the trendline after the last data point. | +| `ChartSeriesTrendline.Period` | `int` | The number of intervals to take when calculating averages. The value must be an integer greater than `2`. | +| `Type` | `ChartSeriesType` enum | The type of the series. | ### Linear Trendline -The `Linear Trendline` serves the purpose of indicating whether a specific quantity is on the rise or decline over time. +Use the Linear Trendline to visualize the rise or decline of a specific quantity over time. >caption Linear trendline in scatter line Chart series @@ -181,7 +212,7 @@ The `Linear Trendline` serves the purpose of indicating whether a specific quant ### Moving Average Trendline -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. +Use the Moving Average Trendline to smoothen out data fluctuations. This trendline computes and visualizes an average of all data points over a specified period. By default, this period is set to two chart intervals. >caption Line Chart with a moving average trendline @@ -322,7 +353,7 @@ The `Moving Average Trendline` smoothens out data fluctuations by computing an a ### Exponential Trendline -The `Exponential Trendline` shows data with rapidly accelerating growth or decay over time. It's used to emphasize trends that follow an exponential pattern, and it requires positive `Y` values. +Use the Exponential Trendline to visualize data with rapidly accelerating growth or decay over time. This trendline helps you to emphasize trends that follow an exponential pattern, and it requires positive `Y` values. >caption Chart with an Exponential Trendline @@ -508,7 +539,7 @@ The `Exponential Trendline` shows data with rapidly accelerating growth or decay ### Logarithmic Trendline -The `Logarithmic Trendline` is applied to data that displays rapid initial growth that slows over time or vice versa. It emphasizes trends with a logarithmic pattern, and it requires positive `X` values. +Use the Logarithmic Trendline to visualize data with rapid initial growth that slows over time or vice versa. This trendline emphasizes trends with a logarithmic pattern, and it requires positive `X` values. >caption Chart with a Logarithmic Trendline @@ -694,7 +725,7 @@ The `Logarithmic Trendline` is applied to data that displays rapid initial growt ### Power Trendline -The `Power Trendline` is used for data that follows a power-law relationship, indicating that one variable's change is proportional to a power of another variable. It helps highlight trends where the rate of change isn't constant. The `Y` and `X` require positive values. +Use the Power Trendline to visualize data that follows a power-law relationship, indicating that one variable's change is proportional to a power of another variable. This trendline helps you to highlight trends where the rate of change isn't constant. It requires positive `Y` and `X` values. >caption Chart with a Power Trendline @@ -881,7 +912,7 @@ The `Power Trendline` is used for data that follows a power-law relationship, in ### Polynomial Trendline -The `Polynomial Trendline` is applied to data with complex patterns that cannot be captured by simpler trendlines. It fits a polynomial equation to the data points, allowing for a more flexible representation of trends with multiple turning points. +Use the Polynomial Trendline to visualize complex data patterns not fitting the other trendlines. This trendline fits a polynomial equation to the data points, allowing for a more flexible representation of trends with multiple turning points. >caption Chart with a Polynomial Trendline @@ -1065,37 +1096,6 @@ The `Polynomial Trendline` is applied to data with complex patterns that cannot } ````` -## Chart Trendlines Parameters - -The following table lists Chart Trendlines parameters. - -| Parameter | Type | Description | -| --- | --- | --- | -| `ChartSeriesMarkers.Visible` | `bool` | The visibility of the trendline markers. | -| `ChartSeries.For` | `string` | The name of the parent series of the trendline. | -| `ChartSeriesTrendline` | `object` | The trendline configuration options. | -| `ChartSeriesTrendlineForecast` | `object` | The trendline forecast settings. By default, the trendline does not display a forecast. | -| `ChartSeriesTrendlineForecast.Before` | `int` | The number of intervals to extend the trendline before the first data point. | -| `ChartSeriesTrendlineForecast.After` | `int` | The number of intervals to extend the trendline after the last data point. | -| `ChartSeriesTrendline.Period` | `int` | The number of intervals to take when calculating averages. The value must be an integer greater than `2`. | -| `Type` | `ChartSeriesType` enum | The type of the series. | - -## Supported Series Types - -Trendlines are supported for the following chart types: - - * `Area` - * `Bar` - * `BoxPlot` - * `Candlestick` - * `Column` - * `Line` - * `OHLC` - * `RangeArea` - * `RangeColumn` - * `Scatter` - * `ScatterLine` - ## See Also * [Live Demos: Trendline Chart](https://demos.telerik.com/blazor-ui/chart/trendline-chart) \ No newline at end of file