JavaScript – Grafico a Barre con dati JSON

In questo articolo vi farò vedere come ho creato un grafico a barre. Questo grafico pesca i dati da un file JSON.

Qui la demo:

Ho inserito un file JSON da cui vengono pescati i dati, poi ho creato un loop da quei dati per creare una colonna per ogni mese.

Ogni colonna ha l’altezza variabile a seconda del dato di riferimento.

Successivamente ho creato dei div in posizione assoluta e spostati a seconda della variabile del loop.

<div id="andamento" class="container"></div>
	
	
<script type="text/javascript">
	var mese = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];

	// Dati JSON

	var json = '{"mesi":['+'{"documenti":35,"importo":45131},'+'{"documenti":50,"importo":14295},'+'{"documenti":34,"importo":37705},'+'{"documenti":7,"importo":27198},'+'{"documenti":1,"importo":30912},'+'{"documenti":34,"importo":4805},'+'{"documenti":39,"importo":43334},'+'{"documenti":44,"importo":19650},'+'{"documenti":34,"importo":5494},'+'{"documenti":32,"importo":3958},'+'{"documenti":45,"importo":37508},'+'{"documenti":48,"importo":5844}]}';
	
	var obj = JSON.parse(json);

	i = 0;

	var text = "";

	var heightBar = 1;

	// Grafico a barre

	
	// loop per inserimento dei dati
	while (mese[i]){
		//Calcola la larghezza
		heightBar = parseInt(heightBar) * parseInt(obj.mesi[i].importo) / 100

		//Inserisci i dati
		text += '<div><div>' + mese[i] + '</div><div class="skills html" style="height: ' + heightBar + 'px"><p>'+ obj.mesi[i].documenti +' doc.</br></p><p>'+ obj.mesi[i].importo +' &euro;</p></div></div></div>';

		heightBar = 1;
		i++;
	};

	
	document.getElementById("andamento").innerHTML = text;

	document.getElementById("andamento").innerHTML = text;

	

</script>

body {font-family: 'Inter', sans-serif;}

p {
    display: block;
    margin:0;
    font-size: 12px;
}

#importo{position: absolute; width: 100px; top: 445px; left: '+21*5*i+'px; padding-left:20px; font-size:12px; color:#fff;}

#andamento{
	display: flex;
    align-items: flex-end;
    text-align: center;
}

.skills{
	padding-top: 20px;
    width: 100px;
    background-color: #a4c8ec;
    display: block;
    margin-right: 1px;

}