Progress bar that can plot multiple data points in different colors

0
Hi, I have a requirement to have a progress bar similar to the one show below. Over here, I have $150 as the current balance which is shown in light green color and $50 is the pending transactions showed in dark green color. Is there any widget in the app store that lets me plot the values this way ? Any help would be highly appreciated.  
asked
2 answers
1

Hi Vinod,

Have you take a look the progress bar widget? I'm not sure if you can do multiple colors in the same progress bar, you may have to customize the widget.

https://appstore.home.mendix.com/link/app/48910/Mendix/Progress-bar

 

Edit:

You can create a progress bar with html and javascript.

I would try something similar to this stack overflow post:

https://stackoverflow.com/questions/49828425/multicolor-progress-bar-using-css

or

https://stackoverflow.com/questions/24988644/jquery-ui-how-to-make-a-multi-colored-progressbar-segments-colored-differently

I would use the html snippet to build the html and the javascript snippet for the javascript piece. The javascript snippet allows you to use tokens from an entity.

 

https://appstore.home.mendix.com/link/app/56/Mendix/HTML/-JavaScript-Snippet

https://appstore.home.mendix.com/link/app/43096/

answered
0

Two options:

  1. Use 2 progress bars rendered on top of each other using CSS absolute positioning
  2. Modify one of the progress bar widgets
answered