Animated Liquid Fill Gauge

Ronen Avidor

October 27, 2016 18:50

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

Comments

17 comments

Sanjoy Ghosh December 13, 2016 13:40

The inner widget filters are not working.

0

Comment actions Permalink
Ronen Avidor December 13, 2016 16:02

Hi Sanjoy, will take a look and come back to you. Thanks Ronen

0

Comment actions Permalink
Ronen Avidor December 14, 2016 18:33

Hi Sanjoy, this is now working and you will be able to select Widget filter. Please make that you re-create the widget in order for the filter to kick-in. Meaning, delete any old Animated Gauge and then create new one. Best Ronen

1

Comment actions Permalink
Sanjoy Ghosh February 22, 2017 05:21

Hi Ronen,

After modification, animated gauge is not appearing as a complete circle as shown in figure attached. It is getting cut from bottom, can you please fix this issue.

Regards

Sanjoy

0

Comment actions Permalink
Ronen Avidor February 24, 2017 18:29

Hi Sanjoy,

This is now fixed, please download the latest release.

Ronen

1

Comment actions Permalink
Shahaf M March 08, 2018 13:17
need to fix your release log :
initial release => Oct-2016
- 27-Oct-2017 - Initial release
- 24-Feb-2017 - Fix issue where Gauge is getting cutoff at the bottom
:)
0

Comment actions Permalink
Malinda Jepsen March 29, 2018 16:22

Ronen: I love the way this looks! Is there a way to have the hover over display the goal (e.g. min/max values)?

0

Comment actions Permalink
Ronen Avidor March 29, 2018 22:10

Hi Malinda, Appreciate the feedback! I added the ability to show.hide ToolTip.

1

Comment actions Permalink
Malinda Jepsen April 03, 2018 19:40

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

0

Comment actions Permalink
Malinda Jepsen April 03, 2018 19:49

Ahhh... I had to set it in widget.js ShowToolTip : true

and it works! Now to find how to change the color dynamically.... Thanks!

Malinda

0

Comment actions Permalink
Denis Malenfant October 18, 2018 13:27
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
0

Comment actions Permalink
Max Erickson November 16, 2018 19:00

Does this work on the mobile app?

I receive the following error message when trying to view this type of widget on the Sisense Mobile App.

0

Comment actions Permalink
Brian Wilson November 16, 2018 19:30

Hi Max,

It's working for me (it's even animated)

0

Comment actions Permalink
Max Erickson November 16, 2018 21:10

Hmmm, looks good :). I am on version 7.2.1.11002. Same for you Brian?

0

Comment actions Permalink
Max Erickson November 16, 2018 21:30

Hey, so it is working for me now :). I restarted iis services, etc. and I guess it must have registered after that. So all is good and yea the animation works great. Love it. Thank you.

0

Comment actions Permalink
Ravi Verma November 27, 2018 10:32 (Edited November 27, 2018 10:39)

Hi,

I tried this plugin but I not able to see anything under design section. Is there any script that I need to run?

Thanks

2

Comment actions Permalink
Anthony Nater February 01, 2019 14:42

it seems to be animating, but the water level is not rising more than a little sliver at the bottom even if 100%

1

Comment actions Permalink

Please sign in to leave a comment.

Step 2 - Create The Gauge

Comments

Didn't find what you were looking for?