-
Notifications
You must be signed in to change notification settings - Fork 17
/
chart_template.html
71 lines (54 loc) · 2 KB
/
chart_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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>SolrLogReader Error Chart</title>
</head>
<body>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
google.load('visualization', '1', {packages: ['timeline']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Type');
data.addColumn('date', 'Date');
data.addColumn('date', 'Date');
data.addColumn({type: 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addRows([DATA_REPLACE]);
var options = {
height: HEIGHT_REPLACE,
hAxis: {
title: 'Date'
},
vAxis: {
title: ''
},
tooltip: { isHtml: true }
};
var chart = new google.visualization.Timeline(document.getElementById('ex0'));
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2]);
chart.draw(view, options);
function tpHandler(e) {
if(e.row != null) {
$("#output").html(data.getValue(e.row,3));
$(".google-visualization-tooltip").html(data.getValue(e.row,1)).css({width:"auto",height:"auto"});
}
}
google.visualization.events.addListener(chart, 'onmouseover', tpHandler);
}
</script>
<h3>DESC_REPLACE</h3>
<p>ABOUT_REPLACE</p>
<div id="chart_div" style="width: 80%;"></div>
<div id="ex0"></div>
<div id="output"></div>
</body>
</html>