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
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="//"></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.


4. Customization options.


  // 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:

Tag: chart