71 lines
1.9 KiB
HTML
71 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script src="externalFiles/mjs_plot_0_3_n.js"></script>
|
|
</head>
|
|
<!body>
|
|
<body onresize="draw_graphs()" onload="draw_graphs()">
|
|
<canvas id="democanvas" width="600" height="400"></canvas>
|
|
<script>
|
|
//make a graph object
|
|
time = [0,1,2,3,4,5];
|
|
pot = [2,4,3,4,null,1];
|
|
still = [9,8,7,6,5,4];
|
|
var pressure_graph = mjs_plot.new_graph("pressure_graph","democanvas");
|
|
//give it data
|
|
pressure_graph.set_data([[time,pot],[time,still]]);
|
|
pressure_graph.set_captions(['pot','still']);
|
|
//set up some graphics styling (optional)
|
|
pressure_graph.default_graphics_style.title = "Pressures";
|
|
pressure_graph.default_graphics_style.x_axis_title = "Hours";
|
|
pressure_graph.default_graphics_style.y_axis_title = "pressure mbar";
|
|
pressure_graph.default_graphics_style.color_bg = '#fff';
|
|
//plot the graph
|
|
pressure_graph.reset();
|
|
pressure_graph.mjs_plot();
|
|
tim = 5;
|
|
saved_time = 5;
|
|
live = true;
|
|
function addPoint() {
|
|
pot.push(pot[tim]+0.1);
|
|
still.push(still[tim]+0.1);
|
|
tim += 1;
|
|
time.push(tim);
|
|
if (pressure_graph.busy()) {
|
|
return;
|
|
}
|
|
if (live) {
|
|
if (saved_time > pressure_graph.graphics_style.x_auto_max) {
|
|
live = false;
|
|
console.log("live", live);
|
|
return;
|
|
}
|
|
if (tim > pressure_graph.graphics_style.x_auto_max) {
|
|
pressure_graph.graphics_style.x_scale_auto_max = false;
|
|
pressure_graph.graphics_style.x_manual_max = tim;
|
|
}
|
|
} else if (tim < pressure_graph.graphics_style.x_auto_max) {
|
|
live = true;
|
|
console.log("live", live);
|
|
}
|
|
saved_time = tim;
|
|
pressure_graph.set_data([[time,pot],[time,still]]);
|
|
pressure_graph.mjs_plot();
|
|
}
|
|
|
|
setInterval(addPoint, 1000);
|
|
|
|
|
|
function draw_graphs(){
|
|
pressure_graph.canvas.width = window.innerWidth - 20;
|
|
pressure_graph.canvas.height = window.innerHeight - 20;
|
|
//tell the graph to plot
|
|
pressure_graph.mjs_plot();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|