Skip to content

Commit e209e2e

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #3034 from Syncfusion-Content/development
DOCINFRA-2341_merged_using_automation
2 parents 20b309e + cb3745b commit e209e2e

File tree

17 files changed

+701
-1
lines changed

17 files changed

+701
-1
lines changed

‎ej2-asp-core-mvc/chart/EJ2_ASP.MVC/dynamic-data-update.md

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
layout: post
3+
title: Dynamic data update in ##Platform_Name## Syncfusion Chart Component
4+
description: Learn here all about dynamic data update in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Dynamic Data Update
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
12+
# Dynamic data update in ##Platform_Name## Chart Component
13+
14+
## Adding a new data point
15+
16+
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:
17+
18+
* The first parameter is the new data point to add to your existing data source.
19+
* The optional second parameter specifies the animation duration for adding the new data point.
20+
21+
{% if page.publishingplatform == "aspnet-core" %}
22+
23+
{% tabs %}
24+
{% highlight cshtml tabtitle="CSHTML" %}
25+
{% include code-snippet/chart/dynamic-update/add-point/tagHelper %}
26+
{% endhighlight %}
27+
{% highlight c# tabtitle="Add-point.cs" %}
28+
{% include code-snippet/chart/dynamic-update/add-point/add-point.cs %}
29+
{% endhighlight %}
30+
{% endtabs %}
31+
32+
{% elsif page.publishingplatform == "aspnet-mvc" %}
33+
34+
{% tabs %}
35+
{% highlight razor tabtitle="CSHTML" %}
36+
{% include code-snippet/chart/dynamic-update/add-point/razor %}
37+
{% endhighlight %}
38+
{% highlight c# tabtitle="Add-point.cs" %}
39+
{% include code-snippet/chart/dynamic-update/add-point/add-point.cs %}
40+
{% endhighlight %}
41+
{% endtabs %}
42+
{% endif %}
43+
44+
45+
46+
## Removing an existing data point
47+
48+
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:
49+
50+
* The first parameter is the index of the data point that needs to be removed from the existing data source.
51+
* The optional second parameter specifies the animation duration for removing the data point.
52+
53+
{% if page.publishingplatform == "aspnet-core" %}
54+
55+
{% tabs %}
56+
{% highlight cshtml tabtitle="CSHTML" %}
57+
{% include code-snippet/chart/dynamic-update/remove-point/tagHelper %}
58+
{% endhighlight %}
59+
{% highlight c# tabtitle="Remove-point.cs" %}
60+
{% include code-snippet/chart/dynamic-update/remove-point/remove-point.cs %}
61+
{% endhighlight %}
62+
{% endtabs %}
63+
64+
{% elsif page.publishingplatform == "aspnet-mvc" %}
65+
66+
{% tabs %}
67+
{% highlight razor tabtitle="CSHTML" %}
68+
{% include code-snippet/chart/dynamic-update/remove-point/razor %}
69+
{% endhighlight %}
70+
{% highlight c# tabtitle="Remove-point.cs" %}
71+
{% include code-snippet/chart/dynamic-update/remove-point/remove-point.cs %}
72+
{% endhighlight %}
73+
{% endtabs %}
74+
{% endif %}
75+
76+
77+
78+
## Replacing entire data points
79+
80+
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:
81+
82+
* The first parameter is the new set of data points to be updated.
83+
* The optional second parameter specifies the animation duration for updating the new data source.
84+
85+
{% if page.publishingplatform == "aspnet-core" %}
86+
87+
{% tabs %}
88+
{% highlight cshtml tabtitle="CSHTML" %}
89+
{% include code-snippet/chart/dynamic-update/set-data/tagHelper %}
90+
{% endhighlight %}
91+
{% highlight c# tabtitle="Set-data.cs" %}
92+
{% include code-snippet/chart/dynamic-update/set-data/set-data.cs %}
93+
{% endhighlight %}
94+
{% endtabs %}
95+
96+
{% elsif page.publishingplatform == "aspnet-mvc" %}
97+
98+
{% tabs %}
99+
{% highlight razor tabtitle="CSHTML" %}
100+
{% include code-snippet/chart/dynamic-update/set-data/razor %}
101+
{% endhighlight %}
102+
{% highlight c# tabtitle="Set-data.cs" %}
103+
{% include code-snippet/chart/dynamic-update/set-data/set-data.cs %}
104+
{% endhighlight %}
105+
{% endtabs %}
106+
{% endif %}
107+
108+
109+
110+
## Click to add or remove a data point
111+
112+
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.
113+
114+
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.
115+
116+
{% if page.publishingplatform == "aspnet-core" %}
117+
118+
{% tabs %}
119+
{% highlight cshtml tabtitle="CSHTML" %}
120+
{% include code-snippet/chart/dynamic-update/click-add-point/tagHelper %}
121+
{% endhighlight %}
122+
{% highlight c# tabtitle="Click-add-point.cs" %}
123+
{% include code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs %}
124+
{% endhighlight %}
125+
{% endtabs %}
126+
127+
{% elsif page.publishingplatform == "aspnet-mvc" %}
128+
129+
{% tabs %}
130+
{% highlight razor tabtitle="CSHTML" %}
131+
{% include code-snippet/chart/dynamic-update/click-add-point/razor %}
132+
{% endhighlight %}
133+
{% highlight c# tabtitle="Click-add-point.cs" %}
134+
{% include code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs %}
135+
{% endhighlight %}
136+
{% endtabs %}
137+
{% endif %}
138+
139+

‎ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/dynamic-data-update.md

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
layout: post
3+
title: Dynamic data update in ##Platform_Name## Syncfusion Chart Component
4+
description: Learn here all about dynamic data update in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Dynamic Data Update
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
12+
# Dynamic data update in ##Platform_Name## Chart Component
13+
14+
## Adding a new data point
15+
16+
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:
17+
18+
* The first parameter is the new data point to add to your existing data source.
19+
* The optional second parameter specifies the animation duration for adding the new data point.
20+
21+
{% if page.publishingplatform == "aspnet-core" %}
22+
23+
{% tabs %}
24+
{% highlight cshtml tabtitle="CSHTML" %}
25+
{% include code-snippet/chart/dynamic-update/add-point/tagHelper %}
26+
{% endhighlight %}
27+
{% highlight c# tabtitle="Add-point.cs" %}
28+
{% include code-snippet/chart/dynamic-update/add-point/add-point.cs %}
29+
{% endhighlight %}
30+
{% endtabs %}
31+
32+
{% elsif page.publishingplatform == "aspnet-mvc" %}
33+
34+
{% tabs %}
35+
{% highlight razor tabtitle="CSHTML" %}
36+
{% include code-snippet/chart/dynamic-update/add-point/razor %}
37+
{% endhighlight %}
38+
{% highlight c# tabtitle="Add-point.cs" %}
39+
{% include code-snippet/chart/dynamic-update/add-point/add-point.cs %}
40+
{% endhighlight %}
41+
{% endtabs %}
42+
{% endif %}
43+
44+
45+
46+
## Removing an existing data point
47+
48+
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:
49+
50+
* The first parameter is the index of the data point that needs to be removed from the existing data source.
51+
* The optional second parameter specifies the animation duration for removing the data point.
52+
53+
{% if page.publishingplatform == "aspnet-core" %}
54+
55+
{% tabs %}
56+
{% highlight cshtml tabtitle="CSHTML" %}
57+
{% include code-snippet/chart/dynamic-update/remove-point/tagHelper %}
58+
{% endhighlight %}
59+
{% highlight c# tabtitle="Remove-point.cs" %}
60+
{% include code-snippet/chart/dynamic-update/remove-point/remove-point.cs %}
61+
{% endhighlight %}
62+
{% endtabs %}
63+
64+
{% elsif page.publishingplatform == "aspnet-mvc" %}
65+
66+
{% tabs %}
67+
{% highlight razor tabtitle="CSHTML" %}
68+
{% include code-snippet/chart/dynamic-update/remove-point/razor %}
69+
{% endhighlight %}
70+
{% highlight c# tabtitle="Remove-point.cs" %}
71+
{% include code-snippet/chart/dynamic-update/remove-point/remove-point.cs %}
72+
{% endhighlight %}
73+
{% endtabs %}
74+
{% endif %}
75+
76+
77+
78+
## Replacing entire data points
79+
80+
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:
81+
82+
* The first parameter is the new set of data points to be updated.
83+
* The optional second parameter specifies the animation duration for updating the new data source.
84+
85+
{% if page.publishingplatform == "aspnet-core" %}
86+
87+
{% tabs %}
88+
{% highlight cshtml tabtitle="CSHTML" %}
89+
{% include code-snippet/chart/dynamic-update/set-data/tagHelper %}
90+
{% endhighlight %}
91+
{% highlight c# tabtitle="Set-data.cs" %}
92+
{% include code-snippet/chart/dynamic-update/set-data/set-data.cs %}
93+
{% endhighlight %}
94+
{% endtabs %}
95+
96+
{% elsif page.publishingplatform == "aspnet-mvc" %}
97+
98+
{% tabs %}
99+
{% highlight razor tabtitle="CSHTML" %}
100+
{% include code-snippet/chart/dynamic-update/set-data/razor %}
101+
{% endhighlight %}
102+
{% highlight c# tabtitle="Set-data.cs" %}
103+
{% include code-snippet/chart/dynamic-update/set-data/set-data.cs %}
104+
{% endhighlight %}
105+
{% endtabs %}
106+
{% endif %}
107+
108+
109+
110+
## Click to add or remove a data point
111+
112+
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.
113+
114+
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.
115+
116+
{% if page.publishingplatform == "aspnet-core" %}
117+
118+
{% tabs %}
119+
{% highlight cshtml tabtitle="CSHTML" %}
120+
{% include code-snippet/chart/dynamic-update/click-add-point/tagHelper %}
121+
{% endhighlight %}
122+
{% highlight c# tabtitle="Click-add-point.cs" %}
123+
{% include code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs %}
124+
{% endhighlight %}
125+
{% endtabs %}
126+
127+
{% elsif page.publishingplatform == "aspnet-mvc" %}
128+
129+
{% tabs %}
130+
{% highlight razor tabtitle="CSHTML" %}
131+
{% include code-snippet/chart/dynamic-update/click-add-point/razor %}
132+
{% endhighlight %}
133+
{% highlight c# tabtitle="Click-add-point.cs" %}
134+
{% include code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs %}
135+
{% endhighlight %}
136+
{% endtabs %}
137+
{% endif %}
138+
139+

‎ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/add-point.cs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
public ActionResult Index()
2+
{
3+
List<DynamicChartData> chartData = new List<DynamicChartData>
4+
{
5+
new DynamicChartData{ x= "Germany", y= 72 },
6+
new DynamicChartData{ x= "Russia", y= 103.1 },
7+
new DynamicChartData{ x= "Brazil", y= 139.1 },
8+
new DynamicChartData{ x= "India", y= 462.1 },
9+
new DynamicChartData{ x= "China", y= 721.4 },
10+
new DynamicChartData{ x= "USA", y= 286.9 },
11+
new DynamicChartData{ x= "Great Britain", y= 115.1 },
12+
new DynamicChartData{ x= "Nigeria", y= 97.2 }
13+
};
14+
ViewBag.dataSource = chartData;
15+
return View();
16+
}
17+
public class DynamicChartData
18+
{
19+
public string x;
20+
public double y;
21+
}

‎ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/razor

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@Html.EJS().Chart("container").Series(series =>
2+
{
3+
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).
4+
XName("x").
5+
YName("y").
6+
Name("Users").
7+
Width(2).
8+
Marker(mr => mr.Visible(true).DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
9+
.Font(font => font.FontWeight("600"))))
10+
DataSource(ViewBag.dataSource).
11+
Add();
12+
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).EnableTrim(false).MajorGridLines(mg => mg.Width(0)).MajorTickLines(mt => mt.Width(0))
13+
).PrimaryYAxis(py => py.Minimum(0).Maximum(800).LabelFormat("{value}M").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
14+
).Title("Internet Users - 2016").LegendSettings(leg => leg.Visible(false)
15+
).ChartArea(area => area.Border(br => br.Width(1))).Render()
16+
17+
<div>
18+
@Html.EJS().Button("add").IsPrimary(true).Content("Add Point").Render()
19+
</div>
20+
<script>
21+
document.getElementById('add').onclick = () => {
22+
var chart = document.getElementById('container').ej2_instances[0];
23+
chart.series[0].addPoint({ x: "Japan", y: 118.2 });
24+
}
25+
</script>
26+

‎ej2-asp-core-mvc/code-snippet/chart/dynamic-update/add-point/tagHelper

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<ejs-chart id="container" title="Internet Users - 2016">
2+
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" enableTrim="false">
3+
<e-majorgridlines width="0"></e-majorgridlines>
4+
<e-majorticklines width="0"></e-majorticklines>
5+
</e-chart-primaryxaxis>
6+
<e-chart-primaryyaxis minimum="0" maximum="800" labelFormat="{value}M" edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
7+
</e-chart-primaryyaxis>
8+
<e-chart-chartarea>
9+
<e-chartarea-border width="1"></e-chartarea-border>
10+
</e-chart-chartarea>
11+
<e-chart-legendsettings visible="false">
12+
</e-chart-legendsettings>
13+
<e-series-collection>
14+
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline" width="2" name="Users">
15+
<e-series-marker visible="true">
16+
<e-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.LabelPosition.Top">
17+
<e-font fontWeight="600"></e-font>
18+
</e-series-datalabel>
19+
</e-series-marker>
20+
</e-series>
21+
</e-series-collection>
22+
</ejs-chart>
23+
24+
<div>
25+
<ejs-button id="add" content="Add Point" isPrimary="true"></ejs-button>
26+
</div>
27+
<script>
28+
document.getElementById('add').onclick = () => {
29+
var chart = document.getElementById('container').ej2_instances[0];
30+
chart.series[0].addPoint({ x: "Japan", y: 118.2 });
31+
}
32+
</script>

‎ej2-asp-core-mvc/code-snippet/chart/dynamic-update/click-add-point/click-add-point.cs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
public ActionResult Index()
2+
{
3+
List<DynamicChartData> chartData = new List<DynamicChartData>
4+
{
5+
new DynamicChartData { x = 20, y = 20 },
6+
new DynamicChartData { x = 80, y = 80 }
7+
};
8+
ViewBag.dataSource = chartData;
9+
return View();
10+
}
11+
public class DynamicChartData
12+
{
13+
public double x;
14+
public double y;
15+
}

0 commit comments

Comments
 (0)