Chartjs parte seconda- ricavare due serie di dati mediante query php e inserirli in un chart
Chart.js è una libreria javascript che consente creare grafici dinami, graficamente gradevoli e responsive.
Gli esempi illustrati in questo articolo si riferiscono alla versione 2.7.2. Maggiori informazioni possono essere reperite presso questo link.
In questo articolo vedremo come confrontare due serie di dati entrambe estratte dal database.
L’inclusione delle ribrerie e il posizionamento del canvas è identico a quello visto nell’articolo precedente in cui abbiamo visto come estrarre via php e visualizzare una sola serie di dati.
I dati verranno estratti chiamando due volte, con metodo post, la pagina dataTempMonth.php che interroga il DB e verranno posti in due array diversi, similmente a quanto si fa per una sola serie.
La funzione setTimeout() viene utilizzata per impostare un ritardo nell’esecuzione delle due interrogazioni. Maggiori informazioni sul suo uso qui.
Stavolta vengono riempiti due array per ogni serie di dati.
for (var i in slot2)
{
time2.push(slot2[i].Time);
temp2.push(slot2[i].Temp);
}
Di seguito il codice completo:
<!DOCTYPE html>
<html>
<head>
<title>example2</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="speedChart"></canvas>
</div>
</div>
<script>
//leggo la query string
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
var chosenYear=urlParams.getAll('year');
var qmonth;
var qyear1;
var qyear2;
$(document).ready(function () {
var today = new Date();
qmonth=urlParams.get('month');
qyear1=chosenYear[1];
qyear2=chosenYear[0];
showGraph();
});
function showGraph()
{
var months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
var slot1 = [];
var slot2 = [];
//estraggo la prima serie
$.post("dataTempMonth.php",{month: Number(qmonth), year: Number(qyear1)},
function (data)
{
slot1=data;
});
setTimeout(() => {
console.log(slot1);
}, 150);
//estraggo la seconda serie
$.post("dataTempMonth.php",{month: Number(qmonth), year: Number(qyear2)},
function (data)
{
slot2=data;
console.log(slot2);
});
setTimeout(() => {
var speedCanvas = document.getElementById("speedChart");
//definizioni degli elementi grafici generali
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.elements.point.radius = 2;
Chart.defaults.global.elements.line.tension = 1;
//Slot1 data
var time1 = [];
var temp1 = [];
for (var i in slot1) {
time1.push(slot1[i].Time);
temp1.push(slot1[i].Temp);
}
//Slot2 data
var time2 = [];
var temp2 = [];
for (var i in slot2) {
time2.push(slot2[i].Time);
temp2.push(slot2[i].Temp);
}
//Impostiamo la grafica delle due linee
var y = new Date(time1[0]);
var dataFirst = {
label:y.getFullYear(),
data: temp1,
fill: false,
borderColor: '#4C0827',
tension: 0.4
};
y = new Date(time2[0]);
var dataSecond = {
label: y.getFullYear(),
data: temp2,
fill: false,
borderColor: '#80D39B',
tension: 0.4
};
var speedData = {
labels: time1,
datasets: [dataFirst, dataSecond]
};
//Impostiamo la grafica della legenda e le impostazioni degli assi
var chartOptions = {
responsive:true,
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 40,
fontColor: 'black'
}
},
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Giorno'
},
time: {
displayFormats: {
'day': 'DD'
},
tooltipFormat: 'DD/MM',
unit: 'day',
}
}]
,
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Temperatura'
},
ticks: {
beginAtZero: false,
stepSize: 1,
},
}]
},
title: {
display: true,
text: months[qmonth-1]
}
};
var lineChart = new Chart(speedCanvas, {
type: 'line',
data: speedData,
options: chartOptions,
});
}, 150);
}
</script>
</body>
</html>
La pagina può essere invocata mediante il link:
Il file php che permette di estrarre i dati dal database può essere scaricato da dataTempMonth.php.tar