143 lines
3.2 KiB
JavaScript
143 lines
3.2 KiB
JavaScript
$(function () {
|
|
// we use an inline data source in the example, usually data would
|
|
// be fetched from a server
|
|
// ==============================================================
|
|
// Real Time Visits
|
|
// ==============================================================
|
|
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("#real-time", [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: ["#488c13"],
|
|
grid: {
|
|
color: "#AFAFAF",
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
backgroundColor: "transparent",
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "Visits: %x",
|
|
defaultTheme: false,
|
|
},
|
|
});
|
|
window.onresize = function (event) {
|
|
$.plot($("#real-time"), [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();
|
|
|
|
console.log("document ready");
|
|
var offset = 0;
|
|
plot1();
|
|
|
|
function plot1() {
|
|
var sin = [],
|
|
cos = [];
|
|
for (var i = 0; i < 12; i += 0.2) {
|
|
sin.push([i, Math.sin(i + offset)]);
|
|
cos.push([i, Math.cos(i + offset)]);
|
|
}
|
|
var options = {
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
points: {
|
|
show: true,
|
|
},
|
|
},
|
|
grid: {
|
|
hoverable: true, //IMPORTANT! this is needed for tooltip to work
|
|
},
|
|
yaxis: {
|
|
min: -1.2,
|
|
max: 1.2,
|
|
},
|
|
colors: ["#ee7951", "#4fb9f0"],
|
|
grid: {
|
|
color: "#AFAFAF",
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
backgroundColor: "#FFF",
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "'%s' of %x.1 is %y.4",
|
|
shifts: {
|
|
x: -60,
|
|
y: 25,
|
|
},
|
|
},
|
|
};
|
|
var plotObj = $.plot(
|
|
$("#flot-line-chart"),
|
|
[
|
|
{
|
|
data: sin,
|
|
label: "sin(x)",
|
|
},
|
|
{
|
|
data: cos,
|
|
label: "cos(x)",
|
|
},
|
|
],
|
|
options
|
|
);
|
|
}
|
|
});
|