Your search did not match any results.
Charts

Discrete Axis Zooming and Scrolling

API Reference
Discrete data support is one of the many strengths of the dxChart widget. In this example, you can zoom data in the Chart using the DevExpress HTML5 Range Selector.
Copy to Codepen
Apply
Reset
$(function(){ var chart = $("#zoomedChart").dxChart({ 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" } }).dxChart("instance"); $("#range-selector").dxRangeSelector({ 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) { 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> <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"></div> <div id="range-selector"></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 }];