Create Animated Bar Graph Chart in Jquery

Abhigyan Singh 09th Sep 2020

This tutorial will explain about creating an animated bar graph in jquery. The bar graph is very important in web development to explain the data in graphical representation.

This animated bar graph is created using a query. Here user can fetch the data through the database and pass that data into the javascript. So that data will display in graphical bar representation.

In this tutorial, I am using jqPlot. jqPlot is an open-source project by Chris Leonello. Read more about jqPlot. jqPlot offers different types of plotting and charting plugin for the jQuery Javascript framework. jqPlot also provides various beautiful line, bar, and pie charts with many features in web development.

Explanation:

In this example, we are calling a javascript file on page load. On that javascript function, we are passing value for creating a bar graph.

<script class="include" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="item1" name="item1" type="hidden" value="17" />
<input id="item2" name="item2" type="hidden" value="25" />
<input id="item3" name="item3" type="hidden" value="67" />
<input id="item4" name="item4" type="hidden" value="49" />

<input id="label1" name="label1" type="hidden" value="Label 1" />
<input id="label2" name="label2" type="hidden" value="Label 2" />
<input id="label3" name="label3" type="hidden" value="Label 3" />
<input id="label4" name="label4" type="hidden" value="Label 4" />
<div id="chart1" style="margin-top: 20px; margin-left: 20px; width: 400px; height: 300px;"></div>
<script class="code" type="text/javascript">$(document).ready(function(){

var itemVal1 = parseInt(document.getElementById("item1").value);
var itemVal2 = parseInt(document.getElementById("item2").value);
var itemVal3 = parseInt(document.getElementById("item3").value);
var itemVal4 = parseInt(document.getElementById("item4").value);

var label1 = document.getElementById("label1").value;
var label2 = document.getElementById("label2").value;
var label3 = document.getElementById("label3").value;
var label4 = document.getElementById("label4").value;

$.jqplot.config.enablePlugins = true;
var s1 = [itemVal1, itemVal2, itemVal3, itemVal4];
var ticks = [label1, label2, label3, label4];

plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {min:0,max:100}
},
highlighter: { show: false }
});

$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});</script>

<script class="include" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="jqplot.pointLabels.min.js"></script>

These are the Input field. here we are getting the value and label. According to this value, we are passing the value and generate the graph

var itemVal1 = parseInt(document.getElementById("item1").value);
var itemVal2 = parseInt(document.getElementById("item2").value);
var itemVal3 = parseInt(document.getElementById("item3").value);
var itemVal4 = parseInt(document.getElementById("item4").value);

var label1 = document.getElementById("label1").value;
var label2 = document.getElementById("label2").value;
var label3 = document.getElementById("label3").value;
var label4 = document.getElementById("label4").value;

That's all about the animated bar graph. All credit goes to JqPlot, an open-source project.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk