Integrated latest changes at 06-25-2024 4:30:12 PM

Author: SyncfusionBuild

ej2-react/chart/working-with-data.md

@@ -12,9 +12,9 @@ domainurl: ##DomainURL##
 
 # Working with data in React Chart component
 
-Chart can visualise data bound from local or remote data.
+Chart can visualize data bound from local or remote data.
 
-## Local Data
+## Local data
 
 You can bind a simple JSON data to the chart using [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#datasource)property in series. Now map the fields in JSON to [`xName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#xname) and [`yName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#yname) properties.
 
@@ -27,7 +27,7 @@ You can bind a simple JSON data to the chart using [`dataSource`](https://ej2.sy
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/column-cs8" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs8" %}
 
 ## Lazy loading
 
@@ -42,9 +42,9 @@ Lazy loading allows you to load data for chart on demand. Chart will fire the sc
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/column-cs9" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs9" %}
 
-### Common Datasource
+### Common datasource
 
 You can also bind a JSON data common to all series using  [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#datasource) property in chart.
 
@@ -57,9 +57,9 @@ You can also bind a JSON data common to all series using  [`dataSource`](https:/
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/column-cs10" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs10" %}
 
-## Remote Data
+## Remote data
 
 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://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#datasource) property in series and map the fields of data to [`xName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#xname) and [`yName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#yname) properties. You can also use the [`query`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#query) property of the series to filter the data.
 
@@ -72,7 +72,99 @@ You can also bind remote data to the chart using `DataManager`. The DataManager
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/column-cs11" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs11" %}
+
+## Binding data using ODataAdaptor
+
+[`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.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/column-cs14/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/column-cs14/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs14" %}
+
+## Binding data using ODataV4Adaptor
+
+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**.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/column-cs15/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/column-cs15/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs15" %}
+
+## Web API adaptor
+
+You can use the **WebApiAdaptor** to bind the chart with a Web API created using an OData endpoint.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/column-cs16/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/column-cs16/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs16" %}
+
+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.
+
+The sample response object should appear as follows:
+
+```
+{
+    Items: [{..}, {..}, {..}, ...],
+    Count: 830
+}
+```
+
+## Custom adaptor
+
+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**.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/column-cs17/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/column-cs17/app/index.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="serialnoadaptor.jsx" %}
+{% include code-snippet/chart/series/column-cs17/app/serialNoAdaptor.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="serialnoadaptor.tsx" %}
+{% include code-snippet/chart/series/column-cs17/app/serialNoAdaptor.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs17" %}
+
+## Offline mode
+
+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`.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/column-cs18/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/column-cs18/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs18" %}
 
 ## Empty points
 
@@ -87,7 +179,7 @@ The Data points that uses the `null` or `undefined` as value are considered as e
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/column-cs12" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs12" %}
 
 **Empty point color**
 
@@ -102,4 +194,4 @@ Specific color for empty point can be set by `fill` property in `emptyPointSetti
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/column-cs13" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/column-cs13" %}

ej2-react/code-snippet/chart/dynamic-update/click-add-point/app/index.jsx

@@ -41,24 +41,24 @@ function App() {
   const chartMouseClick = (args) => {
     let isRemoved = false;
     if (args.axisData) {
-      for (let i = 0; i < (chartInstance.current.series[0]).points.length; i++) {
-        const markerWidth = (chartInstance.current.series[0]).marker.width / 2;
+      for (let i = 0; i < (chartInstance.series[0]).points.length; i++) {
+        const markerWidth = (chartInstance.series[0]).marker.width / 2;
         let roundedX = Math.round(args.axisData['primaryXAxis']) + markerWidth;
         let roundedY = Math.round(args.axisData['primaryYAxis']) + markerWidth;
-        let pointX = Math.round((chartInstance.current.series[0]).points[i].x) + markerWidth;
-        let pointY = Math.round((chartInstance.current.series[0]).points[i].y) + markerWidth;
+        let pointX = Math.round((chartInstance.series[0]).points[i].x) + markerWidth;
+        let pointY = Math.round((chartInstance.series[0]).points[i].y) + markerWidth;
         if ((roundedX === pointX || roundedX + 1 === pointX || roundedX - 1 === pointX) &&
           (roundedY === pointY || roundedY + 1 === pointY || roundedY - 1 === pointY)) {
-          if ((chartInstance.current.series[0]).points.length > 1) {
-            const points = (chartInstance.current.series[0]).points;
+          if ((chartInstance.series[0]).points.length > 1) {
+            const points = (chartInstance.series[0]).points;
             const duration = i === 0 || i === points[points.length - 1].index ? 500 : 0;
-            chartInstance.current.series[0].removePoint(i, duration);
+            chartInstance.series[0].removePoint(i, duration);
           }
           isRemoved = true;
         }
       }
       if (!isRemoved) {
-        chartInstance.current.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) });
+        chartInstance.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) });
       }
     }
   };

ej2-react/code-snippet/chart/series/column-cs14/app/index.jsx

@@ -0,0 +1,28 @@
+{% raw %}
+
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data';
+import { ChartComponent, Inject, SeriesCollectionDirective, SeriesDirective, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
+function App() {
+  const dataManager = new DataManager({
+    url: 'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/',
+    adaptor: new ODataAdaptor(),
+    crossDomain: true
+  });
+  const query = new Query();
+  const primaryxAxis = { valueType: 'Category' };
+  return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title="Order Details">
+    <Inject services={[ColumnSeries, Category]} />
+    <SeriesCollectionDirective>
+      <SeriesDirective dataSource={dataManager} xName='CustomerID' type='Column' yName='Freight' query={query} />
+    </SeriesCollectionDirective>
+  </ChartComponent>;
+}
+;
+export default App;
+ReactDOM.render(<App />, document.getElementById("charts"));
+
+
+{% endraw %}

ej2-react/code-snippet/chart/series/column-cs14/app/index.tsx

@@ -0,0 +1,33 @@
+{% raw %}
+
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { DataManager, Query, ODataAdaptor } from '@syncfusion/ej2-data'
+import { AxisModel, ChartComponent, Inject, SeriesCollectionDirective, SeriesDirective, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
+
+function App() {
+
+  const dataManager = new DataManager({
+    url: 'https://services.odata.org/V3/Northwind/Northwind.svc/Orders/',
+    adaptor: new ODataAdaptor(),
+    crossDomain: true
+  });
+  const query = new Query();
+  const primaryxAxis: AxisModel = { valueType: 'Category' };
+
+  return <ChartComponent id='charts'
+      primaryXAxis={primaryxAxis}
+      title="Order Details">
+      <Inject services={[ColumnSeries, Category]} />
+      <SeriesCollectionDirective>
+        <SeriesDirective dataSource={dataManager} type='Column' xName='CustomerID' yName='Freight' query={query} />
+      </SeriesCollectionDirective>
+    </ChartComponent>
+
+};
+export default App;
+ReactDOM.render(<App />, document.getElementById("charts"));
+
+
+{% endraw %}

ej2-react/code-snippet/chart/series/column-cs14/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Chart-Column Series</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+     <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+        #charts {
+            height : 350px;
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+        <div id='charts'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>

ej2-react/code-snippet/chart/series/column-cs14/systemjs.config.js

@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+            target: "es5",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true,
+            "jsx": "react"
+    },
+     meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+        "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+        "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+        
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+    
+});
+
+System.import('app');
+
+
+

ej2-react/code-snippet/chart/series/column-cs15/app/index.jsx

@@ -0,0 +1,27 @@
+{% raw %}
+
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ChartComponent, Inject, SeriesCollectionDirective, SeriesDirective, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
+function App() {
+  const dataManager = new DataManager({
+    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders',
+    adaptor: new ODataV4Adaptor()
+  });
+  const query = new Query();
+  const primaryxAxis = { valueType: 'Category' };
+  return <ChartComponent id='charts' primaryXAxis={primaryxAxis} title="Order Details">
+    <Inject services={[ColumnSeries, Category]} />
+    <SeriesCollectionDirective>
+      <SeriesDirective dataSource={dataManager} type='Column' xName='CustomerID' yName='Freight' query={query} />
+    </SeriesCollectionDirective>
+  </ChartComponent>;
+}
+;
+export default App;
+ReactDOM.render(<App />, document.getElementById("charts"));
+
+
+{% endraw %}