124 lines
4.7 KiB
JavaScript
124 lines
4.7 KiB
JavaScript
google.charts.load("current", { packages: ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
function drawChart() {
|
|
var data = google.visualization.arrayToDataTable([
|
|
["Element", "Density", { role: "style" }],
|
|
["dt", 8, "#1EBBC7 "],
|
|
["tk_kbps", 10, "#1E51C7"],
|
|
["rx_bytes", 19, "#1D86C7"],
|
|
["port_no", 12, "#1EC79A"],
|
|
["protocol", 2, "#201EC7"],
|
|
["Pairflow", 1, "#54A3A8"],
|
|
["pktrate", 5, "#546DA8"],
|
|
["byteperflow", 15, "#5589A9"],
|
|
["packetins", 20, "#54A892"],
|
|
["pktperflow", 25, "#5554A8"],
|
|
["tot_dur", 25, "#4ECBD4"],
|
|
["dur", 9, "#4E76D4"],
|
|
["bytecount", 6, "#4FA0D3"],
|
|
["pktcount", 8, "#4ED4B0"],
|
|
["dst", 12, "#504ED4"],
|
|
["src", 45, "#2F848A"],
|
|
["switch", 12, "#2F4A8A"],
|
|
["flows", 22, "#2F6689"],
|
|
["tot_kbps", 8, "#302F8A"],
|
|
["lable", 35, "#2F8A71"],
|
|
["rx_kbps", 9, "#546DA8"],
|
|
]);
|
|
|
|
var view = new google.visualization.DataView(data);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
var options = {
|
|
title: "Features which has NuLL values",
|
|
bar: { groupWidth: "95%" },
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' },
|
|
vAxis: {
|
|
title: 'Count',
|
|
viewWindow: {
|
|
min: 0,
|
|
max: 100
|
|
}
|
|
},
|
|
};
|
|
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
|
|
chart.draw(view, options);
|
|
|
|
|
|
function updateData() {
|
|
var deviceId = localStorage.getItem('deviceId');
|
|
if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi'){
|
|
var newData = [
|
|
["Element", "Density", { role: "style" }],
|
|
["dt", Math.floor(Math.random() * 4) + 5, "#1EBBC7 "],
|
|
["tk_kbps", Math.floor(Math.random() * 4) + 5, "#1E51C7"],
|
|
["rx_bytes", Math.floor(Math.random() * 4) + 5, "#1D86C7"],
|
|
["port_no", Math.floor(Math.random() * 4) + 5, "#1EC79A"],
|
|
["protocol", Math.floor(Math.random() * 4) + 5, "#201EC7"],
|
|
["Pairflow", Math.floor(Math.random() * 4) + 5, "#54A3A8"],
|
|
["pktrate", Math.floor(Math.random() * 4) + 5, "#546DA8"],
|
|
["byteperflow", Math.floor(Math.random() * 4) + 5, "#5589A9"],
|
|
["packetins", Math.floor(Math.random() * 4) + 5, "#54A892"],
|
|
["pktperflow", Math.floor(Math.random() * 4) + 5, "#5554A8"],
|
|
["tot_dur", Math.floor(Math.random() * 4) + 5, "#4ECBD4"],
|
|
["dur", Math.floor(Math.random() * 4) + 5, "#4E76D4"],
|
|
["bytecount", Math.floor(Math.random() * 4) + 5, "#4FA0D3"],
|
|
["pktcount", Math.floor(Math.random() * 4) + 5, "#4ED4B0"],
|
|
["dst", Math.floor(Math.random() * 4) + 5, "#504ED4"],
|
|
["src", Math.floor(Math.random() * 4) + 5, "#2F848A"],
|
|
["switch", Math.floor(Math.random() * 4) + 5, "#2F4A8A"],
|
|
["flows", Math.floor(Math.random() * 4) + 5, "#2F6689"],
|
|
["tot_kbps", Math.floor(Math.random() * 4) + 5, "#302F8A"],
|
|
["lable", Math.floor(Math.random() * 4) + 5, "#2F8A71"],
|
|
["rx_kbps", Math.floor(Math.random() * 4) + 5, "#546DA8"],
|
|
];
|
|
|
|
data = google.visualization.arrayToDataTable(newData);
|
|
view = new google.visualization.DataView(data);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
chart.draw(view, options);
|
|
|
|
} else {
|
|
|
|
var newData = [
|
|
["Element", "Density", { role: "style" }],
|
|
["dt", 0, "#1EBBC7 "],
|
|
["tk_kbps", 0, "#1E51C7"],
|
|
["rx_bytes", 0, "#1D86C7"],
|
|
["port_no", 0, "#1EC79A"],
|
|
["protocol", 0, "#201EC7"],
|
|
["Pairflow", 0, "#54A3A8"],
|
|
["pktrate", 0, "#546DA8"],
|
|
["byteperflow", 0, "#5589A9"],
|
|
["packetins", 0, "#54A892"],
|
|
["pktperflow", 0, "#5554A8"],
|
|
["tot_dur", 0, "#4ECBD4"],
|
|
["dur", 0, "#4E76D4"],
|
|
["bytecount", 0, "#4FA0D3"],
|
|
["pktcount", 0, "#4ED4B0"],
|
|
["dst", 0, "#504ED4"],
|
|
["src", 0, "#2F848A"],
|
|
["switch", 0, "#2F4A8A"],
|
|
["flows", 0, "#2F6689"],
|
|
["tot_kbps", 0, "#302F8A"],
|
|
["lable", 0, "#2F8A71"],
|
|
["rx_kbps", 0, "#546DA8"],
|
|
];
|
|
|
|
data = google.visualization.arrayToDataTable(newData);
|
|
view = new google.visualization.DataView(data);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
chart.draw(view, options);
|
|
}
|
|
}
|
|
|
|
setInterval(updateData, 1000);
|
|
$(document).on('click', function() {
|
|
updateData();
|
|
});
|
|
}
|