Discrete Axis Zooming and Scrolling
Documentation
Discrete data support is one of many strengths of the Chart widget. In this example, you can zoom data in the Chart using another DevExtreme HTML5 widget, the RangeSelector.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
window.onload = function() {
var viewModel = {
chartOptions: {
palette: "soft",
title:"The Chemical Composition of the Earth Layers",
valueAxis: {
label:{
customizeText: function() {
return this.valueText + "%";
}
}
},
dataSource: dataSource,
series: series,
commonSeriesSettings: {
type: "bar",
ignoreEmptyPoints: true
},
legend: {
border: {
visible: true
},
visible: true,
verticalAlignment: "top",
horizontalAlignment: "right",
orientation:"horizontal"
}
},
rangeOptions: {
size: {
height: 120
},
margin: {
left: 10
},
scale: {
minorTickCount: 1
},
dataSource: dataSource,
chart: {
palette: "soft",
commonSeriesSettings: {
type: "bar",
ignoreEmptyPoints: true
},
series: series
},
behavior: {
callValueChanged: "onMoving"
},
onValueChanged: function (e) {
var zoomedChart = $("#chart-demo #zoomedChart").dxChart("instance");
zoomedChart.getArgumentAxis().visualRange(e.value);
}
}
};
ko.applyBindings(viewModel, document.getElementById("chart-demo"));
};
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.5/js/dx.all.js"></script>
<script src="data.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 data-bind="dxRangeSelector: rangeOptions"></div>
</div>
</div>
</body>
</html>
#zoomedChart {
margin-bottom: 20px;
}
var series = [{
name: "Si",
valueField: "Si"
}, {
name: "Fe",
valueField: "Fe"
}, {
name: "Ni",
valueField: "Ni"
}, {
name: "S",
valueField: "S"
}, {
name: "O",
valueField: "O"
}, {
name: "Mg",
valueField: "Mg"
}, {
name: "Al",
valueField: "Al"
}, {
name: "K",
valueField: "K"
}, {
name: "Na",
valueField: "Na"
}];
var dataSource = [{
arg: "Inner Core",
Si: 7.35,
Fe: 79.39,
Ni: 5.2,
S: 2.3,
O: 4.1
}, {
arg: "Outer Core",
Si: 7.33,
Fe: 78.56,
Ni: 5.2,
S: 2.7,
O: 4.2
}, {
arg: "Lower Mantle",
Si: 21.5,
Fe: 5.8,
O: 44.8,
Mg: 22.8,
Al: 2.2,
Ca: 2.3,
Na: 0.3,
K: 0.03
}, {
arg: "Upper Mantle",
Si: 28.1,
Mg: 23.2,
Fe: 4.3,
Al: 1.2,
Ca: 2.2,
O: 40.3,
Na: 0.2
}, {
arg: "Lower Crust",
O: 46.6,
Si: 27.7,
Al: 8.1,
Fe: 5,
Ca: 3.6,
Na: 2.8,
K: 2.6,
Mg: 1.5
}, {
arg: "Upper Crust",
O: 47,
Si: 29.5,
Al: 8.05,
Fe: 4.66,
Ca: 2.96,
Na: 2.5,
K: 2.5,
Mg: 1.87
}];