-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
37 lines (35 loc) · 1.3 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" >
// @formatter:off
const tableData = [
{{ range $i, $e := $.Events -}}
[ {{ $e.ID }} {{ range $i, $s := $e.Slices -}}, new Date({{$s.Begin}}), new Date({{$s.End}}) {{ end }} ],
{{ end }}
];
// @formatter:on
</script>
<script type="text/javascript">
const options = {
timeline: { singleColor: '#8d8' },
};
google.charts.load('current', {'packages': ['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'Trace'});
dataTable.addColumn({type: 'date', id: 'Start'});
dataTable.addColumn({type: 'date', id: 'End'});
dataTable.addRows(tableData);
dataTable.sort([{column: 2, desc: false}]);
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="timeline" style="height: 800px;"></div>
</body>
</html>