77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
$(function () {
|
|
var data = [5, 10, 15, 20, 15, 30, 40],
|
|
totalPoints = 100;
|
|
function getRandomData() {
|
|
if (data.length > 0) data = data.slice(1);
|
|
// Do a random walk
|
|
while (data.length < totalPoints) {
|
|
var prev = data.length > 0 ? data[data.length - 1] : 10,
|
|
y = prev + Math.random() * 10 - 5;
|
|
if (y < 0) {
|
|
y = 0;
|
|
} else if (y > 100) {
|
|
y = 100;
|
|
}
|
|
data.push(y);
|
|
}
|
|
// Zip the generated y values with the x values
|
|
var res = [];
|
|
for (var i = 0; i < data.length; ++i) {
|
|
res.push([i, data[i]]);
|
|
}
|
|
return res;
|
|
}
|
|
// Set up the control widget
|
|
var updateInterval = 1000;
|
|
$("#updateInterval")
|
|
.val(updateInterval)
|
|
.change(function () {
|
|
var v = $(this).val();
|
|
if (v && !isNaN(+v)) {
|
|
updateInterval = +v;
|
|
if (updateInterval < 1) {
|
|
updateInterval = 1;
|
|
} else if (updateInterval > 1000) {
|
|
updateInterval = 1000;
|
|
}
|
|
$(this).val("" + updateInterval);
|
|
}
|
|
});
|
|
var plot = $.plot("#placeholder1", [getRandomData()], {
|
|
series: {
|
|
shadowSize: 1, // Drawing is faster without shadows
|
|
lines: { fill: true, fillColor: "transparent" },
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 100,
|
|
show: true,
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
},
|
|
colors: ["#fe5419"],
|
|
grid: {
|
|
color: "#AFAFAF",
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
backgroundColor: "transparent",
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "Visits: %x",
|
|
defaultTheme: false,
|
|
},
|
|
});
|
|
window.onresize = function (event) {
|
|
$.plot($("#placeholder1"), [getRandomData()]);
|
|
};
|
|
function update() {
|
|
plot.setData([getRandomData()]);
|
|
// Since the axes don't change, we don't need to call plot.setupGrid()
|
|
plot.draw();
|
|
setTimeout(update, updateInterval);
|
|
}
|
|
update();
|
|
});
|