Skip to content

Add documentation articles for Chart and StockChart No Data Template #2461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tsvetomir-Hr merged 4 commits into from
Nov 1, 2024
Merged

Add documentation articles for Chart and StockChart No Data Template #2461

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
546590d
docs(Chart): add no data template article
Tsvetomir-Hr Oct 23, 2024
5cfec0e
docs(StockChart): add no data template article
Tsvetomir-Hr Oct 23, 2024
73ff1d4
chore(Charts): apply suggestions
Tsvetomir-Hr Oct 28, 2024
546f5f6
docs(Charts): change descriptions based on a suggestions
Tsvetomir-Hr Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions components/chart/templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<NoDataTemplate>` tag inside a `<ChartSettings>` tag:

````CSHTML
<TelerikButton OnClick="@UpdateData">@ButtonContent</TelerikButton>
<br />
<TelerikChart @ref="ChartRef" Width="800px" Height="400px">
<ChartTitle Text="Product Sales Over the Years" Position="@ChartTitlePosition.Bottom"></ChartTitle>

<ChartSettings>
@* Define what should be shown when there's no data in the chart *@
<NoDataTemplate>
<p>No data available to display. Please add product data or check back later.</p>
</NoDataTemplate>
</ChartSettings>

<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Column"
Data="@ChartData"
Name="Product Sales"
Field="@nameof(ChartSeriesData.ProductSales)"
CategoryField="@nameof(ChartSeriesData.Year)">
</ChartSeries>
</ChartSeriesItems>
</TelerikChart>

@code {
private const string Add = "Add Data";
private const string Remove = "Remove Data";

private TelerikChart ChartRef { get; set; }
private List<ChartSeriesData> ChartData { get; set; } = new List<ChartSeriesData>();
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<ChartSeriesData>();
ButtonContent = Add;
}
ChartRef.Refresh(); // Refresh the Chart
}

public class ChartSeriesData
{
public int ProductSales { get; set; }
public int Year { get; set; }

public static List<ChartSeriesData> GenerateData()
{
List<ChartSeriesData> data = new List<ChartSeriesData>
{
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)

156 changes: 156 additions & 0 deletions components/stockchart/templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<NoDataTemplate>` tag inside a `<StockChartSettings>` tag:

````CSHTML
<TelerikButton OnClick="@UpdateData">@ButtonContent</TelerikButton>
<br />
<TelerikStockChart @ref="StockChartRef"
Width="800px"
Height="400px"
DateField="@nameof(StockChartSeriesData.Date)">
<StockChartTitle Text="Stocks data" Position="@ChartTitlePosition.Bottom"></StockChartTitle>

<StockChartSettings>
@* Define what should be shown when there's no data in the chart *@
<NoDataTemplate>
<p>No data available to display. Please add stock data or check back later.</p>
</NoDataTemplate>
</StockChartSettings>

<StockChartSeriesItems>
<StockChartSeries Type="StockChartSeriesType.Candlestick"
Name="Product 1"
Data="@StockChartData"
OpenField="@nameof(StockChartSeriesData.Open)"
CloseField="@nameof(StockChartSeriesData.Close)"
HighField="@nameof(StockChartSeriesData.High)"
LowField="@nameof(StockChartSeriesData.Low)">
</StockChartSeries>
</StockChartSeriesItems>

<StockChartNavigator>
<StockChartNavigatorSeriesItems>
<StockChartNavigatorSeries Type="StockChartSeriesType.Candlestick"
Name="Product 1"
Data="@StockChartData"
OpenField="@nameof(StockChartSeriesData.Open)"
CloseField="@nameof(StockChartSeriesData.Close)"
HighField="@nameof(StockChartSeriesData.High)"
LowField="@nameof(StockChartSeriesData.Low)">
</StockChartNavigatorSeries>
</StockChartNavigatorSeriesItems>
</StockChartNavigator>
</TelerikStockChart>

@code {
private const string Add = "Add Data";
private const string Remove = "Remove Data";

private TelerikStockChart StockChartRef { get; set; }
private List<StockChartSeriesData> StockChartData { get; set; } = new List<StockChartSeriesData>();
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<StockChartSeriesData>();
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<StockChartSeriesData> GenerateData()
{
List<StockChartSeriesData> data = new List<StockChartSeriesData>
{
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;
}
}
}
````


Loading