vis.js Timeline - mouse events issue
by djp3d
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<div id="visualization"></div>
CSS
/*
Steps:
1. open the console
2. click on the groups labels (First, Second, Third)
3. was the 'mousedown' event logged in the console?
*/
JavaScript
vis.timeline.TimeStep.prototype.getLabelMajor = function() {
return "--"
}
var groups = new vis.DataSet([
{id: 0, content: 'First', value: 1},
{id: 1, content: 'Third', value: 3},
{id: 2, content: 'Second', value: 2}
]);
// create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{id: 0, group: 0, content: 'item A,item B, item C, item D, item E, item F, item G, item H, item I', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
]);
// create visualization
var container = document.getElementById('visualization');
var options = {
//groupOrder: 'value',
groupOrder: function (a, b) {
return a.value - b.value;
},
groupOrderSwap: function (a, b, groups) {
var v = a.value;
a.value = b.value;
b.value = v;
},
// editable: true,
groupEditable: {
order: true
},
orientation: 'top',
start : new Date(2014, 3, 16),
min : new Date(2014, 3, 16),
max : new Date(2014, 4, 5),
showMajorLabels : false,
_zoomMax : 100000,
minorLabels: {
millisecond:'HH:mm:ss:SSS',
second: 'HH:mm:ss',
minute: 'HH:mm',
hour: 'HH:mm',
weekday: 'ddd D',
day: 'D',
month: 'MMM',
year: 'YYYY'
},
majorLabels: {
millisecond:'HH:mm:ss',
second: 'D MMMM HH:mm',
minute: 'ddd D MMMM',
hour: 'ddd D MMMM',
weekday: 'MMMM YYYY',
day: 'MMMM YYYY',
month: ...