1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | const data_url = "./input_data.json"; const update_interval_ms = 2000; const kivinet_chart_definition = { type: 'bar', data: { // Hier Anzahl Server erhöhen, einfach einen einfügen labels: ['BBB-Server 1 (ZEV)', 'BBB-Server 2 (ZEV)', 'BBB-Server 3 (ROW)', 'BBB-Server 4 (BRV)', 'Kivinet (ZEV)', 'Turn-Server'], datasets: [{ label: '', data: [1, 1, 1, 1, 1, 1], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { legend: { display: false, }, responsive: true, title: { display: true, text: 'Auslastung unserer Server' }, layout: { padding: { left: 50, right: 50, top: 50, bottom: 50 } }, scales: { yAxes: [{ ticks: { min: 0, max: 100, callback: function (value, index, values) { return value + '%'; } } }] } } } class KivinetChart { constructor(ctx) { this.chart = new Chart(ctx, kivinet_chart_definition); this.on_timer_fetch_data(); setInterval(() => this.on_timer_fetch_data(), update_interval_ms); } update_chart(new_data) { this.chart.data.datasets[0].data = new_data; this.chart.update(); } on_timer_fetch_data() { fetch(data_url) .then(response => response.json()) .then(data => this.update_chart(data)); } } export default KivinetChart; |