Fork me on GitHub

Water Bubble Chart

Download

Documention

To implement the water bubble charts, the following files should always be included.

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="waterbubble.js" type="text/javascript"></script>

hmtl code

<canvas id="waterbubble"></canvas>

In JavaScript file, you can use the default settings like this:

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

And you will get the following chart

Or you can set following options by yourself.

$('#waterbubble').waterbubble({
    radius: 100,
    lineWidth: 5,
    data: 0.5,
    waterColor: 'rgba(25, 139, 201, 1)',
    textColor: 'rgba(06, 85, 128, 0.8)',
    txt: 'JavaScript',
    font: 'bold 30px "Microsoft Yahei"',
    wave: true,
    animation: false,
})

There are 9 optional parameters to be set with water-bubble-chart, none of which is mandatory.

  • radius: The radius of your waterbubble. Once set, there is no need to further set height or width on your canvas.
  • lineWidth: The thickness of your water bubble's shell. The value of it equals to radius/25, unless you specify it to other values.
  • textColor: The color of the text. You'd better set the value of alpha of textColor, because I think it should be more beautiful : ).
  • txt: The text content you'd like to display in the chart. There will be no text if you don't set it. If set as txt: '' then the chart will show the percentage data.
  • font: The style of text. Default size is 40% of radius.
  • wave: This indicates whether a wave shape should be shown in the chart, if set to be false, a plane is shown instead of the wave. The default value is true.
  • animation: Default value is true.

About Author