Help Needed: Dashboard UI

Hi,

I’ve been trying various plugins (and lots of Googling) but keep coming to dead ends.

My app has a dashboard page that currently uses the Progress Bars plugin (by Bubble), but I really want something that looks more like this (with circular gauges):

The ones in the image are from Angular 6.

I’ve seen the liquid gauges by Zeoqode but they aren’t really minimalist enough for my tastes.

Does anyone know of any plugins, or have any other suggestions? I’m reasonably happy using a little bit of HTML, CSS or JavaScript if I need to.

Thank you!

1 Like

If you know basic javascript then this would be easy to use - https://loading.io/progress/

8 Likes

Thank you. That works perfectly!

@graemejallen83 It would be awesome if you could maybe share how you got this to work? Even a very basic version. I’ve also tried for a long time to do something like this without being confined to the existing plugins (currently paying for one), as i’m sure others have. Having attempted this though, it seems I still need a little guidance when it comes to implementing javascript / css!

4 Likes

Sure.

Upload the files “loading-bar.css” and “loading-bar.js” to the root folder of your bubble (files available from here: https://loading.io/progress#installation).

Add the following to your page header:

<link rel="stylesheet" type="text/css" href="loading-bar.css"/>
<script type="text/javascript" src="loading-bar.js"></script>

Then add just one HTML element to your page (in my case with dimensions of 212 x 275) and add the following code (this is how I’ve set mine up, adjust the parameters to suit your needs):

<style type="text/css">
    .myBar{
        padding:0px;
    }
    .ldBar path.mainline {
        stroke-width: 6;
        stroke-linecap: round
    }
    .ldBar path.baseline {
        stroke-width: 1;
        stroke: #FFFCFC;
    }
    .ldBar-label {
        font-size: 2.5em;
        font-weight: 900;
        color: #173753;
        font-family: 'Ubuntu', sans-serif;
    }
</style>

<div style="width:212px;height:270px">
    <div class="uniqueName1 label-center" style="width:182px; height:200px; margin:25px 15px 15px 15px;" >
        <script>
            var bar = new ldBar(".uniqueName1", {
                "precision":"1",
                "duration":"2",
                "transition-in":"true",
                "stroke": '#00A287',
                "preset": "circle",
                "value": DYNAMIC DATA
            });
        </script>
    </div>
</div>

Then, for more gauges, add more HTML elements with the HTML above, remembering to give each one unique class name (in 2 places - example above: “uniqueName1”). You can omit the style part if you want them all to look the same.

This is how mine look (they animate when the page is loaded):

8 Likes

This is fantastic! Thank you.
I am going to give this a bash. Quick question to start with please… When you say this:
“Upload the files “loading-bar.css” and “loading-bar.js” to the root folder of your bubble”

Do you mean this:

Yes. Exactly!

don’ t forget to add the following to the page HTML header:

<link rel="stylesheet" type="text/css" href="loading-bar.css"/>
<script type="text/javascript" src="loading-bar.js"></script>
3 Likes

Good point, thank you. I have edited my post accordingly.

1 Like

Amazing. Could you share how the element gets dynamic data? E.g. how does the actual number show up in each element?

@graemejallen83 this is awesome and much appreciated! Looking forward to implementing.

1 Like

I haven’t had chance to implement this yet but it looks like you just insert a dynamic expression here (highlighted) to give you your value.

That’s correct :+1:

Hm, sorry but I don’t follow. If for instance I have a thing of “Members” and I want to have a gauge that shows the total number of Members, how do I do write that as dynamic data?
Writing “Search for Members:count” inside the html-part obviously won’t work.

Do I reference a bubble text field that does the calc?

Writing it out in the HTML element won’t work, but you can insert dynamic data i the HTML element just as you can in a simple text field. Place your cursor where you want the dynamic data and setup your logic for Search for members:count.

1 Like

Aah, that was it. Too obvious, I was mistaken because screenshots showed console log or something like that! Thanks a lot.

To all fellow slow headed bubblers, this is what it should look like:

Great addition @simon7. You saved this slow headed bubbler quite a bit of pain.

This has been one fine collaboration from the community. Thanks again all for the posts and sharing of learnings. Along those lines, it took me a bit to get the syntax working for dynamic colors. See below for those who need:

2 Likes

Hi @graemejallen83, @muneer.hameer, @asbjoern1990 . I’ve been trying to change to using the fill type progress bar using this:

Screen Shot 2020-02-20 at 6.56.52 AM

But I really have no idea what I’m doing with the code and where to insert into the default script. Can you please provide some guidance.

Thanks so much.

After much sweat and tears, I figured it out:

1 Like

Hi everyone,

Thanks graemejallen83 and everyone else for sharing your knowledge! This has been a huge help.

I’ve made an attempt at setting up this element in my app. Unfortunately, I can’t quite get the gauge to appear visibly on my page.

When I load the page with the HTML element, there is an “General Error” ( Sorry, we have encountered an unexpected error. Please file a bug report (Help -> Report a bug), including error code…).

If I select “show as an iframe” within the html element - the error disappears, but the progress circle still isn’t visible.

I believe I’ve copied the steps exactly as you laid out. Could this be because I am in development mode - not live? If not, do you guys have any other ideas?

Thanks again!