jQuery plugin for rendering animated bar charts using jQuery and D3.js library.
My goal is to keep this plugin light and simple to use. I'm not planning to implement all of D3.js library features into it. There is a source in src folder, so feel free to experiment with code. You can find some examples with different settings in examples folder. For the complete list of options see Documentation section.
You need to include D3.js, jQuery and bar chart libraries. For D3 and jQuery, visit their web sites or include scripts in your head tag. Copy dist folder to your project and include:
<link rel="stylesheet" href="./dist/bar.chart.min.css" />
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src="./dist/jquery.bar.chart.min.js"></script>Add div container to your body tag:
<div id="chtAnimatedBarChart" class="bcBar"></div>You need to 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 },
...
]Then you need to initialize the chart:
$('#chtAnimatedBarChart').animatedBarChart({ data: chart_data });There is a few options that can be used to customize the look of the chart. Configuration of the chart can be done by passing the options you want to define into the animatedBarChart constructor as an object. For example:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
chart_height: 200,
show_legend: false,
...
});Default [].
Data that will be used for chart rendering. You need to have 3 properties in every object of data array:
Example:
{ "group_name": "Google", "name": "Jan", "value": 26037 },
{ "group_name": "Google", "name": "Feb", "value": 8597 },
...Properties:
You can customize which properties from your data will be rendered.
Usage: if your data is in format:
{ "company": "Google", "month": "Jan", "employees_no": 26037 },
{ "company": "Google", "month": "Feb", "employees_no": 8597 },
...You can set default options to:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
params: {
group_name: 'company',
name: 'month',
value: 'employees_no'
}
});Default value is 400. Height of the chart in pixels.
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
chart_height: 200
});Default value is null. There is already 10 predefined colors that will be used for different groups. You can override this setting by defining your own colors.
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
colors: ['red', 'blue', 'lime', ...] or ['#f44242', '#0048ff', '#04ff00', ...]
});Default value is true. Chart legend will be automatically generated below chart with your group_name values. You can hide legend by sending false through show legend option.
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
show_legend: false
});Default legend settings. Properties:
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
legend: {
position: LegendPosition.right,
width: 150
}
});Default value is true. Display horizontal grid lines. You can hide horizontal grid lines by sending false through this option.
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
x_grid_lines: false
});Default value is true. Display vertical grid lines. You can hide vertical grid lines by sending false through this option.
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
y_grid_lines: false
});Default value is 300. Speed of bar animation in milliseconds.
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
tweenDuration: 1000
});Default bar settings. Properties:
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
bars: {
padding: 0.1,
opacity: 0.5,
opacity_hover: 0.1,
disable_hover: true,
hover_name_text: 'month',
hover_value_text: 'employees no'
}
});Default format for numbers. Properties:
For more about formats, see D3.js documentation.
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
number_format: {
format: ',.4f',
decimal: ',',
thousands: '.',
grouping: [2],
currency: ['€']
}
});Default chart margins. Properties:
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
margin: {
top: 100,
right: 100,
bottom: 100,
left: 100
}
});With this setting, chart will automatically rotate x axis labels when screen resolution is less then minimun_resolution property.
Properties:
Usage:
$('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
rotate_x_axis_labels: {
process: false,
minimun_resolution: 500,
bottom_margin: 30,
rotating_angle: 45,
x_position: 10,
y_position: 0
}
});Default value is false. With this setting, you can change default vertical to horizontal orientation.
Usage:
var chart_data = getData();
chart = $('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
horizontal_bars: true
});You can update chart data by calling updateChart function. See filter_data_example.html from examples folder.
Usage: First, you need to initialize the chart:
var chart = $('#chtAnimatedBarChart').animatedBarChart({
data: chart_data,
...
});Then you need to call updateChart function with new data and options:
chart.updateChart({ data: new_chart_data });