How to create a graph using HTML, CSS, and JavaScript? See this HTML CSS JavaScript Graph program.

I am sure you know what is a graph. Graphs are mostly used in any presentation, data collection, etc. On websites, graphs are mostly used in the backend, for showing user behavior to admin. If you use google analytics then you surely know what web graphs actually is.

Graphs are very helpful in showing information in the right way. We can understand better an image or infographic compared to text. For creating graphs there are too many options, even a separate JavaScript framework called chart.js is developed for creating the chart.

Today we will create a chart using HTML, CSS, and JQuery which is a javascript library. Basically, Today I am sharing JavaScript Graph program. This is a column graph which is very easy to understand. If you are a beginner you can also understand and recreate it very easily.

As you know this is a basic Animated Column Graph, but this is stylish also. You can use it anywhere as you want. I had put the value directly, but you can use it dynamically using PHP. Let’s take a look at this program.

Preview Of Animated Column Graph

See this video preview for know how this program actually is or looks.

Now you can see this program visually. If you like this, then there is the source code for you.

You May Also Like:

HTML CSS JavaScript Graph Source Code

Before sharing source code I want to say little bit about this program. HTML CSS JavaScript Graph, you understand what languages I used completely when you saw the name. I used HTML, CSS, and JQuery ( this is a javascript library ) for creating this program. I had put % value using jQuery data-percentage property. & used animation delay y 1 second.

For creating this program, You have to create 3 files. One for HTML, one for CSS, and one for JavaScript. Follow the steps to create this program without any trouble.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

index.html <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Animated Column Chart | webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="chart"> <ul id="numbers"> <li><span>100%</span></li> <li><span>90%</span></li> <li><span>80%</span></li> <li><span>70%</span></li> <li><span>60%</span></li> <li><span>50%</span></li> <li><span>40%</span></li> <li><span>30%</span></li> <li><span>20%</span></li> <li><span>10%</span></li> <li><span>0%</span></li> </ul> <ul id="bars"> <li><div data-percentage="76" class="bar"></div><span>HTML</span></li> <li><div data-percentage="33" class="bar"></div><span>CSS</span></li> <li><div data-percentage="54" class="bar"></div><span>JavaScript</span></li> <li><div data-percentage="44" class="bar"></div><span>PHP</span></li> <li><div data-percentage="94" class="bar"></div><span>Bootstrap</span></li> <li><div data-percentage="23" class="bar"></div><span>jQuery</span> </li> </ul> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"</script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset = "UTF-8" > <title> Animated Column Chart | webdevtrick.com </title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" > <link rel = "stylesheet" href = "style.css" > </head> <body> <div id = "chart" > <ul id = "numbers" > <li> <span> 100% </span> </li> <li> <span> 90% </span> </li> <li> <span> 80% </span> </li> <li> <span> 70% </span> </li> <li> <span> 60% </span> </li> <li> <span> 50% </span> </li> <li> <span> 40% </span> </li> <li> <span> 30% </span> </li> <li> <span> 20% </span> </li> <li> <span> 10% </span> </li> <li> <span> 0% </span> </li> </ul> <ul id = "bars" > <li> <div data-percentage = "76" class = "bar" > </div> <span> HTML </span> </li> <li> <div data-percentage = "33" class = "bar" > </div> <span> CSS </span> </li> <li> <div data-percentage = "54" class = "bar" > </div> <span> JavaScript </span> </li> <li> <div data-percentage = "44" class = "bar" > </div> <span> PHP </span> </li> <li> <div data-percentage = "94" class = "bar" > </div> <span> Bootstrap </span> </li> <li> <div data-percentage = "23" class = "bar" > </div> <span> jQuery </span> </li> </ul> </div> <script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' > </script> <script src = "function.js" </script> </body> </html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

