85 lines
3.5 KiB
JavaScript
85 lines
3.5 KiB
JavaScript
google.charts.load("current", { packages: ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
// Fetch data from the API
|
|
function fetchDataAndDrawChart() {
|
|
var deviceId = localStorage.getItem('deviceId');
|
|
if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi'){
|
|
fetch('/read_tx_bytes')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Create the data table
|
|
var dataTable = new google.visualization.DataTable();
|
|
dataTable.addColumn('string', 'Density');
|
|
dataTable.addColumn('number', 'Element');
|
|
dataTable.addColumn({ type: 'string', role: 'style' });
|
|
|
|
// Add the fixed density values and data from the API
|
|
dataTable.addRows([
|
|
["1", parseInt(data.tx_bytes_data[0]), "#1E51C7"],
|
|
["2", parseInt(data.tx_bytes_data[1]), "#1E51C7"],
|
|
["3", parseInt(data.tx_bytes_data[2]), "#1E51C7"],
|
|
["4", parseInt(data.tx_bytes_data[3]), "#1E51C7"],
|
|
["5", parseInt(data.tx_bytes_data[4]), "#1E51C7"],
|
|
["6", parseInt(data.tx_bytes_data[5]), "#1E51C7"],
|
|
["7", parseInt(data.tx_bytes_data[6]), "#1E51C7"],
|
|
["8", parseInt(data.tx_bytes_data[7]), "#1E51C7"]
|
|
]);
|
|
|
|
var view = new google.visualization.DataView(dataTable);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
var options = {
|
|
title: "TX_BYTES - Transmitted Bytes",
|
|
bar: { groupWidth: "95%" },
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' }
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById("TransmittedChart"));
|
|
chart.draw(view, options);
|
|
})
|
|
} else {
|
|
var dataTable = new google.visualization.DataTable();
|
|
dataTable.addColumn('string', 'Density');
|
|
dataTable.addColumn('number', 'Element');
|
|
dataTable.addColumn({ type: 'string', role: 'style' });
|
|
|
|
dataTable.addRows([
|
|
["1", 0, "#1E51C7"],
|
|
["2", 0, "#1E51C7"],
|
|
["3", 0, "#1E51C7"],
|
|
["4", 0, "#1E51C7"],
|
|
["5", 0, "#1E51C7"],
|
|
["6", 0, "#1E51C7"],
|
|
["7", 0, "#1E51C7"],
|
|
["8", 0, "#1E51C7"]
|
|
]);
|
|
|
|
var view = new google.visualization.DataView(dataTable);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
var options = {
|
|
title: "TX_BYTES - Transmitted Bytes",
|
|
bar: { groupWidth: "95%" },
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' }
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById("TransmittedChart"));
|
|
chart.draw(view, options);
|
|
}
|
|
}
|
|
|
|
fetchDataAndDrawChart();
|
|
|
|
// Update chart every 5 seconds
|
|
setInterval(fetchDataAndDrawChart, 10000);
|
|
$(document).on('click', function() {
|
|
fetchDataAndDrawChart();
|
|
});
|
|
}
|