ChartJS bar chart with JSON data API using JavaScript

Today in this blog you’ll learn how to create ChartJS bar chart with JSON data API using JavaScript. We used HTML CSS and JavaScript library Chart JS.

ChartJS bar chart with JSON data API using JavaScript [Source Codes]

This source code can help you to create ChartJS bar chart with JSON data API using JavaScript
Plug-In source

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<h1>ChartJS Bar Chart with JSON Data API</h1>
	<canvas id="canvas"></canvas>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
	color: #000;
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 100vh;
}

.container{
	width: 70%;
}
h1{
	font-size: 46px;
	text-align: center;
}
#canvas{
	width: 100%;
}

JavaScript Code

Copy

var xmlhttp = new XMLHttpRequest();
var url = "http://localhost/bar-chart/js/jsonData.json";
xmlhttp.open("GET",url,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        var data = JSON.parse(this.responseText);
        //console.log(data)
        date = data.date_population.map(function(elem){
            return elem.date;
        })
        population = data.date_population.map(function(elem){
            return elem.population;
        })
        //console.log(population)

        const ctx = document.getElementById('canvas').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: date,
                datasets: [{
                    label: 'Population',
                    data: population,
                    backgroundColor: "#ff335e"
                    
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

}

//This is JsonData.json
//{"date_population": [
// 		{
// 		  "date": "1941",
// 		  "population": 406760
// 		},{
// 		  "date": "1951",
// 		  "population": 778977
// 		},{
// 		  "date": "1961",
// 		  "population": 1207000
// 		}
// 	]
// }