Your search did not match any results.
Line Charts

Points Aggregation

Documentation
This demo illustrates how the Chart widget aggregates series points to improve readability whenever a large data source is visualized. The useAggregation option activates this feature. The RangeSelector widget zooms the contents of the Chart. Note that whenever the selected range is reduced, the series becomes less aggregated.
Copy to Plunker
Apply
Reset
<div id="chart-demo"> <dx-chart id="zoomedChart" [dataSource]="coordinates" [useAggregation]="true"> <dxi-series> <dxo-point [size]="7"></dxo-point> </dxi-series> <dxo-argument-axis [valueMarginsEnabled]="false"> </dxo-argument-axis> <dxo-legend [visible]="false"></dxo-legend> </dx-chart> <dx-range-selector id="range-selector" [dataSource]="coordinates" (onValueChanged)="valueChanged($event)"> <dxo-size [height]="120"></dxo-size> <dxo-scale [minRange]="1"></dxo-scale> <dxo-slider-marker> <dxo-format type="decimal" [precision]="0"> </dxo-format> </dxo-slider-marker> <dxo-behavior callValueChanged="onMoving" [snapToTicks]="false"> </dxo-behavior> <dxo-chart [useAggregation]="true"> <dxi-series></dxi-series> </dxo-chart> </dx-range-selector> </div>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxChartModule, DxChartComponent, DxRangeSelectorModule } from 'devextreme-angular'; import { Service, Coordinate } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { @ViewChild(DxChartComponent) chart: DxChartComponent; coordinates: Coordinate[]; constructor(service: Service) { this.coordinates = service.getCoordinates(); } valueChanged(arg: any) { this.chart.instance.zoomArgument(arg.value[0], arg.value[1]); } } @NgModule({ imports: [ BrowserModule, DxChartModule, DxRangeSelectorModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ #chart-demo { height: 470px; width: 100%; } /deep/ #zoomedChart { height: 335px; margin: 0 0 15px; } /deep/ #chart-demo > div:not(#zoomedChart) { height: 120px; }
import { Injectable } from '@angular/core'; export class Coordinate { arg: number; val: number; } let coordinates: Coordinate[] = []; @Injectable() export class Service { getCoordinates(): Coordinate[] { var max = 5000, i; for (i = 0; i < max; i++) { coordinates.push({ arg: i, val: i + i * (Math.random() - 0.5) }); } return coordinates; } }
// 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://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.3.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme': 'npm:devextreme@17.1', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'devextreme-angular': 'npm:devextreme-angular@17.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/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>