|
|
@ -18,27 +18,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
var ws;
|
|
|
|
var ws;
|
|
|
|
var graph;
|
|
|
|
var graph;
|
|
|
|
|
|
|
|
var chartData = [];
|
|
|
|
var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
|
|
|
|
var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
|
|
|
|
|
|
|
|
|
|
|
|
$(window).load(function () {
|
|
|
|
$(window).load(function () {
|
|
|
|
|
|
|
|
var tNow = new Date().getTime() / 1000;
|
|
|
|
|
|
|
|
for (var i = 0; i < 30; i++) {
|
|
|
|
|
|
|
|
chartData.push({
|
|
|
|
|
|
|
|
x: tNow - (30 - i) * 15,
|
|
|
|
|
|
|
|
y: parseFloat(0)
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
graph = new Rickshaw.Graph({
|
|
|
|
graph = new Rickshaw.Graph({
|
|
|
|
element: document.getElementById("chart"),
|
|
|
|
element: document.getElementById("chart"),
|
|
|
|
width: $("#div-chart").width() - 50,
|
|
|
|
width: $("#div-chart").width() - 50,
|
|
|
|
height: 300,
|
|
|
|
height: 300,
|
|
|
|
renderer: "line",
|
|
|
|
renderer: "line",
|
|
|
|
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
|
|
|
|
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
|
|
|
|
series: new Rickshaw.Series.FixedDuration([{name: "Temperature"}], undefined, {
|
|
|
|
xScale: d3.time.scale(),
|
|
|
|
timeInterval: 10000,
|
|
|
|
series: [{
|
|
|
|
maxDataPoints: 20,
|
|
|
|
'color': palette.color(),
|
|
|
|
color: palette.color(),
|
|
|
|
'data': chartData,
|
|
|
|
timeBase: new Date().getTime() / 1000
|
|
|
|
'name': "Temperature"
|
|
|
|
})
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
graph.render();
|
|
|
|
graph.render();
|
|
|
|
|
|
|
|
|
|
|
|
xAxis = new Rickshaw.Graph.Axis.Time({
|
|
|
|
var xAxis = new Rickshaw.Graph.Axis.Time({
|
|
|
|
graph: graph
|
|
|
|
graph: graph
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
@ -52,11 +60,6 @@ $(window).load(function () {
|
|
|
|
element: document.getElementById('y_axis')
|
|
|
|
element: document.getElementById('y_axis')
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
new Rickshaw.Graph.Legend({
|
|
|
|
|
|
|
|
graph: graph,
|
|
|
|
|
|
|
|
element: document.getElementById('legend')
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
new Rickshaw.Graph.HoverDetail({
|
|
|
|
new Rickshaw.Graph.HoverDetail({
|
|
|
|
graph: graph,
|
|
|
|
graph: graph,
|
|
|
|
formatter: function (series, x, y) {
|
|
|
|
formatter: function (series, x, y) {
|
|
|
@ -70,7 +73,7 @@ $(window).load(function () {
|
|
|
|
connect(websocketUrl)
|
|
|
|
connect(websocketUrl)
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
$(window).unload(function() {
|
|
|
|
$(window).unload(function () {
|
|
|
|
disconnect();
|
|
|
|
disconnect();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
@ -86,11 +89,12 @@ function connect(target) {
|
|
|
|
if (ws) {
|
|
|
|
if (ws) {
|
|
|
|
ws.onmessage = function (event) {
|
|
|
|
ws.onmessage = function (event) {
|
|
|
|
var dataPoint = JSON.parse(event.data);
|
|
|
|
var dataPoint = JSON.parse(event.data);
|
|
|
|
var data = {
|
|
|
|
chartData.push({
|
|
|
|
Temperature: parseFloat(dataPoint[5])
|
|
|
|
x: parseInt(dataPoint[4]) / 1000,
|
|
|
|
};
|
|
|
|
y: parseFloat(dataPoint[5])
|
|
|
|
graph.series.addData(data);
|
|
|
|
});
|
|
|
|
graph.render();
|
|
|
|
chartData.shift();
|
|
|
|
|
|
|
|
graph.update();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -100,4 +104,4 @@ function disconnect() {
|
|
|
|
ws.close();
|
|
|
|
ws.close();
|
|
|
|
ws = null;
|
|
|
|
ws = null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|