Chartjs parte prima- ricavare i 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.
I dati illustrati nel grafico di esempio sono stati prelevati da un database mediante una pagina php.
La prima cosa da effettuare è l’inclusione della libreria nella pagina mediante il codice:
<script type="text/javascript" src="js/Chart.min.js"></script>
Nella nostra versione occorre importare anche jquery.min.j e moment.js.
Tutte queste librerie possono essere copiate nelle directory del sito, come nel nostro caso, oppure possono essere linkate direttamente dal sito.
Maggiori informazioni sull’installazione della libreria si trovano in questo link.
Di seguito raccogliamo il nostro grafico in un canvas per renderlo più responsive.
<canvas id="graphCanvas"></canvas>
Al caricamento della pagina viene chiamata la funzione showGraph() che provvedere a richiamare i dati dal Db e a visualizzarli.
In particolare l’istruzione
$.post("dataTempMonth.php",{month: Number(qmonth), year: Number(qyear)},
function (data)
Provvede ad invocare la pagina dataTempMonth.php che invoca il data base in cui si trovano i dati, passando come parametro il mese e l’anno. Le temperature di quel periodo verranno caricate nella struttura data.
Di seguito vengono definite le caratteristiche geenrali del grafico.
In particolare tutto ciò che riguarda i colori e il tipo di linea viene definito nella sezione datasets per poi assegnare i dati con l’istruzione: data: temp.
Nella sezione successiva nel creare l’oggetto Chart viene definito il tipo di grafico. Nel nostro caso si tratterà di line.
var barGraph = new Chart(graphTarget, { type: 'line',........
Infine le sezioni xAxes e yAxes definiscono le caratteristiche dei due assi.
Di seguito il codice completo
<!DOCTYPE html>
<html>
<head>
<title>example</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>
<canvas id="graphCanvas"></canvas>
<script>
//leggo la query string estraendo mese ed anno
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
var qmonth;
var qyear;
$(document).ready(function () {
qyear = urlParams.get('year');
qmonth=urlParams.get('month');
showGraph();
});
function showGraph()
{
{
//Viene effettuata la chiamata alla pagina php che restituisce i dati, passando mese e anno estratti dalla quey string
$.post("dataTempMonth.php",{month: Number(qmonth), year: Number(qyear)},
function (data)
{
var time = [];
var temp = [];
var day=0;
var months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
//Vengono estratte le date e le temperature dall'oggetto data e vengono inserite nei due array time e temp
for (var i in data) {
d = new Date(data[i].Time);
day=d.getDate();
time.push(data[i].Time);
temp.push(data[i].Temp);
}
//Definiamo la grafica della serie di dati
var chartdata = {
labels: time,
datasets: [
{
label: 'Temperatura esterna',
backgroundColor: '#80D39B',
borderColor: '#4C0827',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: temp,
borderWidth: 2,
fill:false
}]
};
//viene individuato il grafico
var graphTarget = $("#graphCanvas");
var barGraph = new Chart(graphTarget, {
type: 'line',
data: chartdata,
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
time: {
displayFormats: {
'day': 'DD/MM/YY'
},
tooltipFormat: 'DD/MM/YY',
unit: 'day',
}
}]
,
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Temperatura'
},
ticks: {
beginAtZero: false,
steps: 1,
stepValue: 2,
//min: -10,
//max: 40
}
}]
},
title: {
display: true,
text: months[qmonth-1]+" "+qyear,
}
}
});
});
}
}
</script>
</body>
</html>
La pagina può essere invocata mediante il link: http://ipdelserver/pathdellapplicazione/example.php?month=1&year=2021
Il file php che permette di estrarre i dati dal database può essere scaricato da dataTempMonth.php.tar
Nell’articolo successivo vedremo come confrontare due serie di dati entrambe estratte dal database.