Created
December 29, 2020 21:01
-
-
Save balain/697e30ab93c4008aa86d3949bc11b95d to your computer and use it in GitHub Desktop.
Simple timeline - HTML w/ remote JSON loading, 3 groups, one background, and min/max timespans
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<title>Timeline w/ Remote Data</title> | |
<style type="text/css"> | |
body, html { | |
font-family: sans-serif; | |
} | |
.vis-item.vis-background.groupA { background-color: rgba(255, 0, 0, 0.1); } | |
.vis-item.testA { background-color: rgba(255, 255, 0, 0.75); border-color: rgba(255, 0, 0, 1); } | |
</style> | |
<!-- <script src="../../../standalone/umd/vis-timeline-graph2d.min.js"></script> --> | |
<!-- vis-timeline from https://github.com/visjs/vis-timeline --> | |
<script type="text/javascript" src="https://unpkg.com/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script> | |
<!-- <link href="../../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> --> | |
</head> | |
<body> | |
Playground for timeline - using https://visjs.github.io/vis-timeline/examples/timeline/ | |
<div id="visualization"></div> | |
<div id="loading">loading...</div> | |
<script type="text/javascript"> | |
// load data via a fetch request. When the data is in, load the timeline | |
fetch('http://localhost:8888/data.json') | |
.then(resp => resp.json()) | |
.then(data => { | |
let groups = new vis.DataSet([ | |
{ id: 'group1', content: 'group1' }, | |
{ id: 'group2', content: 'group2' }, | |
{ id: 'group3', content: 'group3' } | |
]) | |
// console.log(`data: `, data) | |
// hide the "loading..." message | |
document.getElementById('loading').style.display = 'none'; | |
// DOM element where the Timeline will be attached | |
var container = document.getElementById('visualization'); | |
// Create a DataSet (allows two way data-binding) | |
// var items = new vis.DataSet(data); | |
var items = new vis.DataSet({ type: { start: 'ISODate', end: 'ISODate' } }) | |
items.add(data); | |
// Configuration for the Timeline | |
var options = { | |
zoomMin: 1000 * 60 * 60 * 24 * 7, // 7 days | |
zoomMax: 1000 * 60 * 60 * 24 * 30 * 36, // 36 months | |
tooltip: { | |
template: function(originalItemData, parsedItemData) { | |
var color = originalItemData.title == 'IN_PROGRESS' ? 'red' : 'green'; | |
return `<span style="color:${color}">${originalItemData.title ? originalItemData.title : originalItemData.content }</span>`; | |
} | |
} | |
}; | |
// Create a Timeline | |
var timeline = new vis.Timeline(container, items, groups, options); | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment