зеркало из https://github.com/telerik/blazor-docs.git
Add documentation articles for Chart and StockChart No Data Template (#2461)
* docs(Chart): add no data template article * docs(StockChart): add no data template article * chore(Charts): apply suggestions * docs(Charts): change descriptions based on a suggestions
This commit is contained in:
Tsvetomir Hristov
GitHub
Родитель
7468ad0e3b
Коммит
e23483561d
|
|
@ -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 all series.
|
||||
slug: chart-no-data-template
|
||||
tags: telerik,blazor,chart,templates
|
||||
published: True
|
||||
position: 101
|
||||
---
|
||||
|
||||
|
||||
# No Data Template
|
||||
|
||||
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 `<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)
|
||||
|
||||
|
|
@ -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 all series.
|
||||
slug: stock-chart-no-data-template
|
||||
tags: telerik,blazor,stockchart,templates
|
||||
published: True
|
||||
position: 31
|
||||
---
|
||||
|
||||
|
||||
# No Data Template
|
||||
|
||||
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 `<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
|
||||
Загрузка…
Ссылка в новой задаче