2015-03-28 13:50:19 +00:00
<!DOCTYPE HTML>
< html >
< head >
< title > Timeline | Group example</ title >
< style >
body , html {
font-family : arial , sans-serif ;
font-size : 11 pt ;
}
# visualization {
box-sizing : border-box ;
width : 100 % ;
}
2015-07-18 13:45:18 +01:00
. vis . timeline . item . red ,
. vis . timeline . item . red . selected {
background-color : red ;
color : white ;
}
. vis . timeline . item . green ,
. vis . timeline . item . green . selected {
background-color : green ;
color : white ;
}
2015-03-28 13:50:19 +00:00
</ style >
2015-07-18 13:45:18 +01:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js" ></ script >
2015-03-28 13:50:19 +00:00
< script src = "../dist/vis.js" ></ script >
< link href = "../dist/vis.css" rel = "stylesheet" type = "text/css" />
2015-07-18 13:45:18 +01:00
< script >( function ( i , s , o , g , r , a , m ){ i [ 'GoogleAnalyticsObject' ] = r ; i [ r ] = i [ r ] || function (){( i [ r ]. q = i [ r ]. q || []). push ( arguments )}, i [ r ]. l = 1 * new Date (); a = s . createElement ( o ), m = s . getElementsByTagName ( o )[ 0 ]; a . async = 1 ; a . src = g ; m . parentNode . insertBefore ( a , m )})( window , document , 'script' , '//www.google-analytics.com/analytics.js' , 'ga' ); ga ( 'create' , 'UA-61231638-1' , 'auto' ); ga ( 'send' , 'pageview' );</ script ></ head >
2015-03-28 13:50:19 +00:00
< body >
< div >
< label for = "orientation" > Orientation</ label >
< select id = "orientation" >
2015-07-18 13:45:18 +01:00
< option value = "both" > both</ option >
2015-03-28 13:50:19 +00:00
< option value = "bottom" selected > bottom</ option >
2015-07-18 13:45:18 +01:00
< option value = "top" > top</ option >
2015-03-28 13:50:19 +00:00
</ select >
</ div >
< script >
var o = document . getElementById ( 'orientation' );
o . onchange = function () {
timeline . setOptions ({
orientation : o . value
});
};
</ script >
< br >
< div id = "visualization" ></ div >
2015-07-18 13:45:18 +01:00
< div style = "height: 1000px;" ></ div > <!-- for testing vertical scroll on touch devices-->
2015-03-28 13:50:19 +00:00
< script >
var moment = vis . moment ;
var now = moment (). minutes ( 0 ). seconds ( 0 ). milliseconds ( 0 );
var groupCount = 3 ;
var itemCount = 20 ;
// create a data set with groups
var names = [ 'John (0)' , 'Alston (1)' , 'Lee (2)' , 'Grant (3)' ];
var groups = new vis . DataSet ();
for ( var g = 0 ; g < groupCount ; g ++ ) {
2015-07-18 13:45:18 +01:00
groups . add ({ id : g , content : '<a href="http://google.com"><span style="color:#97B0F8;">' + names [ g ] + '</a>' , title : 'Title of group ' + g , 'className' : 'myGroup' });
2015-03-28 13:50:19 +00:00
}
// create a dataset with items
2016-02-17 11:57:17 -07:00
var items = new vis . DataSet ({
type : { start : 'Moment' , end : 'Moment' }
});
2015-03-28 13:50:19 +00:00
for ( var i = 0 ; i < itemCount ; i ++ ) {
var start = now . clone (). add ( Math . random () * 200 , 'hours' );
2015-07-18 13:45:18 +01:00
var end = Math . random () > 0.5 ? start . clone (). add ( 24 , 'hours' ) : undefined ;
2015-03-28 13:50:19 +00:00
var group = Math . floor ( Math . random () * groupCount );
items . add ({
id : i ,
group : group ,
content : 'item ' + i +
2015-07-18 13:45:18 +01:00
' <a href="http://google.com"><span style="color:#97B0F8;">(' + names [ group ] + ')</span></a> ' ,
2015-03-28 13:50:19 +00:00
start : start ,
2015-07-18 13:45:18 +01:00
end : end ,
2015-03-28 13:50:19 +00:00
title : 'Title for item ' + i ,
2015-07-18 13:45:18 +01:00
//type: 'box',
2015-03-28 13:50:19 +00:00
className : 'myItem'
});
}
// create visualization
var container = document . getElementById ( 'visualization' );
var options = {
//orientation: 'top',
2015-07-18 13:45:18 +01:00
multiselect : true ,
2015-03-28 13:50:19 +00:00
editable : {
add : true ,
remove : true ,
updateTime : true ,
updateGroup : true
},
2015-07-18 13:45:18 +01:00
// orientation: {
// item: 'top',
// axis: 'both'
// },
2015-03-28 13:50:19 +00:00
onAdd : function ( item , callback ) {
item . content = prompt ( 'Enter text content for new item:' , item . content );
if ( item . content != null ) {
callback ( item ); // send back adjusted new item
}
else {
callback ( null ); // cancel item creation
}
},
onMove : function ( item , callback ) {
2016-02-17 11:57:17 -07:00
console . log ( 'onMove' , item )
2015-03-28 13:50:19 +00:00
if ( confirm ( 'Do you really want to move the item to\n' +
'start: ' + item . start + '\n' +
'end: ' + item . end + '?' )) {
callback ( item ); // send back item as confirmation (can be changed)
}
else {
callback ( null ); // cancel editing item
}
},
onMoving : function ( item , callback ) {
2015-07-18 13:45:18 +01:00
var min = moment (). minutes ( 0 ). seconds ( 0 ). milliseconds ( 0 ). add ( - 2 , 'day' ). toDate ();
2015-03-28 13:50:19 +00:00
if ( item . start < min ) {
item . start = min ;
}
2015-07-18 13:45:18 +01:00
//item.className = item.id > 3 ? 'red' : 'green';
//item.group = Math.random() > 0.5 ? 2 : 1;
//item.hasMoved = true;
//item.content = Math.round(Math.random() * 4);
2015-03-28 13:50:19 +00:00
callback ( item ); // send back item as confirmation (can be changed)
},
onUpdate : function ( item , callback ) {
item . content = prompt ( 'Edit items text:' , item . content );
if ( item . content != null ) {
callback ( item ); // send back adjusted item
}
else {
callback ( null ); // cancel updating the item
}
},
onRemove : function ( item , callback ) {
if ( confirm ( 'Remove item ' + item . content + '?' )) {
callback ( item ); // confirm deletion
}
else {
callback ( null ); // cancel deletion
}
},
//stack: false,
//height: 200,
groupOrder : 'content'
};
console . time ( 'create timeline' );
var timeline = new vis . Timeline ( container );
console . timeEnd ( 'create timeline' );
console . time ( 'set options' );
timeline . setOptions ( options );
console . timeEnd ( 'set options' );
console . time ( 'set groups' );
timeline . setGroups ( groups );
console . timeEnd ( 'set groups' );
console . time ( 'set items' );
timeline . setItems ( items );
console . timeEnd ( 'set items' );
timeline . on ( 'select' , function ( selection ) {
console . log ( 'select' , selection );
});
/*
timeline.on('rangechange', function (range) {
console.log('rangechange', range);
});
timeline.on('rangechanged', function (range) {
console.log('rangechanged', range);
});
*/
2015-07-18 13:45:18 +01:00
//
2015-03-28 13:50:19 +00:00
timeline . on ( 'click' , function ( props ) {
console . log ( 'click' , props );
});
2015-07-18 13:45:18 +01:00
$ ( container ). click ( function ( event ) {
console . log ( 'click jquery' , timeline . getEventProperties ( event ));
});
2015-03-28 13:50:19 +00:00
timeline . on ( 'doubleClick' , function ( props ) {
console . log ( 'doubleClick' , props );
});
timeline . on ( 'contextmenu' , function ( props ) {
console . log ( 'contextmenu' , props );
});
items . on ( 'add' , console . log . bind ( console ));
items . on ( 'update' , console . log . bind ( console ));
items . on ( 'remove' , console . log . bind ( console ));
groups . on ( 'add' , console . log . bind ( console ));
groups . on ( 'update' , console . log . bind ( console ));
groups . on ( 'remove' , console . log . bind ( console ));
function log ( msg ) {
var logs = document . getElementById ( 'logs' );
logs . innerHTML = msg + '<br>' + logs . innerHTML ;
}
</ script >
< div id = "logs" ></ div >
</ body >
</ html >
