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.
window.onload = function() {
var viewModel = {
chartOptions: {
palette: "soft",
equalBarWidth: false,
title:"The Chemical Composition of the Earth Layers",
valueAxis: {
label:{
customizeText: function() {
return this.valueText + "%";
}
}
},
dataSource: dataSource,
series: series,
commonSeriesSettings: {
type: "bar"
},
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"
},
equalBarWidth: false,
series: series
},
behavior: {
callValueChanged: "onMoving"
},
onValueChanged: function (e) {
var zoomedChart = $("#chart-demo #zoomedChart").dxChart("instance");
zoomedChart.zoomArgument(e.value[0], e.value[1]);
}
}
};
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="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.7/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/17.1.7/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
}];