91 lines
2.9 KiB
JavaScript
91 lines
2.9 KiB
JavaScript
google.charts.load('current', { 'packages': ['corechart'] });
|
|
|
|
// Define options globally
|
|
var options = {
|
|
title: "Individual Training parameter changes",
|
|
bar: { groupWidth: "25%" },
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' },
|
|
vAxis: {
|
|
title:'epoch',
|
|
viewWindow: {
|
|
min: 0,
|
|
max: 100
|
|
}
|
|
},
|
|
hAxis: {
|
|
title:'log loss',
|
|
|
|
},
|
|
};
|
|
|
|
// Function to draw the initial chart
|
|
function drawChart() {
|
|
var deviceId = localStorage.getItem('deviceId');
|
|
var data;
|
|
if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
|
|
data = google.visualization.arrayToDataTable([
|
|
["Element", "Density", { role: "style" }],
|
|
["0.001", 8, "#1EBBC7"],
|
|
["0.002", 5, "#1EBBC7"],
|
|
["0.003", 6, "#1EBBC7"],
|
|
["0.004", 5, "#1EBBC7"],
|
|
["0.005", 8, "#1EBBC7"],
|
|
]);
|
|
} else {
|
|
data = google.visualization.arrayToDataTable([
|
|
["Element", "Density", { role: "style" }],
|
|
["0.001", 8, "#1EBBC7"],
|
|
["0.002", 5, "#1EBBC7"],
|
|
["0.003", 6, "#1EBBC7"],
|
|
["0.004", 5, "#1EBBC7"],
|
|
["0.005", 8, "#1EBBC7"],
|
|
]);
|
|
}
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById('DurationChart'));
|
|
chart.draw(data, options);
|
|
}
|
|
|
|
// Function to update chart data every second
|
|
function updateChartData() {
|
|
setInterval(function() {
|
|
var deviceId = localStorage.getItem('deviceId');
|
|
var newData;
|
|
if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
|
|
newData = [
|
|
["Element", "Density", { role: "style" }],
|
|
["0.001", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
|
|
["0.002", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
|
|
["0.003", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
|
|
["0.004", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
|
|
["0.005", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
|
|
|
|
];
|
|
} else {
|
|
newData = [
|
|
["Element", "Density", { role: "style" }],
|
|
["0.001", 0, "#1EBBC7"],
|
|
["0.002", 0, "#1EBBC7"],
|
|
["0.003", 0, "#1EBBC7"],
|
|
["0.004", 0, "#1EBBC7"],
|
|
["0.005", 0, "#1EBBC7"],
|
|
|
|
];
|
|
}
|
|
|
|
var newDataTable = google.visualization.arrayToDataTable(newData);
|
|
var chart = new google.visualization.ColumnChart(document.getElementById('DurationChart'));
|
|
chart.draw(newDataTable, options);
|
|
}, 1000);
|
|
}
|
|
|
|
// Load Google Charts and draw the initial chart
|
|
google.charts.setOnLoadCallback(function() {
|
|
drawChart();
|
|
updateChartData();
|
|
});
|
|
|
|
|