diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/dynamic-data-update.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/dynamic-data-update.md index 3bc2f74bf6..62d5ba5632 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/dynamic-data-update.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/dynamic-data-update.md @@ -105,4 +105,3 @@ To replace the existing data source in the accumulation chart with a new data so {% endtabs %} {% endif %} - diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/empty-points.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/empty-points.md index 3d6cf9bcf1..c6a2782bf2 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/empty-points.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/empty-points.md @@ -66,3 +66,33 @@ border for an empty point can be set by using the `Border` property. {% endtabs %} {% endif %} +## Handling when no data is available + +{% if page.publishingplatform == "aspnet-core" %} + +When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When no data is available to render in the chart, the `NoDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![ASP.NET MVC Accumulation Chart Control](images/nodatatemplate-accumulationchart.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/dynamic-data-update.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/dynamic-data-update.md index 3bc2f74bf6..62d5ba5632 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/dynamic-data-update.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/dynamic-data-update.md @@ -105,4 +105,3 @@ To replace the existing data source in the accumulation chart with a new data so {% endtabs %} {% endif %} - diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/empty-points.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/empty-points.md index 5698d28a61..9d2da3b16b 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/empty-points.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/empty-points.md @@ -75,3 +75,33 @@ public class EmptyPointsChartData {% endtabs %} {% endif %} +## Handling when no data is available + +{% if page.publishingplatform == "aspnet-core" %} + +When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When no data is available to render in the chart, the `NoDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![ASP.NET Core Accumulation Chart Control](images/nodatatemplate-accumulationchart.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/accumulation-chart/images/nodatatemplate-accumulationchart.png b/ej2-asp-core-mvc/accumulation-chart/images/nodatatemplate-accumulationchart.png new file mode 100644 index 0000000000..fb7d5eee11 Binary files /dev/null and b/ej2-asp-core-mvc/accumulation-chart/images/nodatatemplate-accumulationchart.png differ diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/working-with-data.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/working-with-data.md index 8ec6c570fb..7b65b95e30 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/working-with-data.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/working-with-data.md @@ -342,4 +342,34 @@ Specific color for empty point can be set by `Fill` property in `EmptyPointSetti {% endtabs %} {% endif %} +## Handling when no data is available +{% if page.publishingplatform == "aspnet-core" %} + +When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/axis/working-data/no-data-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When no data is available to render in the chart, the `NoDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/axis/working-data/no-data-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![ASP.NET MVC Chart Control](images/nodatatemplate-chart.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/working-with-data.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/working-with-data.md index ed44fb6601..d0769dff80 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/working-with-data.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/working-with-data.md @@ -342,3 +342,33 @@ Specific color for empty point can be set by `fill` property in `emptyPointSetti {% endtabs %} {% endif %} +## Handling when no data is available + +{% if page.publishingplatform == "aspnet-core" %} + +When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/axis/working-data/no-data-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When no data is available to render in the chart, the `NoDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/axis/working-data/no-data-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![ASP.NET Core Chart Control](images/nodatatemplate-chart.png) diff --git a/ej2-asp-core-mvc/chart/images/nodatatemplate-chart.png b/ej2-asp-core-mvc/chart/images/nodatatemplate-chart.png new file mode 100644 index 0000000000..34799abb34 Binary files /dev/null and b/ej2-asp-core-mvc/chart/images/nodatatemplate-chart.png differ diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs new file mode 100644 index 0000000000..201a791e71 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs @@ -0,0 +1,7 @@ +public ActionResult Index() +{ + + return View(); +} + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor new file mode 100644 index 0000000000..5c4e142e87 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor @@ -0,0 +1,108 @@ + +@(Html.EJS().AccumulationChart("container").Series(series => { + series.DataSource(ViewBag.dataSource) + .XName("x") + .YName("y") + .Name("Browser") + .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie) + .ExplodeIndex(0).Add(); +}) + .EnableSmartLabels(true) + .Title("Mobile Browser Statistics").NoDataTemplate("#No-Data-Template").Load("load").Loaded("loaded") + .LegendSettings(ls => ls.Visible(false)).Render() +) + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper new file mode 100644 index 0000000000..0393d259d8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs b/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs new file mode 100644 index 0000000000..2d555a9aad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs @@ -0,0 +1,4 @@ +public ActionResult Index() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/razor b/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/razor new file mode 100644 index 0000000000..64d524f3c3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/razor @@ -0,0 +1,100 @@ +@(Html.EJS().Chart("container").Series(series => { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).XName("x").YName("y").Width(2).Marker(mk => mk.Visible(true).Width(7).Height(7)).Animation(an => an.Enable(true)).Add(); + }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0)).MajorTickLines(mt => mt.Width(0)) + ).PrimaryYAxis(py => py.Title("Production (in million pounds)").TitleStyle(ts => ts.FontWeight("600")).LineStyle(ls => ls.Width(0)).MajorTickLines(mt => mt.Width(0)) + ).ChartArea(ca => ca.Border(br => br.Width(0))).Title("Milk Production in US - 2025").SubTitle("Source: nass.usda.gov").Tooltip(tl => + tl.Enable(true).Header("Milk Production").Format("${point.x} : ${point.y}M") + ).NoDataTemplate("#No-Data-Template").LegendSettings(lg => lg.Visible(false)).Load("load").Loaded("loaded").Width("100%").Render() +) + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/tagHelper new file mode 100644 index 0000000000..e454f72f8e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/tagHelper @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/no-data-template.cs b/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/no-data-template.cs new file mode 100644 index 0000000000..3aebd6026a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/no-data-template.cs @@ -0,0 +1,16 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; + +namespace EJ2CoreSampleBrowser.Controllers.StockChart +{ + public partial class StockChartController : Controller + { + public IActionResult Default() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/razor b/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/razor new file mode 100644 index 0000000000..499c3f2b16 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/razor @@ -0,0 +1,105 @@ +@using Syncfusion.EJ2; + +@(Html.EJS().StockChart("container").Title("AAPL Stock Price") + .Series(sr => { + sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).Add(); + }) + .ChartArea(area => area.Border(br => br.Width(0))) + .Border(br => br.Width(1)).NoDataTemplate("#No-Data-Template").Load("load").Loaded("loaded") + .Render() +) + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/tagHelper b/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/tagHelper new file mode 100644 index 0000000000..ed5b38274b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/stock-chart/axis/working-data/no-data-template/tagHelper @@ -0,0 +1,109 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/stock-chart/EJ2_ASP.MVC/working-with-data.md b/ej2-asp-core-mvc/stock-chart/EJ2_ASP.MVC/working-with-data.md index f9c9eb64e8..09fc49c25c 100644 --- a/ej2-asp-core-mvc/stock-chart/EJ2_ASP.MVC/working-with-data.md +++ b/ej2-asp-core-mvc/stock-chart/EJ2_ASP.MVC/working-with-data.md @@ -42,6 +42,36 @@ You can bind a simple JSON data to the chart using [`DataSource`](https://help.s {% endtabs %} {% endif %} +## Handling when no data is available + +{% if page.publishingplatform == "aspnet-core" %} + +When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/stock-chart/axis/working-data/no-data-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/stock-chart/axis/working-data/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When no data is available to render in the chart, the `NoDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/stock-chart/axis/working-data/No-data-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/stock-chart/axis/working-data/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![ASP.NET MVC Stock Chart Control](images/nodatatemplate-stockchart.png) ## See Also diff --git a/ej2-asp-core-mvc/stock-chart/EJ2_ASP.NETCORE/working-with-data.md b/ej2-asp-core-mvc/stock-chart/EJ2_ASP.NETCORE/working-with-data.md index acdf4b2d11..e52f1282f9 100644 --- a/ej2-asp-core-mvc/stock-chart/EJ2_ASP.NETCORE/working-with-data.md +++ b/ej2-asp-core-mvc/stock-chart/EJ2_ASP.NETCORE/working-with-data.md @@ -42,7 +42,36 @@ You can bind a simple JSON data to the chart using [`dataSource`](https://help.s {% endtabs %} {% endif %} +## Handling when no data is available +{% if page.publishingplatform == "aspnet-core" %} + +When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/stock-chart/axis/working-data/no-data-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/stock-chart/axis/working-data/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When no data is available to render in the chart, the `NoDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/stock-chart/axis/working-data/No-data-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="No-data-template.cs" %} +{% include code-snippet/stock-chart/axis/working-data/no-data-template/no-data-template.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![ASP.NET Core Stock Chart Control](images/nodatatemplate-stockchart.png) ## See Also diff --git a/ej2-asp-core-mvc/stock-chart/images/nodatatemplate-stockchart.png b/ej2-asp-core-mvc/stock-chart/images/nodatatemplate-stockchart.png new file mode 100644 index 0000000000..f38a9de7ad Binary files /dev/null and b/ej2-asp-core-mvc/stock-chart/images/nodatatemplate-stockchart.png differ