You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.8 KiB
109 lines
2.8 KiB
/*=========================================================================================
|
|
File Name: realtime.js
|
|
Description: Flot realtime chart
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
|
|
Version: 1.0
|
|
Author: PIXINVENT
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
|
|
// Realtime chart
|
|
// ------------------------------
|
|
$(window).on("load", function(){
|
|
|
|
// We use an inline data source in the example, usually data would
|
|
// be fetched from a server
|
|
|
|
var data = [],
|
|
totalPoints = 300;
|
|
|
|
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] : 50,
|
|
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 = 30;
|
|
$("#updateInterval").val(updateInterval).change(function () {
|
|
var v = $(this).val();
|
|
if (v && !isNaN(+v)) {
|
|
updateInterval = +v;
|
|
if (updateInterval < 1) {
|
|
updateInterval = 1;
|
|
} else if (updateInterval > 2000) {
|
|
updateInterval = 2000;
|
|
}
|
|
$(this).val("" + updateInterval);
|
|
}
|
|
});
|
|
|
|
var plot = $.plot("#realtime", [ getRandomData() ], {
|
|
grid: {
|
|
borderWidth: 1,
|
|
borderColor: "transparent",
|
|
color: '#999',
|
|
minBorderMargin: 20,
|
|
labelMargin: 10,
|
|
margin: {
|
|
top: 8,
|
|
bottom: 20,
|
|
left: 20
|
|
},
|
|
},
|
|
series: {
|
|
shadowSize: 0, // Drawing is faster without shadows
|
|
lines: {
|
|
fill: true,
|
|
fillColor: { colors: [ { opacity: 0.8 }, { opacity: 0.1 } ] }
|
|
}
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 100
|
|
},
|
|
xaxis: {
|
|
show: false
|
|
},
|
|
colors: ['#FF7D4D']
|
|
});
|
|
|
|
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();
|
|
}); |