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 CodePen
Apply
Reset
$(function(){ var dataSource = [], max = 5000, i; for (i = 0; i < max; i++) { dataSource.push({ arg: i, val: i + i * (Math.random() - 0.5) }); } var chart = $("#zoomedChart").dxChart({ dataSource: dataSource, argumentAxis: { valueMarginsEnabled: false }, valueAxis: { label:{ format:{ type: "fixedPoint" } } }, useAggregation: true, legend: { visible: false }, series: { point: { size: 7 } } }).dxChart("instance"); $("#range-selector").dxRangeSelector({ 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) { chart.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.2.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.2.3/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"> <div id="chart-demo"> <div id="zoomedChart"></div> <div id="range-selector"></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; }