Create Animated Bar Graph Chart in Jquery

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.

Explanation:

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

<!DOCTYPE html>

<html>
<head>

    <link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="examples.min.css" />
    
 
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
   
</head>
<body>
    
<input type="hidden" name="item1" id="item1" value="17">
<input type="hidden" name="item2" id="item2" value="25">
<input type="hidden" name="item3" id="item3" value="67">
<input type="hidden" name="item4" id="item4" value="49">

<input type="hidden" name="label1" id="label1" value="Label 1">
<input type="hidden" name="label2" id="label2" value="Label 2">
<input type="hidden" name="label3" id="label3" value="Label 3">
<input type="hidden" name="label4" id="label4" 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>

        
</body>


</html>

 

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 animated bar graph. All credit goes to JqPlot, an open source project.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments