Chart Range II
Insert it in <head>
<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />
<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>
Use Components
<body class="theme-light">
<div id="chart"></div>
<script type="text/javascript">
$(function () {
$("#chart").devuiChart({
theme: "light",
axisX: {
axisType: 'datetime'
},
tooltipSettings: {
customPointText: 'Low Value: <b>{point.low}</b><br/>High Value:<b>{point.high}</b>'
},
primaryHeader: {
text: "Fuel Price Fluctuations"
},
dataSeries: [
{
seriesType: 'rangebar',
dataStart: Date.UTC(2010, 1, 1),
dataStep: 24 * 3600 * 1000, // one day
collectionAlias: 'Price',
data: [
[3.923, 3.993],
[3.973, 3.983],
[3.996, 4.12],
[3.997, 4.56],
[3.98, 4.23],
[3.929, 4.11],
[3.889, 4],
[3.849, 4.34],
[3.814, 4.45],
[3.773, 4.32],
[3.728, 4.11],
[3.671, 4.04],
[3.629, 4.7],
[3.589, 4.345],
[3.494, 4.543],
[3.415, 4.43],
[3.469, 4.345],
[3.485, 4.765],
[3.554, 4.567],
[3.568, 4.123],
[3.702, 4.432],
[3.779, 4.23],
[3.803, 4.33],
[3.837, 4.44],
[3.903, 4.43],
[3.907, 4.45],
[3.939, 4.65],
[3.889, 4.56],
[3.866, 4.65],
[3.914, 4.12],
[3.886, 4.32],
[3.756, 4.34],
[3.638, 4.45],
[3.563, 4.32],
[3.518, 4.21],
[3.497, 4],
[3.505, 4.12],
[3.463, 4.43],
[3.419, 4.23],
[3.324, 4.89],
[3.328, 4.98],
[3.369, 4.67],
[3.373, 4.34],
[3.377, 4.56],
[3.386, 4.57],
[3.427, 4.77],
[3.604, 4.88],
[3.677, 4.45],
[3.812, 4.67],
[3.851, 4.78],
[3.826, 4.88],
[3.779, 4.23],
[3.764, 4.34],
[3.746, 4.12],
[3.714, 4.07],
[3.676, 4.12],
[3.611, 4.77]
]
}
]
});
});
</script>
</body>