68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
google.charts.load("current", { packages: ["corechart"] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
var dataAttack = google.visualization.arrayToDataTable([
|
|
["Element", "Density", { role: "style" }],
|
|
["192.168.11.2", 0, "#2F4A8A"],
|
|
["192.168.14.3", 0, "#2F848A"],
|
|
["192.168.10.4", 0, "#504ED4"],
|
|
["192.168.1.5", 0, "#4ED4B0"],
|
|
["192.168.8.6", 0, "#54A3A8"],
|
|
["192.168.4.7", 0, "#546DA8"],
|
|
["192.168.12.8", 0, "#5589A9"],
|
|
["192.168.14.9", 0, "#4ECBD4"],
|
|
["192.168.16.10", 0, "#4E76D4"],
|
|
["192.168.1.11", 0, "#201EC7"],
|
|
["192.168.32.12", 0, "#4ED4B0"],
|
|
["192.168.17.13", 0, "#1EC79A"],
|
|
["192.168.16.14", 0, "#1D86C7"],
|
|
["192.168.10.15", 0, "#1E51C7"],
|
|
]);
|
|
|
|
var view = new google.visualization.DataView(dataAttack);
|
|
view.setColumns([0, 1,
|
|
{
|
|
calc: "stringify",
|
|
sourceColumn: 1,
|
|
type: "string",
|
|
role: "annotation"
|
|
},
|
|
2]);
|
|
|
|
var options = {
|
|
title: "Number of Attack request",
|
|
bar: { groupWidth: "95%" },
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' },
|
|
hAxis: {
|
|
viewWindow: {
|
|
min: 0,
|
|
max: 500
|
|
}
|
|
},
|
|
};
|
|
var chartAttack = new google.visualization.BarChart(document.getElementById("barchart_attack"));
|
|
|
|
function updateData() {
|
|
var deviceId = localStorage.getItem('deviceId');
|
|
if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
|
|
for (var i = 0; i < dataAttack.getNumberOfRows(); i++) {
|
|
dataAttack.setValue(i, 1, Math.floor(Math.random() * 20)); // Random value
|
|
}
|
|
} else {
|
|
for (var i = 0; i < dataAttack.getNumberOfRows(); i++) {
|
|
dataAttack.setValue(i, 1, 0);
|
|
}
|
|
}
|
|
chartAttack.draw(view, options);
|
|
}
|
|
|
|
// Initial draw
|
|
updateData();
|
|
|
|
// Update data every 2 seconds
|
|
setInterval(updateData, 2000);
|
|
}
|