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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| function Chart(id, data) {
var chartData = JSON.parse(data);
var width = window.innerWidth * 0.85;
var height = window.innerHeight * 0.75 *2;
var svg = d3.select(id)
.append("svg")
.attr("width", width)
.attr("height", height);
var parseDate = d3.timeParse("%d.%m.%Y %H:%M:%S");
var xscale =
d3.scaleTime()
.domain([Date.parse(parseDate(chartData[0].timeData))-60000,
Date.parse(parseDate(chartData[chartData.length - 1].timeData)) + 60000])
.range([0, width*0.95])
;
var yscale = d3.scaleLinear()
.domain([0, d3.max(chartData, function (d) { return (d.lvlData*1.1)/10.0; } )] )
.range([height / 2, 0]);
var x_axis = d3.axisBottom().scale(xscale)
.tickFormat(d3.timeFormat("%H:%M"))
;
var lineLvl = d3.line()
.x(function (d) {
return xscale(Date.parse(parseDate(d.timeData)));
})
.y(function (d) {
return yscale(d.lvlData/10.0);
});
var lineVolume = d3.line()
.x(function (d) {
return xscale(Date.parse(parseDate(d.timeData)));
})
.y(function (d) {
return yscale(d.volumeData);
});
/////////////////////////////////////////////////
var focus = svg
.append('g')
.append('circle')
.style("fill", "none")
.attr("stroke", "black")
.attr('r', 8.5)
.style("opacity", 0);
////////////////////////////////////////////////
svg.append("path")
//.data(chartData, function (d) { return d.lvlData / 10.0 ;})
.attr("stroke", "blue")
.attr("stroke-width", 2.5)
.attr("fill", "none")
.attr("d", lineLvl(chartData))
.on("mouseover", function (event) {
d3.select(this).transition()
.attr('opacity', '.55');
focus.style("opacity", 1);
//console.log(event);
})
.on("mousemove", function (event, d) {
focus.attr("cx", event.layerX);
focus.attr("cy", event.layerY);
console.log(d.toString() );
})
.on("mouseout", function () {
d3.select(this).transition()
.attr('opacity', '1');
focus.style("opacity", 0);
});
svg.append("path")
.attr("stroke", "green")
.attr("stroke-width", 2.5)
.attr("fill", "none")
.attr("d", lineVolume(chartData));
var y_axis = d3.axisLeft().scale(yscale);
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
var xAxisTranslate = height / 2 + 10;
svg.append("g")
.attr("transform", "translate(50, " + xAxisTranslate + ")")
.call(x_axis);
} |
(
