jQuery Plugin to Create Animated Bar Chart

An awesome jQuery plugin to create animated bar chart based on SVG and D3.js library. The plugin offers to create responsive, cross browser and attractive bar charts.

Plugin Overview

Plugin: Animated bar chart
Author: NiDev
Licence: MIT Licence
Published: March 30, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.3.1 or Latest version and D3.js

File Type: zip archive (HTML, CSS, JavaScript, Images & MD File)
Package Size: 146 KB

How to Use Animated Bar Chart:

1. To getting started with jquery animated bar chart, first of all, load the jQuery (JavaScript library) and D3 Js into HTML document.

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

2. After that, include the animated bar chart’s CSS and JavaScript files into your page.

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

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

3. Now, create a div element in which you want to load / build chart.

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

4. Then, create data for chart in JavaScript’s objects like below and store them in an array.

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 },
...
]

5. Now its time to initialize the plugin in jQuery document ready function / anonymous function.

 $(function() {
     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 },
...
]
      $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data });
   });

Advance Configuration Options for Animated Bar Chart

The following are some advance configuration options to create / customize animated bar chart.

chart_height

Define the height of the chart in pixels. Default: 400, type: number

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   chart_height: 300
});
colors

This option define the colors for bars of the chart. 10+ colors are predefined in CSS that are used for different groups. You can override this setting by defining your own colors. Default: null, type: array.

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   colors: ['red', 'blue', 'lime', ...] or ['#f44242', '#0048ff', '#04ff00', ...]
});
show_legend

Show / hide Chart legend that automatically generated below chart with your group_name values. Default: true, type: bool

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   show_legend: false
});
x_grid_lines

Show / hide horizontal grid lines. Default: true, type: bool

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   x_grid_lines: false
});
y_grid_lines

Show / hide vertical grid lines. Default: true, type: bool

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   y_grid_lines: false
});
tweenDuration

Speed of bar animation in milliseconds. Default: 300, type: int

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   tweenDuration: 500
});
bars

This is an object option that contains properties for bars.

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   bars: {
      padding: 0.075, //efault bar group padding - type: number
      opacity: 0.7, //default bar opacity - type: number
      opacity_hover: 0.45, //default bar opacity on mouse hover - type: number
      disable_hover: false, //disable details on mouse hover - type: bool
      hover_name_text: 'name', //text for x axis value in details - type: string
      hover_value_text: 'value' //text for y axis value in details - type: string
   }
});
number_format

This is an object option that contains properties for numbers.

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   number_format: {
      format: ',.2f', // default chart number format - type: string 
      decimal: '.', // default symbol for the decimal separator - type: number
      thousands: ',', // default symbol for the thousands separator - type: number 
      grouping: [3], // default character grouping - type: object 
      currency: ['$'] // default currency symbol - type: object 
   }
});
margin

This is an object option that contains properties for chart margin.

$('#chtAnimatedBarChart').animatedBarChart({
   data: chart_data,
   margin: {
      top: 0, // default chart top margin - type: number 
      right: 35, // default chart right margin - type: number 
      bottom: 30, // default chart bottom margin - type: number 
      left: 70 // default chart left margin - type: number 
   }
});