Interactive Bar/Column Chart Plugin With jQuery And D3.js

An animated, interactive, dynamic, configurable, fully responsive bar/column chart plugin built using jQuery and D3.js.

More features:

• Dynamic data rendering.
• Shows/hides legends.
• Shows/hides grid lines.
• Custom number format.
• Filterable data.
• Shows details on hover.
• Smooth transitions.

How to use it:

1. Include the latest version of jQuery and D3 libraries on the page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/d3.min.js"></script>

2. Include the jQuery Animated Bar Chart plugin files from the dist folder.

<link rel="stylesheet" href="/dist/bar.chart.min.css" />
<script src="/dist/jquery.bar.chart.min.js"></script>

3. Create a container in which the chart will be rendered.

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

4. Define your chart data in an array of JS objects as follows:

const myData = [
      { "group_name": "Google", "name": "Jan", "value": 38367 },
      { "group_name": "Apple", "name": "Jan", "value": 28827 },
      { "group_name": "Microsoft", "name": "Jan", "value": 38674 },
      { "group_name": "Samsung", "name": "Jan", "value": 40110 }
]

5. Initialize the plugin to generate a default bar/column chart.

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

6. Customize the columns from the data array for rendering the chart.

$('#chtAnimatedBarChart').animatedBarChart({ 
  data: myData,
  params: {
    group_name: 'group_name', // title for group name to be shown in legend
    name: 'name', // name for xaxis
    value: 'value' // value for yaxis
   }
});

7. Customize the appearance of the chart.

$('#chtAnimatedBarChart').animatedBarChart({ 
  data: myData,
  // default chart height in px
  chart_height: 400, 
  // colors for chart
  colors: null, 
  // show chart legend
  show_legend: true, 
  // show x grid lines
  x_grid_lines: true, 
  // show y grid lines
  y_grid_lines: true, 
  // speed for tranistions
  tweenDuration: 300, 
  // default bar settings
  bars: { 
    padding: 0.075, // padding between bars
    opacity: 0.7, // default bar opacity
    opacity_hover: 0.45, // default bar opacity on mouse hover
    disable_hover: false, // disable animation and legend on hover
    hover_name_text: 'name', // text for name column for label displayed on bar hover
    hover_value_text: 'value', // text for value column for label displayed on bar hover
  },
  // margins for chart rendering
  margin: { 
    top: 0, // top margin
    right: 35, // right margin
    bottom: 20, // bottom margin
    left: 70 // left margin
  },
  // rotate xaxis label params
  rotate_x_axis_labels: { 
    process: true, // process xaxis label rotation
    minimun_resolution: 720, // minimun_resolution for label rotating
    bottom_margin: 15, // bottom margin for label rotation
    rotating_angle: 90, // angle for rotation,
    x_position: 9, // label x position after rotation
    y_position: -3 // label y position after rotation
  }
  
});

8. Customize the number format.

$('#chtAnimatedBarChart').animatedBarChart({ 
  data: myData,
  number_format: {
    format: ',.2f', // default number format
    decimal: '.', // decimal symbol
    thousands : ',', // thousand separator symbol
    grouping: [3], // thousand separator grouping
    currency: ['$'] // currency symbol
   }
});

9. Update the chart with new data.

instance.updateChart({ 
  data: new_chart_data 
});

This awesome jQuery plugin is developed by vnidev. For more Advanced Usages, please check the demo page or visit the official website.