
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.
- Publication date: 31.03.2019
- Source