64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
google.charts.load("current", { packages: ["corechart"] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
function getRandomData() {
|
|
var data = [["Element", "Density", { role: "style" }]];
|
|
for (var i = 0; i < 14; i++) {
|
|
var value = Math.floor(Math.random() * 4) + 5; // Random value between 5 and 8
|
|
data.push(["192.168.0." + (i + 2), value * 1, "#1E51C7"]);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function drawDynamicChart() {
|
|
var deviceId = localStorage.getItem('deviceId');
|
|
var data = google.visualization.arrayToDataTable(deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi'? getRandomData() : getDefaultData());
|
|
|
|
var view = new google.visualization.DataView(data);
|
|
view.setColumns([0, 1,
|
|
{
|
|
calc: "stringify",
|
|
sourceColumn: 1,
|
|
type: "string",
|
|
role: "annotation"
|
|
},
|
|
2]);
|
|
|
|
var options = {
|
|
title: "Number of all incoming request",
|
|
bar: { groupWidth: "95%" },
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' },
|
|
hAxis: {
|
|
viewWindow: {
|
|
min: 0,
|
|
max: 100
|
|
}
|
|
},
|
|
};
|
|
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
|
|
chart.draw(view, options);
|
|
}
|
|
|
|
function getDefaultData() {
|
|
var data = [["Element", "Density", { role: "style" }]];
|
|
for (var i = 0; i < 14; i++) {
|
|
data.push(["10.0.0." + (i + 2), 0, "#1E51C7"]); // Set all values to 0
|
|
}
|
|
return data;
|
|
}
|
|
|
|
// Initial draw
|
|
drawDynamicChart();
|
|
|
|
// Update chart every second
|
|
setInterval(function () {
|
|
drawDynamicChart();
|
|
}, 1000);
|
|
$(document).on('click', function() {
|
|
drawDynamicChart();
|
|
});
|
|
}
|