Stap 7: Het toevoegen van meters met Google Visualization
Nu dat ik onze 4 stuks van gegevens (bpm, spo2, avg bpm, avg spo2), kan ik meters gebruiken om te visualiseren van de resultaten met betrekking tot de waardebereiken dat onze dochter meestal heeft. Na rondkijken op de verschillende bibliotheken, koos ik voor Google Visualization om hiervoor te gebruiken. Het scheen vrij ongecompliceerd Javascript gebruiken, had de kenmerken ik wilde, en did niet vergen ieder lokaal installeren op de webserver.
De php-code in de vorige stap die de gegevens zullen worden gebruikt om de waarden op deze meters. Hieronder is de code die de resultaten van de php geconverteerd naar een indeling die Google Visualization kan begrijpen. Deze code ook instellen op het label van het tekstvak voor elke meter.
var bpm_data = google.visualization.arrayToDataTable([['Label', 'Value'],['BPM', <?php echo $chart_bpm_data; ?>]]); var spo2_data = google.visualization.arrayToDataTable([['Label', 'Value'],['SPO2', <?php echo $chart_spo2_data; ?>]]); var avg_bpm_data = google.visualization.arrayToDataTable([['Label', 'Value'],['AVG BPM', <?php echo $chart_avg_bpm_data; ?>]]); var avg_spo2_data = google.visualization.arrayToDataTable([['Label', 'Value'],['AVG SPO2', <?php echo $chart_avg_spo2_data; ?>]]);
Next up is afstelbereik de kleur op de meters - herinneren dat hoger is beter voor zuurstofniveaus, maar lager is (meestal) beter voor hartslag:
var BPM_Chart_Options = { min: 0, max: 200, greenFrom: 60, greenTo: 130, redFrom: 160, redTo: 200, yellowFrom:130, yellowTo: 160, minorTicks: 5, }; var SPO2_Chart_Options = { min: 0, max: 100, greenFrom: 90, greenTo: 100, redFrom: 50, redTo: 80, yellowFrom:80, yellowTo: 90, minorTicks: 5, };
Tot slot ik gebruik volgende Javascript de werkelijke meters maken, en vervolgens de gegevens/opties van bovenaf toewijzen aan elk:
var bpm_chart = new google.visualization.Gauge(document.getElementById('chart1')); bpm_chart.draw(bpm_data, BPM_Chart_Options); var spo2_chart = new google.visualization.Gauge(document.getElementById('chart2')); spo2_chart.draw(spo2_data, SPO2_Chart_Options); var avg_bpm_chart = new google.visualization.Gauge(document.getElementById('chart3')); avg_bpm_chart.draw(avg_bpm_data, BPM_Chart_Options); var avg_spo2_chart = new google.visualization.Gauge(document.getElementById('chart4')); avg_spo2_chart.draw(avg_spo2_data, SPO2_Chart_Options);
Zoals in de vorige stappen, kunnen de volledige inhoud van dit bestand (gpulse.php) worden gevonden in de zip gehecht aan de "Software" stap hierboven. Ik leg dat bestand in mijn web server home-directory en vervolgens de pagina hebt geopend vanuit mijn telefoon. De screenshot kunt hierboven worden gevonden.