<!DOCTYPE HTML> <html> <head> <title>Timeline | Custom function label format example</title> <style> body, html { font-family: arial, sans-serif; font-size: 11pt; } #visualization { box-sizing: border-box; width: 100%; height: 300px; } </style> <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> <script src="../../../dist/vis.js"></script> <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> </head> <body> <p> This example demonstrate using custom function label formats. </p> <div id="visualization"></div> <script> var now = moment().minutes(0).seconds(0).milliseconds(0); var groupCount = 3; var itemCount = 20; // create a data set with groups var names = ['John', 'Alston', 'Lee', 'Grant']; var groups = new vis.DataSet(); for (var g = 0; g < groupCount; g++) { groups.add({id: g, content: names[g]}); } // create a dataset with items var items = new vis.DataSet(); for (var i = 0; i < itemCount; i++) { var start = now.clone().add(Math.random() * 200, 'hours'); var group = Math.floor(Math.random() * groupCount); items.add({ id: i, group: group, content: 'item ' + i + ' <span style="color:#97B0F8;">(' + names[group] + ')</span>', start: start, type: 'box' }); } // create visualization var container = document.getElementById('visualization'); var options = { format: { minorLabels: function(date, scale, step) { var now = new Date(); var ago = now - date; var divider; switch (scale) { case 'millisecond': divider = 1; break; case 'second': divider = 1000; break; case 'minute': divider = 1000 * 60; break; case 'hour': divider = 1000 * 60 * 60; break; case 'day': divider = 1000 * 60 * 60 * 24; break; case 'weekday': divider = 1000 * 60 * 60 * 24 * 7; break; case 'month': divider = 1000 * 60 * 60 * 24 * 30; break; case 'year': divider = 1000 * 60 * 60 * 24 * 365; break; default: return new Date(date); } return (Math.round(ago * step / divider)) + " " + scale + "s ago" }, majorLabels: function(date, scale, step) { var now = new Date(); var ago = now - date; var divider; switch (scale) { case 'millisecond': divider = 1; break; case 'second': divider = 1000; break; case 'minute': divider = 1000 * 60; break; case 'hour': divider = 1000 * 60 * 60; break; case 'day': divider = 1000 * 60 * 60 * 24; break; case 'weekday': divider = 1000 * 60 * 60 * 24 * 7; break; case 'month': divider = 1000 * 60 * 60 * 24 * 30; break; case 'year': divider = 1000 * 60 * 60 * 24 * 365; break; default: return new Date(date); } return (Math.round(ago * step / divider)) + " " + scale + "s ago" } } }; var timeline = new vis.Timeline(container); timeline.setOptions(options); timeline.setGroups(groups); timeline.setItems(items); </script> </body> </html>