A Timeline layout can make your data easier to follow. This can be particularly useful for milestones in a project or a meeting schedule.
Use the following steps to create a timeline that displays a meeting schedule.
1. Add the following references to your page. The gridLayoutEngine reference is used for a basic grid. The timelineStrategy reference is required for a Timeline view.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="dataview.css">
<link rel="stylesheet" type="text/css" href="plugins/timelineStrategy.css">
<script src="dataview.min.js" type="text/javascript"></script>
<script src="plugins/gridLayoutEngine.min.js" type="text/javascript"></script>
<script src="plugins/timelineStrategy.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>2. Add any formatting and the height and width for the grid on the page.
<style>
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.gc-grid {
border: 1px none white;
}
</style>
</head>
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;user-select:none;-webkit-user-select: none;">
<div style="height: 100%; position: relative">
<div id="gridContainer" style="height:620px;">
<div id="grid1" style="height:100%;position: relative"></div>
</div>3. Define variables for the data view and strategy.
var dataView;
var timeLinestrategy;4. Specify the column items from the JSON file.
var columns = [{
id: 'topic',
dataField: 'topic'
}, {
id: 'start',
dataField: 'start',
format: 'MMMM dd, HH:mmtt'
}, {
id: 'end',
dataField: 'end',
format: 'HH:mm tt'
}, {
id: 'speaker',
dataField: 'speaker'
}, {
id: 'content',
dataField: 'content'
}];5. Create a template.
var groupDetailEventTemplate = '<div style="margin:5px;">' +
'<div style="font-size:14px;font-weight: bold;">{{=it.topic}}</div>' +
'<blockquote style="padding-left: 15px;display: block;font-size:13px;font-family: "Helvetic Neue, Helvetica, Arial">{{=it.content}}</blockquote>' +
'<span style="margin-right: auto" >{{=it.start}}</span>' +
'</div>';6. Specify the JSON file to get data from.
$.getJSON('timeline.json', function(data) {7. Check to see if the start and end dates in the data match.
$.each(data, function(key, val) {
for (var prop in val) {
if (prop === 'start' || prop === 'end') {
val[prop] = new Date(val[prop]);
}
}8. Create a formatter to handle the dates.
var excelFormatter = new GC.Spread.Views.DataView.Plugins.Formatter.ExcelFormatter('mmmm dd');9. Assign the timeline strategy variable.
timeLinestrategy = new GC.Spread.Views.DataView.Plugins.TimelineStrategy({});10. Create the data view, specify the group by field, and specify the templates to use for the rows and timeline group.
dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new
GC.Spread.Views.DataView.Plugins.GridLayoutEngine({
grouping: {
field: 'start',
converter: function(field) {
return excelFormatter.format(field);
}
},
autoRowHeight: true,
rowTemplate: groupDetailEventTemplate,
groupStrategy: timeLinestrategy
}));That is all you need to do to create a Timeline view in Spread.Views. Here is the complete example.
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="dataview.css">
<link rel="stylesheet" type="text/css" href="plugins/timelineStrategy.css">
<script src="dataview.min.js" type="text/javascript"></script>
<script src="plugins/gridLayoutEngine.min.js" type="text/javascript"></script>
<script src="plugins/timelineStrategy.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>
<style>
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.gc-grid {
border: 1px none white;
}
</style>
</head>
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;user-select:none;-webkit-user-select: none;">
<div style="height: 100%; position: relative">
<div id="gridContainer" style="height:620px;">
<div id="grid1" style="height:100%;position: relative"></div>
</div>
</div>
<script type="text/javascript">
var dataView;
var timeLinestrategy;
var columns = [{
id: 'topic',
dataField: 'topic'
}, {
id: 'start',
dataField: 'start',
format: 'MMMM dd, HH:mmtt'
}, {
id: 'end',
dataField: 'end',
format: 'HH:mm tt'
}, {
id: 'speaker',
dataField: 'speaker'
}, {
id: 'content',
dataField: 'content'
}];
var groupDetailEventTemplate = '<div style="margin:5px;">' +
'<div style="font-size:14px;font-weight: bold;">{{=it.topic}}</div>' +
'<blockquote style="padding-left: 15px;display: block;font-size:13px;font-family: "Helvetic Neue, Helvetica, Arial">{{=it.content}}</blockquote>' +
'<span style="margin-right: auto" >{{=it.start}}</span>' +
'</div>';
$(document).ready(function() {
$.getJSON('timeline.json', function(data) {
$.each(data, function(key, val) {
for (var prop in val) {
if (prop === 'start' || prop === 'end') {
val[prop] = new Date(val[prop]);
}
}
});
var excelFormatter = new GC.Spread.Views.DataView.Plugins.Formatter.ExcelFormatter('mmmm dd');
//triangle
timeLinestrategy = new GC.Spread.Views.DataView.Plugins.TimelineStrategy({});
dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.DataView.Plugins.GridLayoutEngine({
grouping: {
field: 'start',
converter: function(field) {
return excelFormatter.format(field);
}
},
autoRowHeight: true,
rowTemplate: groupDetailEventTemplate,
groupStrategy: timeLinestrategy
}));
});
});
</script>
</body>
</html>You can download the JSON file here: timeline.
You can download a CTP of Spread.Views here: http://spread.grapecity.com/spreadjs/views/.