DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Client-Side Data Processing

The Chart component can get data from a remote storage and process it on the client side. To implement this functionality, assign a DataSource object to the Chart dataSource property.

In the DataSource, implement a CustomStore. Switch the CustomStore to the raw loadMode and load all data from the server in the load function as shown in the demo. Set the paginate property to false to prevent data from partitioning. You can also apply filter to the received values. In this demo, select different values of the drop-down menu under the chart to apply different filters.

www.kaggle.com
Backend API
<div id="chart-demo"> <dx-chart [dataSource]="monthWeather" [customizePoint]="customizePoint"> <dxo-title text="Temperature in Seattle: October 2017"></dxo-title> <dxo-size [height]="420"></dxo-size> <dxi-series argumentField="day" valueField="t" type="bar"></dxi-series> <dxo-legend [visible]="false"></dxo-legend> <dxo-export [enabled]="true"></dxo-export> <dxi-value-axis> <dxo-label [customizeText]="customizeText"></dxo-label> </dxi-value-axis> <dxo-loading-indicator [enabled]="true"></dxo-loading-indicator> </dx-chart> <div class="action"> <div class="label">Choose a temperature threshold, &deg;C: </div> <dx-select-box id="choose-temperature" [dataSource]="temperature" [value]="2" (onValueChanged)="onValueChanged($event)" [inputAttr]="{ 'aria-label': 'Temperature' }" ></dx-select-box> </div> </div>
import { NgModule, Component, AfterViewInit, enableProdMode, } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { lastValueFrom } from 'rxjs'; import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular'; import DataSource from 'devextreme/data/data_source'; import CustomStore from 'devextreme/data/custom_store'; import query from 'devextreme/data/query'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], }) export class AppComponent implements AfterViewInit { temperature: number[] = [2, 4, 6, 8, 9, 10, 11]; palette: string[] = ['#c3a2cc', '#b7b5e0', '#e48cba']; paletteIndex = 0; monthWeather = {} as DataSource; constructor(private http: HttpClient) {} ngAfterViewInit() { this.monthWeather = new DataSource({ store: new CustomStore({ load: () => lastValueFrom(this.http.get('../../../../data/monthWeather.json')) .catch((error) => { throw 'Data Loading Error'; }), loadMode: 'raw', }), filter: ['t', '>', '2'], paginate: false, }); } customizePoint = () => { const color = this.palette[this.paletteIndex]; this.paletteIndex = this.paletteIndex === 2 ? 0 : this.paletteIndex + 1; return { color, }; }; customizeText(arg) { return `${arg.valueText}&#176C`; } onValueChanged(data) { this.monthWeather.filter(['t', '>', data.value]); this.monthWeather.load(); } } @NgModule({ imports: [ BrowserModule, HttpClientModule, DxChartModule, DxSelectBoxModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .action { width: 330px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; } ::ng-deep .action .dx-selectbox { width: 90px; }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ const componentNames = [ 'accordion', 'action-sheet', 'autocomplete', 'bar-gauge', 'box', 'bullet', 'button-group', 'button', 'calendar', 'chart', 'check-box', 'circular-gauge', 'color-box', 'context-menu', 'data-grid', 'date-box', 'date-range-box', 'defer-rendering', 'diagram', 'draggable', 'drawer', 'drop-down-box', 'drop-down-button', 'file-manager', 'file-uploader', 'filter-builder', 'form', 'funnel', 'gallery', 'gantt', 'html-editor', 'linear-gauge', 'list', 'load-indicator', 'load-panel', 'lookup', 'map', 'menu', 'multi-view', 'nested', 'number-box', 'pie-chart', 'pivot-grid-field-chooser', 'pivot-grid', 'polar-chart', 'popover', 'popup', 'progress-bar', 'radio-group', 'range-selector', 'range-slider', 'recurrence-editor', 'resizable', 'responsive-box', 'sankey', 'scheduler', 'scroll-view', 'select-box', 'slider', 'sortable', 'sparkline', 'speed-dial-action', 'splitter', 'switch', 'tab-panel', 'tabs', 'tag-box', 'text-area', 'text-box', 'tile-view', 'toast', 'toolbar', 'tooltip', 'tree-list', 'tree-map', 'tree-view', 'validation-group', 'validation-summary', 'validator', 'vector-map', ]; window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, '@angular/platform-browser-dynamic': { 'esModule': true, }, '@angular/platform-browser': { 'esModule': true, }, '@angular/core': { 'esModule': true, }, '@angular/common': { 'esModule': true, }, '@angular/common/http': { 'esModule': true, }, '@angular/animations': { 'esModule': true, }, '@angular/forms': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', 'bundles:': '../../../../bundles/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', /* @angular */ '@angular/compiler': 'bundles:@angular/compiler.umd.js', '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js', '@angular/core': 'bundles:@angular/core.umd.js', '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js', '@angular/common': 'bundles:@angular/common.umd.js', '@angular/common/http': 'bundles:@angular/common-http.umd.js', '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js', '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js', '@angular/forms': 'bundles:@angular/forms.umd.js', /* devextreme */ 'devextreme': 'npm:devextreme@24.1.3/cjs', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'devextreme/bundles/dx.all': 'npm:devextreme@24.1.3/bundles/dx.all.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56', /* devextreme-angular umd maps */ 'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js', 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; return acc; }, {}), 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'tslib': 'npm:tslib@2.6.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devexpress-diagram@2.2.8/package.json', 'npm:devexpress-gantt@4.1.56/package.json', ], }; System.config(window.config); // System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.13.0/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>
[ { "day": "1", "t": 11 }, { "day": "2", "t": 7 }, { "day": "3", "t": 6 }, { "day": "4", "t": 8 }, { "day": "5", "t": 7 }, { "day": "6", "t": 7 }, { "day": "7", "t": 11 }, { "day": "8", "t": 9 }, { "day": "9", "t": 5 }, { "day": "10", "t": 8 }, { "day": "11", "t": 6 }, { "day": "12", "t": 9 }, { "day": "13", "t": 8 }, { "day": "14", "t": 6 }, { "day": "15", "t": 6 }, { "day": "16", "t": 6 }, { "day": "17", "t": 10 }, { "day": "18", "t": 9 }, { "day": "19", "t": 12 }, { "day": "20", "t": 9 }, { "day": "21", "t": 8 }, { "day": "22", "t": 13 }, { "day": "23", "t": 9 }, { "day": "24", "t": 7 }, { "day": "25", "t": 6 }, { "day": "26", "t": 11 }, { "day": "27", "t": 8 }, { "day": "28", "t": 7 }, { "day": "29", "t": 9 }, { "day": "30", "t": 7 }, { "day": "31", "t": 3 } ]

Once you load the data, specify the series type and its nested options: argumentField and valueField, so the component can determine which object fields in the data source indicate Chart arguments and values.