Submit your widget

Cool Bubble Chart With jQuery and Canvas

Created 4 years ago   Views 11231   downloads 1939    Author n/a
Cool Bubble Chart With jQuery and Canvas
View DemoDownload 5.7 KB
33
Share |

This is a super tiny yet customizable jQuery plugin used to present your numeric data in a Canvas liquid bubble chart with a water fill animation. Useful for preloader, loading indicator, progress bar.

How to use it:

1. Load jQuery library and the jQuery Water Bubble Chart plugin at the end of your document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="waterbubble.js"></script>

2. Create an Canvas element for the liquid bubble chart.

<canvas id="demo"></canvas>

3. Draw a default liquid bubble chart on the Canvas element.

$('#demo').waterbubble();

4. Customization options.

$('#demo').waterbubble({

  // bubble size
  radius: 100,

  // border width
  lineWidth: undefined,

  // data to present
  data: 0.5,

  // color of the water bubble
  waterColor: 'rgba(25, 139, 201, 1)',

  // text color
  textColor: 'rgba(06, 85, 128, 0.8)',

  // custom font family
  font: '',

  // show wave
  wave: true,

  // custom text displayed inside the water bubble
  txt: undefined,

  // enable water fill animation
  animation: true
  
});

Read more:http://www.jqueryscript.net/chart-graph/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas.html

Tag: chart