...
De foto hierboven is een van de voorbeelden die het artikel aanhaald. De grafiek word gemaakt met behulp van de math.random functie maar dit zou je kunnen aanpassen naar een ajax request om de data op te halen. Je kan zelf aangeven hoe snel de grafiek moet updaten doormiddel van het getal te veranderen dat op lijn 65 staat. Het staat momenteel op 100 dat houdt in dat de grafiek elke 100ms opnieuw word getekend. (Programming Real Time Charts & Graphs with JavaScript, 2022)
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#chart_div {
width: 1200px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- CONTAINER FOR CHART -->
<div id="chart_div"></div>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script>
// load current chart package
google.charts.load('current', {
packages: ['corechart', 'line'],
});
// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// create data object with default value
let data = google.visualization.arrayToDataTable([
['Time', 'CPU Usage', 'RAM'],
[0, 0, 0],
]);
// create options object with titles, colors, etc.
let options = {
title: 'CPU Usage',
hAxis: {
textPosition: 'none',
},
vAxis: {
title: 'Usage',
},
};
// draw chart on load
let chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
// max amount of data rows that should be displayed
let maxDatas = 50;
// interval for adding new data every 250ms
let index = 0;
setInterval(function () {
// instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
let randomCPU = Math.random() * 20;
let randomRAM = Math.random() * 50 + 20;
if (data.getNumberOfRows() > maxDatas) {
data.removeRows(0, data.getNumberOfRows() - maxDatas);
}
data.addRow([index, randomCPU, randomRAM]);
chart.draw(data, options);
index++;
}, 100);
}
</script>
</body>
</html> |
...
Verder hebben wij ook nog gekeken naar wat anderen over google charts hebben geschreven en het algemene idee achter Google charts is dat het lastig te implementeren is, maar niet onmogelijk. Mijn bevindingen zijn daarom het volgende, er is veel documentatie en een grote community die regelmatig vragen stellen en antwoorden. Daarom samen met het feit dat Google Charts veel verschillende grafieken heeft, kan ik deze API zeer aanraden voor ons project.
Wat zijn de voor- en nadelen van de verschillende geïmplementeerde API's?
...
JFreeChart. (z.d.). https://www.jfree.org/jfreechart/
Programming Real Time Charts & Graphs with JavaScript. (2022, 1 oktober). webdeasy.de. https://webdeasy.de/en/javascript-real-time-charts/