Your search did not match any results.
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 Codepen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { var dataSource = [], max = 5000, i; for (i = 0; i < max; i++) { dataSource.push({ arg: i, val: i + i * (Math.random() - 0.5) }); } $scope.chartOptions = { dataSource: dataSource, argumentAxis: { valueMarginsEnabled: false }, useAggregation: true, legend: { visible: false }, series: { point: { size: 7 } } }; $scope.rangeOptions = { size: { height: 120 }, dataSource: dataSource, chart: { series: {}, useAggregation: true }, scale: { minRange: 1 }, sliderMarker: { format: { type: "decimal", precision: 0 } }, behavior: { callValueChanged: "onMoving", snapToTicks: false }, onValueChanged: function (e) { var zoomedChart = $("#chart-demo #zoomedChart").dxChart("instance"); zoomedChart.zoomArgument(e.value[0], e.value[1]); } }; });
<!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" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/17.1.4/js/dx.all.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="chart-demo"> <div id="zoomedChart" dx-chart="chartOptions"></div> <div id="range-selector" dx-range-selector="rangeOptions"></div> </div> </div> </body> </html>
#chart-demo { height: 470px; width: 100%; } #zoomedChart { height: 335px; margin: 0 0 15px; } #chart-demo > div:not(#zoomedChart) { height: 120px; }