Range Chart Type for Flotr2
HTML
<script src="https://rawgithub.com/HumbleSoftware/Flotr2/master/flotr2.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/HumbleSoftware/Flotr2/master/examples/examples.css">
<script src="https://rawgithub.com/wetar/flotr2-ranges/master/js/ranges.js"></script>
<div id="example"></div>
<div id="tip">000</div>
CSS
#example {
width: 340px;
height: 220px;
}
JavaScript
var page = this;
(function basic(container) {
var
d1 = [[0, 3], [4, 8], [8, 5], [9, 9]], // First data series
d2 = [[1, 5], [2, 3], [3, 7], [8, 10]], // Second data series
i, graph;
// Draw Graph
page.graph = Flotr.draw(container, [ d1, d2 ], {
xaxis: {
minorTickFreq: 4
},
grid: {
minorVerticalLines: true
},
mouse : {
track : true, // Enable mouse tracking
lineColor : 'purple',
relative : true,
position : 'ne',
sensibility : 1,
trackDecimals : 2,
trackFormatter : function (o) {
return o.y
}
},
crosshair : {
mode : 'xy'
}
});
})(document.getElementById("example"));
Flotr.EventAdapter.observe( document.getElementById('example') , 'flotr:click', function (event, pos, item) {
var index = closest(event).dataIndex
//console.log(index);
//console.log(closest(event).series[0].data[index]);
var blueText = closest(event).blueLine[1];
var greenText = closest(event).greenLine[1];
document.getElementById('tip').innerHTML = blueText + "<br>" + greenText
});
var closest = function(mouse) {
var
series = page.graph.series,
options = page.graph.options,
mouseX = mouse.x,
mouseY = mouse.y,
compare = Number.MAX_VALUE,
compareX = Number.MAX_VALUE,
closest = {},
closestX = {},
check = false,
serie, data, distance, distanceX, distanceY, x, y, i, j;
function setClosest(o) {
o.distance = distance;
o.distanceX = distanceX;
o.distanceY = distanceY;
o.seriesIndex = i;
o.dataIndex = j;
...