117 lines
4.3 KiB
JavaScript
117 lines
4.3 KiB
JavaScript
google.charts.load("current", { packages: ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
function fetchDataAndDrawChart() {
|
|
// Fetch data from Django view
|
|
fetch('/read_tx_bytes')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Check device ID
|
|
var deviceId = localStorage.getItem('deviceId');
|
|
if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
|
|
// Create data array from the response
|
|
const chartData = [["Density", "Element", { role: "style" }]];
|
|
data.switch_data.forEach((value, index) => {
|
|
chartData.push([`${index + 1}`, parseInt(value), "#1EC79A"]);
|
|
});
|
|
|
|
// Create DataTable from the data array
|
|
const dataTable = google.visualization.arrayToDataTable(chartData);
|
|
var view = new google.visualization.DataView(dataTable);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
var options = {
|
|
title: "SWITCH",
|
|
bar: { groupWidth: "95%" },
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' }
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById("SwitchChart"));
|
|
chart.draw(view, options);
|
|
} else {
|
|
// If device ID doesn't match, draw chart with all values set to 0
|
|
const chartData = [["Density", "Element", { role: "style" }]];
|
|
for (let i = 1; i <= data.switch_data.length; i++) {
|
|
chartData.push([`${i}`, 0, "#1EC79A"]);
|
|
}
|
|
|
|
const dataTable = google.visualization.arrayToDataTable(chartData);
|
|
var view = new google.visualization.DataView(dataTable);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
var options = {
|
|
title: "SWITCH",
|
|
bar: { groupWidth: "95%" },
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' }
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById("SwitchChart"));
|
|
chart.draw(view, options);
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching data:', error));
|
|
}
|
|
|
|
// Call the function once to draw the initial chart
|
|
fetchDataAndDrawChart();
|
|
|
|
// Update chart every 5 seconds
|
|
setInterval(fetchDataAndDrawChart, 25000);
|
|
$(document).on('click', function() {
|
|
fetchDataAndDrawChart();
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// google.charts.load("current", { packages: ['corechart'] });
|
|
// google.charts.setOnLoadCallback(drawChart);
|
|
|
|
// function drawChart() {
|
|
// // Fetch data from Django view
|
|
// fetch('/read_tx_bytes')
|
|
// .then(response => response.json())
|
|
// .then(data => {
|
|
// // Create data array from the response
|
|
// const chartData = [["Density", "Element", { role: "style" }]];
|
|
// data.switch_data.forEach((value, index) => {
|
|
// chartData.push([`${index + 1}`, parseInt(value), "#1EC79A"]);
|
|
// });
|
|
|
|
// // Create DataTable from the data array
|
|
// const dataTable = google.visualization.arrayToDataTable(chartData);
|
|
// var view = new google.visualization.DataView(dataTable);
|
|
// view.setColumns([0, 1, 2]);
|
|
|
|
// var options = {
|
|
// title: "SWITCH",
|
|
// bar: { groupWidth: "95%" },
|
|
// legend: { position: "none" },
|
|
// backgroundColor: '#0c212b',
|
|
// tooltip: { trigger: 'none' }
|
|
// };
|
|
|
|
// var chart = new google.visualization.ColumnChart(document.getElementById("SwitchChart"));
|
|
// chart.draw(view, options);
|
|
// })
|
|
// .catch(error => console.error('Error fetching data:', error));
|
|
// }
|