From 8cb0a6c9deac5ca311bab3060f3ccae8b2221cb4 Mon Sep 17 00:00:00 2001 From: HarishRaja-SF4430 <159987977+HarishRaja-SF4430@users.noreply.github.com> Date: Thu, 6 Jun 2024 14:18:14 +0530 Subject: [PATCH 1/4] 889328: Need to move the web service link into 'services.syncfusion.com' from 'ej2services.syncfusion.com --- .../code-snippet/rich-text-editor/file-browser/controller.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/file-browser/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/file-browser/controller.cs index 66c726d80e..e04b24c47b 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/file-browser/controller.cs +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/file-browser/controller.cs @@ -2,7 +2,7 @@ { public ActionResult Index() { - string hostUrl = "https://services.syncfusion.com/aspnet/production/"; + string hostUrl = "https://ej2-aspcore-service.azurewebsites.net/"; ViewBag.ajaxSettings = new { url = hostUrl + "api/FileManager/FileOperations", getImageUrl = hostUrl + "api/FileManager/GetImage", From ae935571ff0f80e0c4214509119b0eacdce464c2 Mon Sep 17 00:00:00 2001 From: Soundeswari-Selvam Date: Mon, 10 Jun 2024 17:18:16 +0530 Subject: [PATCH 2/4] 889696: Added sample changes in Chart controls. --- .../chart/EJ2_ASP.MVC/dynamic-data-update.md | 139 ++++++++++++++++++ .../dynamic-update/add-point/add-point.cs | 21 +++ .../chart/dynamic-update/add-point/razor | 26 ++++ .../chart/dynamic-update/add-point/tagHelper | 32 ++++ .../click-add-point/click-add-point.cs | 15 ++ .../dynamic-update/click-add-point/razor | 62 ++++++++ .../dynamic-update/click-add-point/tagHelper | 69 +++++++++ .../chart/dynamic-update/remove-point/razor | 26 ++++ .../remove-point/remove-point.cs | 21 +++ .../dynamic-update/remove-point/tagHelper | 32 ++++ .../chart/dynamic-update/set-data/razor | 45 ++++++ .../chart/dynamic-update/set-data/set-data.cs | 20 +++ .../chart/dynamic-update/set-data/tagHelper | 51 +++++++ ej2-asp-core-toc.html | 1 + ej2-asp-mvc-toc.html | 1 + 15 files changed, 561 insertions(+) create mode 100644 ej2-asp-core-mvc/chart/EJ2_ASP.MVC/dynamic-data-update.md create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/razor create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/razor create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/razor create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/remove-point.cs create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/razor create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/set-data.cs create mode 100644 ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/tagHelper diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/dynamic-data-update.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/dynamic-data-update.md new file mode 100644 index 0000000000..2ac7d22902 --- /dev/null +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/dynamic-data-update.md @@ -0,0 +1,139 @@ +--- +layout: post +title: Dynamic data update in ##Platform_Name## Syncfusion Chart Component +description: Learn here all about dynamic data update in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Dynamic Data Update +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Dynamic data update in ##Platform_Name## Chart Component + +## Adding a new data point + +The `AddPoint` method is used to dynamically add a new data point to the chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire chart. This method takes two parameters: + +* The first parameter is the new data point to add to your existing data source. +* The optional second parameter specifies the animation duration for adding the new data point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/add-point/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Add-point.cs" %} +{% include code-snippet/chart/dynamic-update/add-point/add-point.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/add-point/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Add-point.cs" %} +{% include code-snippet/chart/dynamic-update/add-point/add-point.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Removing an existing data point + +The `RemovePoint` method is used to dynamically remove a data point from the chart series. This method is particularly useful when you want to update the chart by removing an existing data point without having to refresh the entire chart. This method takes two parameters: + +* The first parameter is the index of the data point that needs to be removed from the existing data source. +* The optional second parameter specifies the animation duration for removing the data point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/remove-point/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Remove-point.cs" %} +{% include code-snippet/chart/dynamic-update/remove-point/remove-point.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/remove-point/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Remove-point.cs" %} +{% include code-snippet/chart/dynamic-update/remove-point/remove-point.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Replacing entire data points + +To replace the existing data source in the chart with a new data source, you can simply use the `SetData` method. This method allows you to replace the existing data points in the chart series with a new set of data points, enabling you to easily update the chart with new information. This method takes two parameters: + +* The first parameter is the new set of data points to be updated. +* The optional second parameter specifies the animation duration for updating the new data source. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/set-data/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Set-data.cs" %} +{% include code-snippet/chart/dynamic-update/set-data/set-data.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/set-data/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Set-data.cs" %} +{% include code-snippet/chart/dynamic-update/set-data/set-data.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Click to add or remove a data point + +You can use mouse or touch events to dynamically add or remove data points from an existing data source by clicking on the appropriate position within the chart area. To add a new data point to the existing data source, click anywhere in the chart area, retrieve the x-axis and y-axis information of the clicked location from the `ChartMouseClick` event arguments. Then, utilize the `AddPoint` method to add a new data point to the existing data source. + +To remove a data point from the existing data source, simply click on the desired data point. To achieve this, first, verify whether the clicked data point obtained from `ChartMouseClick` already exists in the data source. If it does, remove it by utilizing the `RemovePoint` method based on its index. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/click-add-point/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Click-add-point.cs" %} +{% include code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/click-add-point/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Click-add-point.cs" %} +{% include code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs new file mode 100644 index 0000000000..1e2ea5d703 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs @@ -0,0 +1,21 @@ +public ActionResult Index() +{ + List chartData = new List + { + new DynamicChartData{ x= "Germany", y= 72 }, + new DynamicChartData{ x= "Russia", y= 103.1 }, + new DynamicChartData{ x= "Brazil", y= 139.1 }, + new DynamicChartData{ x= "India", y= 462.1 }, + new DynamicChartData{ x= "China", y= 721.4 }, + new DynamicChartData{ x= "USA", y= 286.9 }, + new DynamicChartData{ x= "Great Britain", y= 115.1 }, + new DynamicChartData{ x= "Nigeria", y= 97.2 }, + }; + ViewBag.dataSource = chartData; + return View(); +} +public class DynamicChartData +{ + public string x; + public double y; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/razor b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/razor new file mode 100644 index 0000000000..912d6d7514 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/razor @@ -0,0 +1,26 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline). + XName("x"). + YName("y"). + Name("Users"). + Width(2). + Marker(mr => mr.Visible(true).DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top) + .Font(font => font.FontWeight("600")))) + DataSource(ViewBag.dataSource). + Add(); + }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).EnableTrim(false).MajorGridLines(mg => mg.Width(0)).MajorTickLines(mt => mt.Width(0)) + ).PrimaryYAxis(py => py.Minimum(0).Maximum(800).LabelFormat("{value}M").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift) + ).Title("Internet Users - 2016").LegendSettings(leg => leg.Visible(false) + ).ChartArea(area => area.Border(br => br.Width(1))).Render() + +
+ @Html.EJS().Button("add").IsPrimary(true).Content("Add Point").Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/tagHelper new file mode 100644 index 0000000000..721e0678e3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/tagHelper @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs new file mode 100644 index 0000000000..55da9200fb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs @@ -0,0 +1,15 @@ +public ActionResult Index() +{ + List chartData = new List + { + new DynamicChartData { x = 20, y = 20 }, + new DynamicChartData { x = 80, y = 80 } + }; + ViewBag.dataSource = chartData; + return View(); +} +public class DynamicChartData +{ + public double x; + public double y; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/razor b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/razor new file mode 100644 index 0000000000..b352916415 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/razor @@ -0,0 +1,62 @@ +@Html.EJS().Chart("container").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line) + .XName("x") + .YName("y") + .Width(3) + .Marker(marker => marker.Visible(true).Width(13).Height(13).IsFilled(true)) + .DataSource(ViewBag.dataSource) + .Add(); + }).PrimaryXAxis(px => px.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Additional).MajorGridLines(mg => mg.Width(0)) + ).PrimaryYAxis(py => py.Title("Value").Interval(20).LineStyle(ls => ls.Width(0)).MajorTickLines(mt => mt.Width(0)) + ).Tooltip(tt => tt.Enable(true)).Title("User supplied data").ChartArea(area => area.Border(br => br.Width(0))).Load("load").ChartMouseClick("chartMouseClick").AxisRangeCalculated("axisRangeCalculated").Render() + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/tagHelper new file mode 100644 index 0000000000..1fef23cd7e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/tagHelper @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/razor b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/razor new file mode 100644 index 0000000000..ff88ab7000 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/razor @@ -0,0 +1,26 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline). + XName("x"). + YName("y"). + Name("Users"). + Width(2). + Marker(mr => mr.Visible(true).DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top) + .Font(font => font.FontWeight("600")))) + DataSource(ViewBag.dataSource). + Add(); + }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).EnableTrim(false).MajorGridLines(mg => mg.Width(0)).MajorTickLines(mt => mt.Width(0)) + ).PrimaryYAxis(py => py.Minimum(0).Maximum(800).LabelFormat("{value}M").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift) + ).Title("Internet Users - 2016").LegendSettings(leg => leg.Visible(false) + ).ChartArea(area => area.Border(br => br.Width(1))).Render() + +
+ @Html.EJS().Button("remove").IsPrimary(true).Content("Remove Point").Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/remove-point.cs b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/remove-point.cs new file mode 100644 index 0000000000..1e2ea5d703 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/remove-point.cs @@ -0,0 +1,21 @@ +public ActionResult Index() +{ + List chartData = new List + { + new DynamicChartData{ x= "Germany", y= 72 }, + new DynamicChartData{ x= "Russia", y= 103.1 }, + new DynamicChartData{ x= "Brazil", y= 139.1 }, + new DynamicChartData{ x= "India", y= 462.1 }, + new DynamicChartData{ x= "China", y= 721.4 }, + new DynamicChartData{ x= "USA", y= 286.9 }, + new DynamicChartData{ x= "Great Britain", y= 115.1 }, + new DynamicChartData{ x= "Nigeria", y= 97.2 }, + }; + ViewBag.dataSource = chartData; + return View(); +} +public class DynamicChartData +{ + public string x; + public double y; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/tagHelper new file mode 100644 index 0000000000..3a3d07c92a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/tagHelper @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/razor b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/razor new file mode 100644 index 0000000000..5489df99e5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/razor @@ -0,0 +1,45 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column). + XName("x"). + YName("y"). + ColumnWidth(0.5). + CornerRadius(cr => cr.TopLeft(15).TopRight(15)). + DataSource(ViewBag.dataSource). + Add(); + }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0)).LabelStyle(ls => ls.Size("12px")).LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90) + ).PrimaryYAxis(py => py.Title("Sales (in percentage)").Minimum(0).Maximum(100).Interval(5).LabelFormat("{value}%").LineStyle(ls => ls.Width(0)).MajorTickLines(mt => mt.Width(0)) + ).Title("Sales by product").ChartArea(area => area.Border(br => br.Width(0))).AxisRangeCalculated("axisRangeCalculated").Render() + +
+ @Html.EJS().Button("update").IsPrimary(true).Content("Update Data").Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/set-data.cs b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/set-data.cs new file mode 100644 index 0000000000..7b19f1c505 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/set-data.cs @@ -0,0 +1,20 @@ +public ActionResult Index() +{ + List chartData = new List + { + new DynamicChartData{ x= "Jewellery", y= 75 }, + new DynamicChartData{ x= "Shoes", y= 45 }, + new DynamicChartData{ x= "Footwear", y= 73 }, + new DynamicChartData{ x= "Pet Services", y= 53 }, + new DynamicChartData{ x= "Business Clothing", y= 85 }, + new DynamicChartData{ x= "Office Supplies", y= 68 }, + new DynamicChartData{ x= "Food", y= 45 } + }; + ViewBag.dataSource = chartData; + return View(); +} +public class DynamicChartData +{ + public string x; + public double y; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/tagHelper new file mode 100644 index 0000000000..16ac14acd3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/tagHelper @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + +
+ +
+ \ No newline at end of file diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 62dabc1263..e17d90ef24 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -420,6 +420,7 @@
  • Getting Started
  • Working with Data
    • +
  • Dynamic Data Update
  • Chart Dimensions
  • Category Axis
  • Numeric Axis
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index ff1a5aba40..bf2243c63e 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -372,6 +372,7 @@
    • Getting Started
    • Working with Data
      • +
    • Dynamic Data Update
    • Chart Dimensions
    • Category Axis
    • Numeric Axis
      • From ce543ea58ae5717e8448c17b696d9290a87a6953 Mon Sep 17 00:00:00 2001 From: Soundeswari-Selvam Date: Mon, 10 Jun 2024 18:34:56 +0530 Subject: [PATCH 3/4] 889696: Added sample changes in Chart controls. --- .../code-snippet/chart/dynamic-update/add-point/add-point.cs | 2 +- .../chart/dynamic-update/remove-point/remove-point.cs | 2 +- .../code-snippet/chart/dynamic-update/set-data/tagHelper | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs index 1e2ea5d703..a6bc8d9923 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs @@ -9,7 +9,7 @@ public ActionResult Index() new DynamicChartData{ x= "China", y= 721.4 }, new DynamicChartData{ x= "USA", y= 286.9 }, new DynamicChartData{ x= "Great Britain", y= 115.1 }, - new DynamicChartData{ x= "Nigeria", y= 97.2 }, + new DynamicChartData{ x= "Nigeria", y= 97.2 } }; ViewBag.dataSource = chartData; return View(); diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/remove-point.cs b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/remove-point.cs index 1e2ea5d703..a6bc8d9923 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/remove-point.cs +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/remove-point/remove-point.cs @@ -9,7 +9,7 @@ public ActionResult Index() new DynamicChartData{ x= "China", y= 721.4 }, new DynamicChartData{ x= "USA", y= 286.9 }, new DynamicChartData{ x= "Great Britain", y= 115.1 }, - new DynamicChartData{ x= "Nigeria", y= 97.2 }, + new DynamicChartData{ x= "Nigeria", y= 97.2 } }; ViewBag.dataSource = chartData; return View(); diff --git a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/tagHelper index 16ac14acd3..8be5f1124e 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/dynamic-update/set-data/tagHelper @@ -1,7 +1,7 @@ - + From 02b3d80ad2b604e3c899d0898df5ea77590b123c Mon Sep 17 00:00:00 2001 From: Soundeswari-Selvam Date: Mon, 10 Jun 2024 18:36:54 +0530 Subject: [PATCH 4/4] 889696: Added sample changes in Chart controls. --- .../EJ2_ASP.NETCORE/dynamic-data-update.md | 139 ++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/dynamic-data-update.md diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/dynamic-data-update.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/dynamic-data-update.md new file mode 100644 index 0000000000..2ac7d22902 --- /dev/null +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/dynamic-data-update.md @@ -0,0 +1,139 @@ +--- +layout: post +title: Dynamic data update in ##Platform_Name## Syncfusion Chart Component +description: Learn here all about dynamic data update in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Dynamic Data Update +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Dynamic data update in ##Platform_Name## Chart Component + +## Adding a new data point + +The `AddPoint` method is used to dynamically add a new data point to the chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire chart. This method takes two parameters: + +* The first parameter is the new data point to add to your existing data source. +* The optional second parameter specifies the animation duration for adding the new data point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/add-point/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Add-point.cs" %} +{% include code-snippet/chart/dynamic-update/add-point/add-point.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/add-point/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Add-point.cs" %} +{% include code-snippet/chart/dynamic-update/add-point/add-point.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Removing an existing data point + +The `RemovePoint` method is used to dynamically remove a data point from the chart series. This method is particularly useful when you want to update the chart by removing an existing data point without having to refresh the entire chart. This method takes two parameters: + +* The first parameter is the index of the data point that needs to be removed from the existing data source. +* The optional second parameter specifies the animation duration for removing the data point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/remove-point/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Remove-point.cs" %} +{% include code-snippet/chart/dynamic-update/remove-point/remove-point.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/remove-point/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Remove-point.cs" %} +{% include code-snippet/chart/dynamic-update/remove-point/remove-point.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Replacing entire data points + +To replace the existing data source in the chart with a new data source, you can simply use the `SetData` method. This method allows you to replace the existing data points in the chart series with a new set of data points, enabling you to easily update the chart with new information. This method takes two parameters: + +* The first parameter is the new set of data points to be updated. +* The optional second parameter specifies the animation duration for updating the new data source. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/set-data/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Set-data.cs" %} +{% include code-snippet/chart/dynamic-update/set-data/set-data.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/set-data/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Set-data.cs" %} +{% include code-snippet/chart/dynamic-update/set-data/set-data.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Click to add or remove a data point + +You can use mouse or touch events to dynamically add or remove data points from an existing data source by clicking on the appropriate position within the chart area. To add a new data point to the existing data source, click anywhere in the chart area, retrieve the x-axis and y-axis information of the clicked location from the `ChartMouseClick` event arguments. Then, utilize the `AddPoint` method to add a new data point to the existing data source. + +To remove a data point from the existing data source, simply click on the desired data point. To achieve this, first, verify whether the clicked data point obtained from `ChartMouseClick` already exists in the data source. If it does, remove it by utilizing the `RemovePoint` method based on its index. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/click-add-point/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Click-add-point.cs" %} +{% include code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/dynamic-update/click-add-point/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Click-add-point.cs" %} +{% include code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +