chart.js-rangeslider
Version:
This adds the option of having a range slider to your charts, to allow you to select a specific data scale
157 lines (134 loc) • 3.54 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<!-- import plugin script -->
<script src="../dist/RangeSlider-all.min.js"></script>
<link rel="stylesheet" href="../dist/RangeSlider-all.min.css">
<!-- local files, used for development
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/nouislider/distribute/nouislider.js"></script>
<script src="../bower_components/Chart.js/dist/Chart.bundle.js""></script>
<script src="../src/RangeSlider-core.js"></script>
<link rel="stylesheet" href="../bower_components/nouislider/distribute/nouislider.min.css">
<link rel="stylesheet" href="../src/RangeSlider-core.css">
-->
</head>
<body>
<!-- line chart canvas element -->
<canvas id="ini" width="500" height="300"></canvas>
<script>
//this is just for debug
randomTo = function (from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
};
// line chart data
var iniData = {
labels:[
"2000",
"2001",
"2002",
"2003",
"2004",
"2005",
"2006",
"2007",
"2008",
"2009",
"2011",
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020"
],
datasets:[{
label: "Rangeslider Line 1",
fillColor:"rgba(172,194,132,0)",
strokeColor:"#C45662",
pointColor:"#C45662",
pointStrokeColor:"#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "#C45662",
/*You only put numeric data here*/
data:[
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
]
},
{
label: "Rangeslider Line 2",
fillColor:"rgba(172,194,132,0)",
strokeColor:"#C45662",
pointColor:"#C45662",
pointStrokeColor:"#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "#C45662",
/*You only put numeric data here*/
data:[
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
randomTo(480, 600),
],
}]
},
// create the options
options = {
scaleBeginAtZero: true,
/*This is how to customize the way the labels look :) */
tooltipTemplate: "<%if (label){%><%=label%>: <%}%>$<%= value %>",
label: 'test'
},
// get line chart canvas
ini = document.getElementById('ini').getContext('2d')
rs = new RangeSliderChart({
chartData: iniData,
chartOpts: options,
chartType: 'line',
chartCTX: ini,
class: 'my-chart-ranger',
initial: [3, 10]
})
</script>
</body>
</html>