11/09/2020    By: christoper unum
Bar charts can come in handy especially when you are trying to represent information on your website graphically. In this tutorial, we will be creating a bar chart that displays the names of students and their overall exam scores using HTML, CSS, and JavaScript as shown above.
Basic knowledge of HTML, CSS and JavaScript is required to fully grasp the concepts in this tutorial.
To begin, we have to create the container we will rendering the bars to using HTML as shown below
<div id="chart-out"><div id="chart-in"></div></div>
css
Now we apply styles to the HTML code
body {font-family: "Fira Sans", sans-serif;}#chart-out{max-width:500px;padding:15px 0;margin: 0 auto;}#chart-in{width:95%;margin:0 auto;padding-top:5px;border-left:1px solid green;border-bottom:1px solid green;}.bar-out{height:30px;margin:5px 0;position:relative;text-align:center;}.bar-in{height:100%;background:#1493B2;width:100%;}.info{z-index:10;position:absolute;border:none;height:20px;font-size:13px;margin-top:5px;border-radius:3px;background:#C3301E;color:#f4f4f4;font-weight: bold;}.info:focus{outline: none;}
Below is the JavaScript code that takes the arrays of the students and their grades and converts it into bars
//student namesconst students = ["James", "Ruth", "John", "Rose", "Jerry", "Chris", "Mathew","Mark","Mary", "Linda"];//grades of studentsconst marks = [78, 53, 89, 83, 93, 99, 32, 65, 73, 41];//grades of students for sortingconst marks2 = [78, 53, 89, 83, 93, 99, 32, 65, 73, 41];//gets the highest markconst highestMark = (marksArray) => {//return marksArray.sort()[marksArray.length-1];let marksArray2 = marksArray;marksArray2.sort((a, b) => {return a-b});return marksArray[marksArray.length-1];};//stores the highest mark in a variablelet highest = highestMark(marks2);//gets the percentage of the marks with respect to the highest markconst getBarPercentage = (mark, highest) => {return (mark*100)/highest;};//adds bars to the div elementconst addBar = (name, value, percent) => {let infoButton = document.createElement('button');let infoText = document.createTextNode(`${name} : ${value}`);infoButton.classList.add("info");infoButton.appendChild(infoText);let barIn = document.createElement("div");barIn.classList.add("bar-in");barIn.style.width = `${percent}%`;let barOut = document.createElement("div");barOut.classList.add("bar-out");barOut.appendChild(infoButton);barOut.appendChild(barIn);document.getElementById("chart-in").appendChild(barOut);};//displays all the barsconst displayBars = (students,marks,highest) => {for(let i=0; i<students.length; i++){addBar(students[i], marks[i], getBarPercentage(marks[i], highest));}};displayBars(students, marks, highest);
Thats our bar chat, you can add you tweaks and make your own version of it.
![]() |
how to add on scroll animations to your website using animate.css and wow.js By christoper unum |
![]() |
how to create a login form using html, css, javascript, php and ajax By christoper unum |
![]() |
how to create a registration page using ajax and php By christoper unum |
Copyright © 2022 Naishare Technology - All rights reserved