jQuery 3D Water Tank-Style Bar Chart Plugin
waterTank
This is a jQuery 3D transparent water tank-style bar chart plugin. It uses HTML5 canvas to create 3D water tank-style bar charts. Clicking a bar dynamically changes the water column height. You can also customize the water column width, height, color, initial value, and other properties.
Usage
Include the jquery and waterTank.js files in your page.
1 2 | <script src="path/to/jquery.min.js"></script><script src="path/to/waterTank.js"></script> |
HTML Structure
Use a <div> element as the container for the bar chart.
1 2 3 | <div class="example"> </div> |
Initialize the Plugin
After the page DOM elements have finished loading, initialize this jQuery 3D transparent water tank-style bar chart plugin using the waterTank() method.
1 2 3 4 | $('.example').waterTank({ width: 200, height: 400}) |
You can use the color parameter to specify the color of the bar chart.
1 2 3 4 5 | $('.example').waterTank({ width: 200, height: 400, color: 'skyblue'}) |
You can use the level parameter to specify the initial value of the bar chart.
1 2 3 4 5 6 | $('.example').waterTank({ width: 200, height: 400, color: 'skyblue', level: 80}) |
To dynamically change the height of the bar chart, you can use the following method.
1 | $('.example').waterTank(50); |