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: January 18, 2024
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 
   }
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...