Home Web Development JavaScript HTML CSS JavaScript Graph | Animated Column Graph

HTML CSS JavaScript Graph | Animated Column Graph

May 6, 2019

6557

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.

https://webdevtrick.com/wp-content/uploads/html-css-javascript-column-graph.mp4?_=1

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

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.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Animated Column Chart | webdevtrick.com</title>

</head>

<body>

</ul>

<li><div data-percentage="54" class="bar"></div><span>JavaScript</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>

</body>

</html>

style.css

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

/* 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;
}

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.

/* code by webdevtrick ( https://webdevtrick.com ) */
$(function() {
  $("#bars li .bar").each( function( key, bar ) {
    var percentage = $(this).data('percentage');
    
    $(this).animate({
      'height' : percentage + '%'
    }, 1000);
  });
});

/* 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.