Skip to content

Commit ca1dfdd

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #3113 from Syncfusion-Content/hotfix/hotfix-v26.1.35
DOCINFRA-2341_merged_using_automation
2 parents 199948c + 661eaa4 commit ca1dfdd

File tree

17 files changed

+514
-19
lines changed

17 files changed

+514
-19
lines changed

‎ej2-asp-core-mvc/chart/EJ2_ASP.MVC/working-with-data.md

Lines changed: 168 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
---
22
layout: post
3-
title: Working With Data in ##Platform_Name## Chart Component
4-
description: Learn here all about Working With Data in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
3+
title: Working with data in ##Platform_Name## Syncfusion Chart Component
4+
description: Learn here all about Working with data in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
6-
control: Working With Data
6+
control: Working with data
77
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

1111

1212
<!-- markdownlint-disable MD036 -->
1313

14-
# Working with Data
14+
# Working with data in ##Platform_Name## Chart Component
1515

16-
Chart can visualise data bound from local or remote data.
16+
Chart can visualize data bound from local or remote data.
1717

18-
## Local Data
18+
## Local data
1919

20-
You can bind a simple JSON data to the chart using [`DataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_DataSource) property in series. Now map the fields in JSON to [`XName`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_XName) and [`YName`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_YName) properties.
20+
You can bind a simple JSON data to the chart using [`DataSource`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_DataSource) property in series. Now map the fields in JSON to [`XName`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_XName) and [`YName`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_YName) properties.
2121

2222
{% if page.publishingplatform == "aspnet-core" %}
2323

@@ -44,9 +44,9 @@ You can bind a simple JSON data to the chart using [`DataSource`](https://help.s
4444

4545

4646

47-
### Common Datasource
47+
### Common datasource
4848

49-
You can also bind a JSON data common to all series using [`DataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_DataSource) property in chart.
49+
You can also bind a JSON data common to all series using [`DataSource`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_DataSource) property in chart.
5050

5151
{% if page.publishingplatform == "aspnet-core" %}
5252

