It is noteworthy that this plugin is a replica of the D3 Liquid Fill Gauge plugin in the D3 gallery. You can find information of how it works in this link : http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6
After downloading the plugin (you can find download links at the bottom of this post), import it into your application and add a new item to any region of choice and set its type to “APEX D3 Liquid Gauge“.
After you create the item, you are confronted to set some settings. I will explain the settings below :
Define the type of source used for the value shown on the gauge. Options include “From Input” and “From Query”.
You see this option when you set Type to “From Input”. You can enter a number to be shown on the gauge.
Percent (SQL Query)
You see this option when you set Type to “From Query”. You can enter a SQL query that returns a single value.
Set the height of the gauges. The value is based on pixels, therefore an integer will suffice.
Choose from 3 preset themes. Theme 3 is the default theme. Setting the colours will override any colours in the themes.
Set the colour of the circle. Using the color picker simplifies the process of choosing a colour.
Set the colour of the text. Using the color picker simplifies the process of choosing a colour.
Wave Text Colour
Set the colour of the wave text inside the gauge. Using the color picker simplifies the process of choosing a colour.
Set the colour of the wave. Using the color picker simplifies the process of choosing a colour.
Note that this plugin is a dynamic plugin reacts to the click event. To use this functionality all that you need to due is specify a SQL query that returns a single value in the List of Values property of the plugin. Clicking on the item will fetch new data from the query you define and update the plugin using AJAX.
I guess that’s all there is to it. To view a live working example of the plugin click on the link below :
To download the plugin visit my GitHub repository :
5,781 total views, 7 views today