Animated Liquid Fill Gauge
References/Notes
- D3 Liquid Fill Gauge - GitHub project that this Gauge is based off
- Download - Link to download the widget file
Release Note:
- 27-Oct-2016 - Initial release
- 24-Feb-2017 - Fix issue where Gauge is getting cutoff at the bottom
- 29-Mar-2018 - Add the ability to show/hide Tooltip
Introduction
This article explains how to import a Animated Liquid Fill Gauge from D3 as a plugin in Sisense.
Purpose/Benefits
The Animated Liquid Fill Gauge is provides user with the ability to spice up their Dashboard with an animated way of displaying progress. The plugin will display a value and fill the gauge based on the percentage from the Max value.
How to Install and Configure the plugin
Step 1 - Add The Plugin
Download the attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. If the plugins folder doesn't exist, just create it. After those files have been unzipped there, you may also have to restart the web server. Now, when you create a new widget the Liquid Fill Gauge should show up in the list of options
Step 2 - Create The Gauge
On your dashboard, click the Create Widget button and select Advanced Configuration. Next, select the "Liquid Fill Gauge" plugin from the drop down list. For the Gauge you will need to specify the Value and the range (Min and Max values). For the below example, we are counting the number of Doctors and displaying a scale from 0 to 100. There plug-in also offer the following design option:
- Wave Rise - Control if the wave should rise from 0 to it's full height, or start at it's full height
- Wave Count Up - if true the displayed value counts up from 0 to it's final value upon loading. If false, the final value is displayed
- Wave Animate - Controls if the wave scrolls or is static
- Wave Count - The number of full waves per width of the wave circle (from 1 to 8)
- Show Tooltip - show/hide tooltip
Known Issues
- Download Gauge to image file is not supported
-
Hi Ronen,
I modified the liquidFillGauge.js file to set ShowToolTip : true and I am not seeing the tool tip.
Also, I want to dynamically change the color of the liquid based on a value (e.g. when we aren't at goal). I was trying to do that with JavaScript on the widget and couldn't quite get the attributes that need to be changed.
Thanks for the help!
Malinda
-
Very nice plugin!
Found 3 issues with it:
- The liquid gauge does not show in PDF Report Settings screen
- Error message when downloading as PDF (I was able to temporally fix it with a try catch in widget.js around "var gauge1 = loadLiquidFillGauge...")
- When you leave the "PDF Report Settings" screen all liquid gauge become pixelized on the dashboard
-
Hi all,
Ravid here from Paldi Solutions.
I'm excited to announce that we've launched a new officially supported plugin to the Partners Marketplace that aims to help you uplift your gauge indicators to a whole new level.
The plugin's name is Custom Gauge Indicator and it does exactly what it says - lets you easily build beautiful custom gauges that will match to your exact use case.
NOTES:
- The plugin will be officially supported including the PDF export functionality.
- While you can design any Gauge you'd like, the plugin comes bundled with a bank of more then 30+ icon samples that you can choose from out of the box and that amount keeps growing (:
- No coding or CSS is required. You can generate those custom gauges directly with your graphic designer.
- Every buyer will receive 3 custom designs that are tailor made to your specific branding and style.
- More info and a short demo video can be found on the Marketplace listing.
- Free trial is available for you to feel it yourselves.We rapidly keep enhancing the plugin so please share your feedback & suggestions for improvements.
Cheers,
Ravid
Please sign in to leave a comment.
Comments
19 comments