From 546590d3b77d2bbd2dc81dfceb75fb51910aa6fe Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 23 Oct 2024 15:30:47 +0300 Subject: [PATCH 1/4] docs(Chart): add no data template article --- components/chart/templates.md | 88 +++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 components/chart/templates.md diff --git a/components/chart/templates.md b/components/chart/templates.md new file mode 100644 index 0000000000..d8383834c5 --- /dev/null +++ b/components/chart/templates.md @@ -0,0 +1,88 @@ +--- +title: No Data Template +page_title: Chart - No Data Template +description: The NoDataTemplate in the Chart for Blazor lets you customize the content displayed when no data is available for any series. +slug: chart-no-data-template +tags: telerik,blazor,chart,templates +published: True +position: 101 +--- + + +# No Data Template + +The `NoDataTemplate` allows you to define custom content when any of the Chart series has no data to show. To change the default **No data** localizable text, declare a `` tag inside a `` tag: + +````CSHTML +@ButtonContent +
+ + + + + @* Define what should be shown when there's no data in the chart *@ + +

No data available to display. Please add product data or check back later.

+ + + + + + + + + +@code { + private const string Add = "Add Data"; + private const string Remove = "Remove Data"; + + private TelerikChart ChartRef { get; set; } + private List ChartData { get; set; } = new List(); + private string ButtonContent { get; set; } = Add; + + private void UpdateData() + { + if (ChartData == null || ChartData?.Count() == 0) + { + ChartData = ChartSeriesData.GenerateData(); + ButtonContent = Remove; + } + else + { + // Clear the data + ChartData = new List(); + ButtonContent = Add; + } + ChartRef.Refresh(); // Refresh the Chart + } + + public class ChartSeriesData + { + public int ProductSales { get; set; } + public int Year { get; set; } + + public static List GenerateData() + { + List data = new List + { + new ChartSeriesData { ProductSales = 120, Year = 2020 }, + new ChartSeriesData { ProductSales = 180, Year = 2021 }, + new ChartSeriesData { ProductSales = 150, Year = 2022 }, + new ChartSeriesData { ProductSales = 210, Year = 2023 }, + new ChartSeriesData { ProductSales = 90, Year = 2024 } + }; + + return data; + } + } +} +```` + +## See Also + + * [Live Demo: Chart - No Data Template](https://demos.telerik.com/blazor-ui/chart/no-data-template) + From 5cfec0e324a1cca7c7234476d01a5e99b5fa0233 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 23 Oct 2024 15:31:15 +0300 Subject: [PATCH 2/4] docs(StockChart): add no data template article --- components/stockchart/templates.md | 156 +++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 components/stockchart/templates.md diff --git a/components/stockchart/templates.md b/components/stockchart/templates.md new file mode 100644 index 0000000000..025b209984 --- /dev/null +++ b/components/stockchart/templates.md @@ -0,0 +1,156 @@ +--- +title: No Data Template +page_title: Stock Chart - No Data Template +description: The NoDataTemplate in the Stock Chart for Blazor lets you customize the content displayed when no data is available for any series. +slug: stock-chart-no-data-template +tags: telerik,blazor,stockchart,templates +published: True +position: 31 +--- + + +# No Data Template + +The `NoDataTemplate` allows you to define custom content when any of the Stock Chart series has no data to show. To change the default **No data** localizable text, declare a `` tag inside a `` tag: + +````CSHTML +@ButtonContent +
+ + + + + @* Define what should be shown when there's no data in the chart *@ + +

No data available to display. Please add stock data or check back later.

+ + + + + + + + + + + + + + + + +@code { + private const string Add = "Add Data"; + private const string Remove = "Remove Data"; + + private TelerikStockChart StockChartRef { get; set; } + private List StockChartData { get; set; } = new List(); + private string ButtonContent { get; set; } = Add; + + private void UpdateData() + { + if (StockChartData == null || StockChartData?.Count() == 0) + { + StockChartData = StockChartSeriesData.GenerateData(); + ButtonContent = Remove; + } + else + { + // Clear the data + StockChartData = new List(); + ButtonContent = Add; + } + StockChartRef.Refresh(); // Refresh the Chart + } + + public class StockChartSeriesData + { + public DateTime Date { get; set; } + public decimal Open { get; set; } + public decimal High { get; set; } + public decimal Low { get; set; } + public decimal Close { get; set; } + public int Volume { get; set; } + + public static List GenerateData() + { + List data = new List + { + new StockChartSeriesData() + { + Date = DateTime.Parse("2024/01/03"), + Open = 41.62m, + High = 41.69m, + Low = 39.81m, + Close = 40.12m, + Volume = 2632000 + }, + new StockChartSeriesData() + { + Date = DateTime.Parse("2024/01/04"), + Open = 39.88m, + High = 41.12m, + Low = 39.75m, + Close = 40.12m, + Volume = 3584700 + }, + new StockChartSeriesData() + { + Date = DateTime.Parse("2024/01/05"), + Open = 42m, + High = 43.31m, + Low = 41.38m, + Close = 42.62m, + Volume = 7631700 + }, + new StockChartSeriesData() + { + Date = DateTime.Parse("2024/01/06"), + Open = 42.25m, + High = 43.44m, + Low = 41.12m, + Close = 43.06m, + Volume = 4922200 + }, + new StockChartSeriesData() + { + Date = DateTime.Parse("2024/01/07"), + Open = 43.88m, + High = 44.88m, + Low = 43.69m, + Close = 44.12m, + Volume = 6008300 + }, + new StockChartSeriesData() + { + Date = DateTime.Parse("2024/01/10"), + Open = 44.31m, + High = 44.5m, + Low = 43.5m, + Close = 43.69m, + Volume = 2400000 + }, + }; + + return data; + } + } +} +```` + + From 73ff1d49f4f1e913aaa65c0f0d4fdbad48702fce Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 28 Oct 2024 13:23:26 +0200 Subject: [PATCH 3/4] chore(Charts): apply suggestions --- components/chart/templates.md | 2 +- components/stockchart/templates.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/chart/templates.md b/components/chart/templates.md index d8383834c5..be72cd63bb 100644 --- a/components/chart/templates.md +++ b/components/chart/templates.md @@ -11,7 +11,7 @@ position: 101 # No Data Template -The `NoDataTemplate` allows you to define custom content when any of the Chart series has no data to show. To change the default **No data** localizable text, declare a `` tag inside a `` tag: +When a Chart series has no data to show, you can use the `NoDataTemplate` to display custom content. This is a global Chart setting and applies to all instances where a Chart series does not have any data to show. To change the default **No data** localizable text, declare a `` tag inside a `` tag: ````CSHTML @ButtonContent diff --git a/components/stockchart/templates.md b/components/stockchart/templates.md index 025b209984..96712f3347 100644 --- a/components/stockchart/templates.md +++ b/components/stockchart/templates.md @@ -11,7 +11,7 @@ position: 31 # No Data Template -The `NoDataTemplate` allows you to define custom content when any of the Stock Chart series has no data to show. To change the default **No data** localizable text, declare a `` tag inside a `` tag: +When a StockChart series has no data to show, you can use the `NoDataTemplate` to display custom content. This is a global StockChart setting and applies to all instances where a StockChart series does not have any data to show. To change the default **No data** localizable text, declare a `` tag inside a `` tag: ````CSHTML @ButtonContent From 546f5f65c43a0b9ba20e698e9692b55fd06b6437 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Fri, 1 Nov 2024 11:08:47 +0200 Subject: [PATCH 4/4] docs(Charts): change descriptions based on a suggestions --- components/chart/templates.md | 4 ++-- components/stockchart/templates.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/chart/templates.md b/components/chart/templates.md index be72cd63bb..0111ec778b 100644 --- a/components/chart/templates.md +++ b/components/chart/templates.md @@ -1,7 +1,7 @@ --- title: No Data Template page_title: Chart - No Data Template -description: The NoDataTemplate in the Chart for Blazor lets you customize the content displayed when no data is available for any series. +description: The NoDataTemplate in the Chart for Blazor lets you customize the content displayed when no data is available for all series. slug: chart-no-data-template tags: telerik,blazor,chart,templates published: True @@ -11,7 +11,7 @@ position: 101 # No Data Template -When a Chart series has no data to show, you can use the `NoDataTemplate` to display custom content. This is a global Chart setting and applies to all instances where a Chart series does not have any data to show. To change the default **No data** localizable text, declare a `` tag inside a `` tag: +Starting in **version 7.0.0**, when all Chart series have no data to show, a default layout with **No data** text is displayed over the Chart. To customize the default layout content declare a `` tag inside a `` tag: ````CSHTML @ButtonContent diff --git a/components/stockchart/templates.md b/components/stockchart/templates.md index 96712f3347..ab5f858dcc 100644 --- a/components/stockchart/templates.md +++ b/components/stockchart/templates.md @@ -1,7 +1,7 @@ --- title: No Data Template page_title: Stock Chart - No Data Template -description: The NoDataTemplate in the Stock Chart for Blazor lets you customize the content displayed when no data is available for any series. +description: The NoDataTemplate in the Stock Chart for Blazor lets you customize the content displayed when no data is available for all series. slug: stock-chart-no-data-template tags: telerik,blazor,stockchart,templates published: True @@ -11,7 +11,7 @@ position: 31 # No Data Template -When a StockChart series has no data to show, you can use the `NoDataTemplate` to display custom content. This is a global StockChart setting and applies to all instances where a StockChart series does not have any data to show. To change the default **No data** localizable text, declare a `` tag inside a `` tag: +Starting in **version 7.0.0**, when all StockChart series have no data to show, a default layout with **No data** text is displayed over the StockChart. To customize the default layout content declare a `` tag inside a `` tag. ````CSHTML @ButtonContent