@@ -73,9 +73,9 @@ You can also bind a JSON data common to all series using [`DataSource`](https://
7373

7474

7575

76-
## Remote Data
76+
## Remote data
7777

78-
You can also bind remote data to the chart using `DataManager`. The DataManager requires minimal information like webservice URL, adaptor and crossDomain to interact with service endpoint properly. Assign the instance of DataManager to the [`DataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_DataSource) property in series and map the fields of data to [`XName`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_XName) and [`YName`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_YName) properties. You can also use the [`Query`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_Query) property of the series to filter the data.
78+
You can also bind remote data to the chart using `DataManager`. The DataManager requires minimal information like webservice URL, adaptor and crossDomain to interact with service endpoint properly. Assign the instance of DataManager to the [`DataSource`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_DataSource) property in series and map the fields of data to [`XName`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_XName) and [`YName`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_YName) properties. You can also use the [`Query`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_Query) property of the series to filter the data.
7979

8080
{% if page.publishingplatform == "aspnet-core" %}
8181

@@ -102,6 +102,162 @@ You can also bind remote data to the chart using `DataManager`. The DataManager
102102

103103

104104

105+
## Binding data using ODataAdaptor
106+
107+
[`OData`](http://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from an OData service using the DataManager. Refer to the following code example for remote data binding using an OData service.
108+
109+
{% if page.publishingplatform == "aspnet-core" %}
110+
111+
{% tabs %}
112+
{% highlight cshtml tabtitle="CSHTML" %}
113+
{% include code-snippet/chart/axis/working-data/odata-adaptor/tagHelper %}
114+
{% endhighlight %}
115+
{% highlight c# tabtitle="Odata-adaptor.cs" %}
116+
{% include code-snippet/chart/axis/working-data/odata-adaptor/odata-adaptor.cs %}
117+
{% endhighlight %}
118+
{% endtabs %}
119+
120+
{% elsif page.publishingplatform == "aspnet-mvc" %}
121+
122+
{% tabs %}
123+
{% highlight razor tabtitle="CSHTML" %}
124+
{% include code-snippet/chart/axis/working-data/odata-adaptor/razor %}
125+
{% endhighlight %}
126+
{% highlight c# tabtitle="Odata-adaptor.cs" %}
127+
{% include code-snippet/chart/axis/working-data/odata-adaptor/odata-adaptor.cs %}
128+
{% endhighlight %}
129+
{% endtabs %}
130+
{% endif %}
131+
132+
133+
134+
## Binding data using ODataV4Adaptor
135+
136+
ODataV4 is an improved version of the OData protocols, and the `DataManager` can also retrieve and consume ODataV4 services. For more details on ODataV4 services, refer to the [`odata documentation`](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind an ODataV4 service, use the **ODataV4Adaptor**.
137+
138+
{% if page.publishingplatform == "aspnet-core" %}
139+
140+
{% tabs %}
141+
{% highlight cshtml tabtitle="CSHTML" %}
142+
{% include code-snippet/chart/axis/working-data/odatav4-adaptor/tagHelper %}
143+
{% endhighlight %}
144+
{% highlight c# tabtitle="Odatav4-adaptor.cs" %}
145+
{% include code-snippet/chart/axis/working-data/odatav4-adaptor/odatav4-adaptor.cs %}
146+
{% endhighlight %}
147+
{% endtabs %}
148+
149+
{% elsif page.publishingplatform == "aspnet-mvc" %}
150+
151+
{% tabs %}
152+
{% highlight razor tabtitle="CSHTML" %}
153+
{% include code-snippet/chart/axis/working-data/odatav4-adaptor/razor %}
154+
{% endhighlight %}
155+
{% highlight c# tabtitle="Odatav4-adaptor.cs" %}
156+
{% include code-snippet/chart/axis/working-data/odatav4-adaptor/odatav4-adaptor.cs %}
157+
{% endhighlight %}
158+
{% endtabs %}
159+
{% endif %}
160+
161+
162+
163+
## Web API adaptor
164+
165+
You can use the **WebApiAdaptor** to bind the chart with a Web API created using an OData endpoint.
166+
167+
{% if page.publishingplatform == "aspnet-core" %}
168+
169+
{% tabs %}
170+
{% highlight cshtml tabtitle="CSHTML" %}
171+
{% include code-snippet/chart/axis/working-data/web-adaptor/tagHelper %}
172+
{% endhighlight %}
173+
{% highlight c# tabtitle="Web-adaptor.cs" %}
174+
{% include code-snippet/chart/axis/working-data/web-adaptor/web-adaptor.cs %}
175+
{% endhighlight %}
176+
{% endtabs %}
177+
178+
{% elsif page.publishingplatform == "aspnet-mvc" %}
179+
180+
{% tabs %}
181+
{% highlight razor tabtitle="CSHTML" %}
182+
{% include code-snippet/chart/axis/working-data/web-adaptor/razor %}
183+
{% endhighlight %}
184+
{% highlight c# tabtitle="Web-adaptor.cs" %}
185+
{% include code-snippet/chart/axis/working-data/web-adaptor/web-adaptor.cs %}
186+
{% endhighlight %}
187+
{% endtabs %}
188+
{% endif %}
189+
190+
The response object should contain the properties **Items** and **Count**, where **Items** represents a collection of entities, and **Count** represents the total number of entities.
191+
192+
The sample response object should appear as follows:
193+
194+
```
195+
{
196+
Items: [{..}, {..}, {..}, ...],
197+
Count: 830
198+
}
199+
```
200+
201+
202+
203+
## Custom adaptor
204+
205+
You can create your own adaptor by extending the built-in adaptors. The following demonstrates the custom adaptor approach and how to add a serial number to the records by overriding the built-in response processing using the **processResponse** method of the **ODataAdaptor**.
206+
207+
{% if page.publishingplatform == "aspnet-core" %}
208+
209+
{% tabs %}
210+
{% highlight cshtml tabtitle="CSHTML" %}
211+
{% include code-snippet/chart/axis/working-data/custom-adaptor/tagHelper %}
212+
{% endhighlight %}
213+
{% highlight c# tabtitle="Custom-adaptor.cs" %}
214+
{% include code-snippet/chart/axis/working-data/custom-adaptor/custom-adaptor.cs %}
215+
{% endhighlight %}
216+
{% endtabs %}
217+
218+
{% elsif page.publishingplatform == "aspnet-mvc" %}
219+
220+
{% tabs %}
221+
{% highlight razor tabtitle="CSHTML" %}
222+
{% include code-snippet/chart/axis/working-data/custom-adaptor/razor %}
223+
{% endhighlight %}
224+
{% highlight c# tabtitle="Custom-adaptor.cs" %}
225+
{% include code-snippet/chart/axis/working-data/custom-adaptor/custom-adaptor.cs %}
226+
{% endhighlight %}
227+
{% endtabs %}
228+
{% endif %}
229+
230+
231+
232+
## Offline mode
233+
234+
When using remote data binding, all chart actions will be processed on the server-side. To avoid postback for every action, configure the chart to load all data upon initialization and handle actions on the client-side. To enable this behavior, utilize the **offline** property of the `DataManager`.
235+
236+
{% if page.publishingplatform == "aspnet-core" %}
237+
238+
{% tabs %}
239+
{% highlight cshtml tabtitle="CSHTML" %}
240+
{% include code-snippet/chart/axis/working-data/offline-mode/tagHelper %}
241+
{% endhighlight %}
242+
{% highlight c# tabtitle="Offline-mode.cs" %}
243+
{% include code-snippet/chart/axis/working-data/offline-mode/offline-mode.cs %}
244+
{% endhighlight %}
245+
{% endtabs %}
246+
247+
{% elsif page.publishingplatform == "aspnet-mvc" %}
248+
249+
{% tabs %}
250+
{% highlight razor tabtitle="CSHTML" %}
251+
{% include code-snippet/chart/axis/working-data/offline-mode/razor %}
252+
{% endhighlight %}
253+
{% highlight c# tabtitle="Offline-mode.cs" %}
254+
{% include code-snippet/chart/axis/working-data/offline-mode/offline-mode.cs %}
255+
{% endhighlight %}
256+
{% endtabs %}
257+
{% endif %}
258+
259+
260+
105261
## Empty points
106262

107263
The Data points that uses the `null` or `undefined` as value are considered as empty points. Empty data points are ignored and not plotted in the Chart. When the data is provided by using the points property, By using `EmptyPointSettings` property in series, you can customize the empty point. Default `Mode` of the empty point is `Gap`.
@@ -186,3 +342,4 @@ Specific color for empty point can be set by `Fill` property in `EmptyPointSetti
186342
{% endtabs %}
187343
{% endif %}
188344

345+

0 commit comments

Comments
 (0)