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.
window.onload = function() {
var dataSource = [],
max = 5000,
i;
for (i = 0; i < max; i++) {
dataSource.push({ arg: i, val: i + i * (Math.random() - 0.5) });
}
var model = {};
model.chartOptions = {
dataSource: dataSource,
argumentAxis: {
valueMarginsEnabled: false
},
useAggregation: true,
legend: {
visible: false
},
series: {
point: {
size: 7
}
}
};
model.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]);
}
};
ko.applyBindings(model, $("#chart-demo")[0]);
};
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/17.1.6/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" data-bind="dxChart: chartOptions"></div>
<div id="range-selector" data-bind="dxRangeSelector: 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;
}