jQuery Plugin to Create Animated Bar Chart

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

EXAMPLE

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

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.

EXAMPLE

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

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

EXAMPLE

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

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

EXAMPLE

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

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

EXAMPLE

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

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

EXAMPLE

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

This is an object option that contains properties for bars.

EXAMPLE

$('#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
   }
});

This is an object option that contains properties for numbers.

EXAMPLE

$('#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 
   }
});

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

EXAMPLE

$('#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 
   }
});