-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathd3_rickshaw.html
68 lines (62 loc) · 1.49 KB
/
d3_rickshaw.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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="rickshaw/rickshaw.min.css">
<script src="d3.v3.min.js" type="text/javascript"></script>
<script src="rickshaw/rickshaw.min.js" type="text/javascript"></script>
</head>
<body>
<style>
#chart_container {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
#chart {
position: relative;
left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
</style>
<div id="chart_container">
<div id="y_axis"></div>
<div id="chart"></div>
</div>
<script>
var dataset = [
{ x: -1893456000, y: 92228531 },
{ x: -1577923200, y: 106021568 },
{ x: -1262304000, y: 123202660 },
{ x: -946771200, y: 132165129 },
{ x: -631152000, y: 151325798 },
{ x: -315619200, y: 179323175 },
{ x: 0, y: 203211926 },
{ x: 315532800, y: 226545805 },
{ x: 631152000, y: 248709873 },
{ x: 946684800, y: 281421906 },
{ x: 1262304000, y: 308745538 }
];
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 300,
height: 200,
series: [{
color: 'steelblue',
data: dataset
}]
});
var axesTime = new Rickshaw.Graph.Axis.Time({graph : graph});
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
element: document.getElementById('y_axis'),
} );
// END
graph.render();
</script>
</body>
</html>