Skip to content
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

Jump to bottom

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 3 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
a7c717b
docs(Charts): change descriptions
Tsvetomir-Hr Oct 30, 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

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 `<NoDataTemplate>` tag inside a `<ChartSettings>` tag:
Tsvetomir-Hr marked this conversation as resolved.
Show resolved Hide resolved

````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

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 `<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