jQuery plugin for rendering animated bar charts

1. Introduction

animated-bar-chart is a very light and simple to use jQuery plugin for rendering animated bar charts using jQuery and D3.js library. Without huge knowledge about the D3 library, you can create awesome charts with a nice animation. The plugin comes with many customization options and has all the features written down in the available documentation.

2. Plugin Overview

Demo

3. How to install and use animated-bar-chart jQuery plugin

Follow the below steps to install animated-bar-chart jQuery plugin on your website.

3.1. Include D3.js, jQuery and bar chart libraries:

<!-- jQuery -->
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

<!-- D3 Js -->
<script src='https://d3js.org/d3.v4.min.js'></script>

<!-- Chart CSS -->
<link rel="stylesheet" href="dist/bar.chart.min.css" />

<!-- Chart Js -->
<script src="dist/jquery.bar.chart.min.js"></script>

3.2. Add div container to your body tag:

<div id="chtAnimatedBarChart" class="bcBar"></div>

3.3. Prepare data for the chart:

var chart_data = [
{ "group_name": "Google", "name": "Jan", "value": 26037 },
{ "group_name": "Google", "name": "Feb", "value": 8597 },
{ "group_name": "Apple", "name": "Jan", "value": 33102 },
{ "group_name": "Apple", "name": "Feb", "value": 43426 },
...
]

3.4. Initialize the plugin in jQuery document ready function:

$(function() {
    $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data });
});

After initialization, the plugin will automatically generate animated charts with given data.

4. Conclusion

In this article, we presented jquery-social-share-bar jQuery plugin designed for creating animated bar charts easily without huge knowledge about the D3 library. The plugin can be used to create an awesome chart for your website that will be appreciated by the users.