diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/other/functionLabelFormats.html')
| -rw-r--r-- | www/lib/vis/examples/timeline/other/functionLabelFormats.html | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/www/lib/vis/examples/timeline/other/functionLabelFormats.html b/www/lib/vis/examples/timeline/other/functionLabelFormats.html new file mode 100644 index 00000000..9de9023b --- /dev/null +++ b/www/lib/vis/examples/timeline/other/functionLabelFormats.html @@ -0,0 +1,141 @@ +<!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" /> + <script src="../../googleAnalytics.js"></script> +</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>
\ No newline at end of file |