forked from holgerthies/d3-simple-plots
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
45 lines (45 loc) · 1.79 KB
/
test.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
<html>
<head>
<script>
simplePlot={};
</script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="axis.js"></script>
<script src="barplot.js"></script>
<script src="lineplot.js"></script>
<style type="text/css">
#example, #example2 {width: 500px; height:500px;}
.bar-1-1 {fill: #ffff00;}
.bar-1-2 {fill: #ff9900;}
.bar-2-1 {fill: #ff0000;}
.bar-2-2 {fill: #dd0000;}
.bar-2-3 {fill: #660000;}
.line-1 {stroke: red;}
.area-2 {fill: none;}
.area-1 {fill: yellow; }
rect:hover {fill: #0000ff;}
.dot-1:hover, .dot-2:hover {fill: orange;}
</style>
</head>
<body>
<svg id="example"></svg>
Zoom <input type="text" onchange="plot.start(this.value); plot.redraw()" size="3">
<input type="text" onchange="plot.end(this.value); plot.redraw()" size="3">
<button onClick="plot.toggleHidden(1,1)">Toggle</button>
<svg id="example2"></svg>
Zoom <input type="text" onchange="lplot.start(this.value); lplot.redraw()" size="3">
<input type="text" onchange="lplot.end(this.value); lplot.redraw()" size="3">
<button onClick="lplot.toggleHidden(1)">Toggle</button>
<script>
var plot = simplePlot.BarPlot();
plot.height(200).width(500).start(0).end(20).xtitle("Tag").ytitle("kwH");
d = [[{x: 2, y:[10, 30]}, {x: 3, y:[20, 40]} ], [{x: 2, y:[10]}, {x: 3, y:[20,30,40]} ]];
d3.select("#example").datum(d).call(plot);
var lplot = simplePlot.linePlot();
lplot.height(200).width(500).start(0).end(24).xtitle("Stunde").ytitle("kwH");
d2 = [[{x: 0, y:10}, {x: 3, y:5}, {x: 5, y: 20}, {x: 7, y: 25}, {x: 8, y:
27}, {x: 10, y: 30}, {x:14, y:20}, {x:20, y:70} ], [{x: 2, y:20}, {x: 3, y:50} ]];
d3.select("#example2").datum(d2).call(lplot);
</script>
</body>
</html>