style.css /* code by webdevtrick ( https://webdevtrick.com ) */ body { margin-top: 15%; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype'); } body { background: #30303A; font-family: Roboto; } #chart { width: 650px; height: 300px; margin: 30px auto 0; display: block; } #chart #numbers { width: 50px; height: 100%; margin: 0; padding: 0; display: inline-block; float: left; } #chart #numbers li { text-align: right; padding-right: 1em; list-style: none; height: 29px; border-bottom: 1px solid #444; position: relative; bottom: 30px; } #chart #numbers li:last-child { height: 30px; } #chart #numbers li span { color: #eee; position: absolute; bottom: 0; right: 10px; } #chart #bars { display: inline-block; background: rgba(0, 0, 0, 0.2); width: 600px; height: 300px; padding: 0; margin: 0; box-shadow: 0 0 0 1px #444; } #chart #bars li { display: table-cell; width: 100px; height: 300px; margin: 0; text-align: center; position: relative; } #chart #bars li .bar { display: block; width: 70px; margin-left: 15px; background: #FD4447; position: absolute; bottom: 0; } #chart #bars li .bar:hover { background: #5AE; cursor: pointer; } #chart #bars li .bar:hover:before { color: white; content: attr(data-percentage) '%'; position: relative; bottom: 20px; } #chart #bars li span { color: #eee; width: 100%; position: absolute; bottom: -2em; left: 0; text-align: center; } /* code by webdevtrick ( https://webdevtrick.com ) */ body { margin-top: 15%; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype'); } body { background: #30303A; font-family: Roboto; } #chart { width: 650px; height: 300px; margin: 30px auto 0; display: block; } #chart #numbers { width: 50px; height: 100%; margin: 0; padding: 0; display: inline-block; float: left; } #chart #numbers li { text-align: right; padding-right: 1em; list-style: none; height: 29px; border-bottom: 1px solid #444; position: relative; bottom: 30px; } #chart #numbers li:last-child { height: 30px; } #chart #numbers li span { color: #eee; position: absolute; bottom: 0; right: 10px; } #chart #bars { display: inline-block; background: rgba(0, 0, 0, 0.2); width: 600px; height: 300px; padding: 0; margin: 0; box-shadow: 0 0 0 1px #444; } #chart #bars li { display: table-cell; width: 100px; height: 300px; margin: 0; text-align: center; position: relative; } #chart #bars li .bar { display: block; width: 70px; margin-left: 15px; background: #FD4447; position: absolute; bottom: 0; } #chart #bars li .bar:hover { background: #5AE; cursor: pointer; } #chart #bars li .bar:hover:before { color: white; content: attr(data-percentage) '%'; position: relative; bottom: 20px; } #chart #bars li span { color: #eee; width: 100%; position: absolute; bottom: -2em; left: 0; text-align: center; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 /* code by webdevtrick ( https://webdevtrick.com ) */ body { margin-top : 15% ; } @font-face { font-family : 'Roboto' ; font-style : normal ; font-weight : 400 ; src : local ( 'Roboto' ) , local ( 'Roboto-Regular' ) , url ( https : //fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxP.ttf ) format ( 'truetype' ) ; } body { background : #30303A ; font-family : Roboto ; } #chart { width : 650px ; height : 300px ; margin : 30px auto 0 ; display : block ; } #chart #numbers { width : 50px ; height : 100% ; margin : 0 ; padding : 0 ; display : inline-block ; float : left ; } #chart #numbers li { text-align : right ; padding-right : 1em ; list-style : none ; height : 29px ; border-bottom : 1px solid #444 ; position : relative ; bottom : 30px ; } #chart #numbers li:last-child { height : 30px ; } #chart #numbers li span { color : #eee ; position : absolute ; bottom : 0 ; right : 10px ; } #chart #bars { display : inline-block ; background : rgba ( 0, 0, 0, 0.2 ) ; width : 600px ; height : 300px ; padding : 0 ; margin : 0 ; box-shadow : 0 0 0 1px #444 ; } #chart #bars li { display : table-cell ; width : 100px ; height : 300px ; margin : 0 ; text-align : center ; position : relative ; } #chart #bars li .bar { display : block ; width : 70px ; margin-left : 15px ; background : #FD4447 ; position : absolute ; bottom : 0 ; } #chart #bars li .bar:hover { background : #5AE ; cursor : pointer ; } #chart #bars li .bar:hover:before { color : white ; content : attr ( data-percentage ) '%' ; position : relative ; bottom : 20px ; } #chart #bars li span { color : #eee ; width : 100% ; position : absolute ; bottom : -2em ; left : 0 ; text-align : center ; } /* code by webdevtrick ( https://webdevtrick.com ) */ body { margin-top : 15% ; } @font-face { font-family : 'Roboto' ; font-style : normal ; font-weight : 400 ; src : local ( 'Roboto' ) , local ( 'Roboto-Regular' ) , url ( https : //fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxP.ttf ) format ( 'truetype' ) ; } body { background : #30303A ; font-family : Roboto ; } #chart { width : 650px ; height : 300px ; margin : 30px auto 0 ; display : block ; } #chart #numbers { width : 50px ; height : 100% ; margin : 0 ; padding : 0 ; display : inline-block ; float : left ; } #chart #numbers li { text-align : right ; padding-right : 1em ; list-style : none ; height : 29px ; border-bottom : 1px solid #444 ; position : relative ; bottom : 30px ; } #chart #numbers li:last-child { height : 30px ; } #chart #numbers li span { color : #eee ; position : absolute ; bottom : 0 ; right : 10px ; } #chart #bars { display : inline-block ; background : rgba ( 0, 0, 0, 0.2 ) ; width : 600px ; height : 300px ; padding : 0 ; margin : 0 ; box-shadow : 0 0 0 1px #444 ; } #chart #bars li { display : table-cell ; width : 100px ; height : 300px ; margin : 0 ; text-align : center ; position : relative ; } #chart #bars li .bar { display : block ; width : 70px ; margin-left : 15px ; background : #FD4447 ; position : absolute ; bottom : 0 ; } #chart #bars li .bar:hover { background : #5AE ; cursor : pointer ; } #chart #bars li .bar:hover:before { color : white ; content : attr ( data-percentage ) '%' ; position : relative ; bottom : 20px ; } #chart #bars li span { color : #eee ; width : 100% ; position : absolute ; bottom : -2em ; left : 0 ; text-align : center ; }

function.js

The final thing, Create a Javascript file named ‘function.js‘ & put the codes given here.

function.js /* code by webdevtrick ( https://webdevtrick.com ) */ $(function() { $("#bars li .bar").each( function( key, bar ) { var percentage = $(this).data('percentage'); $(this).animate({ 'height' : percentage + '%' }, 1000); }); }); 1 2 3 4 5 6 7 8 9 10 /* code by webdevtrick ( https://webdevtrick.com ) */ $ ( function ( ) { $ ( "#bars li .bar" ) . each ( function ( key , bar ) { var percentage = $ ( this ) . data ( 'percentage' ) ; $ ( this ) . animate ( { 'height' : percentage + '%' } , 1000 ) ; } ) ; } ) ;

That’s It. Now have successfully created HTML CSS JavaScript Graph program or Animated Column Graph. If you have any doubt or question comment down below.

Thanks For Visting, Keep Visiting.