Your search did not match any results.
Charts

Points Aggregation

API Reference
This demo illustrates DevExtreme HTML5 Chart Widget’s ability to aggregate series points. Whenever you display a large data source, you can optionally aggregate points to better visualize information on-screen. The useAggregation option activates this feature. The DevExtreme HTML Range Selector is used to zoom the contents of the chart. Note that whenever the selected range is reduced, the amount of chart series aggregation is reduced as well. Review the next demo to see how aggregation can be applied to a chart displaying financial information.
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 }, 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/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.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"> <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; }