$(function(){
$("#range-selector").dxRangeSelector({
dataSource: dataSource,
margin: {
top: 50
},
chart: {
commonSeriesSettings: {
type: "spline",
argumentField: "weight"
},
series: [
{ valueField: "appleCost", color: "#00ff00" },
{ valueField: "orangeCost", color: "#ffa500" }
]
},
scale: {
valueType: "numeric"
},
value: ["1", "2"],
title: "Select a Product Weight"
});
});
<!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.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.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="range-selector"></div>
</div>
</body>
</html>
#range-selector {
height: 400px;
}
var dataSource = [
{ weight: "1", appleCost: 3, orangeCost: 7 },
{ weight: "2", appleCost: 20, orangeCost: 14 },
{ weight: "3", appleCost: 21, orangeCost: 21 },
{ weight: "4", appleCost: 22, orangeCost: 28 },
{ weight: "5", appleCost: 25, orangeCost: 35 },
{ weight: "6", appleCost: 30, orangeCost: 42 },
{ weight: "7", appleCost: 35, orangeCost: 44 },
{ weight: "8", appleCost: 42, orangeCost: 45 },
{ weight: "9", appleCost: 49, orangeCost: 46 },
{ weight: "10", appleCost: 60, orangeCost: 47 }
];