# Visible water level

**URL:** <https://community.thunkable.com/t/visible-water-level/817117>\
**Category:** Questions about Thunkable X\
**Created:** [September 14, 2020, 8:54pm UTC](https://community.thunkable.com/t/visible-water-level/817117 "2020-09-14T20:54:47Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![haiflosse](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@haiflosse](https://community.thunkable.com/u/haiflosse)\
**Post date:** [September 14, 2020, 8:54pm UTC](https://community.thunkable.com/t/visible-water-level/817117/1 "2020-09-14T20:54:47Z")

</div>

Hi!  
I want to display a water level like 75%.  
for example:  
 ![grafic](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/5/a581a5b6f6a7ee633993dfad35cd043d6fa8443d.png)  
The level and the % value should change dynamic.  
It will be great when it is possible that the surface will be animated.  
Hope someone can help me and can give me an idea how I can solve it.  
kindly regards.

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [September 14, 2020, 8:58pm UTC](https://community.thunkable.com/t/visible-water-level/817117/2 "2020-09-14T20:58:17Z")

</div>

Hi @haiflosse, I like your icon design - is it something you created yourself?

You can adapt the logic from this tutorial, but use height rather than width:

> [@How to create a progress bar](http://community.thunkable.com/t/how-to-create-a-progress-bar/115625):
>
> Overview At the end of this tutorial you will be able to create a custom progress bar for your apps, just like the thin yellow bar that you can see scrolling across the bottom of the screen here. recycle Remix this app If you want jump straight in and get a copy of this project yourself then just click on this [remix link](https://x.thunkable.com/copy/7b0ea9fa53caf9bd1c3fe7ec3540a970) 1. Increment and Show Percent For this example the CounterLabel.Text starts at 0 and increases with each button press. To set the width of the ProgressLab…

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [September 14, 2020, 9:45pm UTC](https://community.thunkable.com/t/visible-water-level/817117/3 "2020-09-14T21:45:42Z")

</div>

This could be done with a bar chart. Have you ever seen another chart like this before?

[edit-]

> **[GitHub - ecomfe/echarts-liquidfill: Liquid Fill Chart for Apache ECharts](https://github.com/ecomfe/echarts-liquidfill)**
>
> Liquid Fill Chart for Apache ECharts. Contribute to ecomfe/echarts-liquidfill development by creating an account on GitHub.

This code plus the webviewer should make what you want, right?

And here

> **[D3 Liquid Fill Gauge](http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6)**
>
> Curtis Bratton’s Block 5e5ce9beee483220e2f6

---

<div class="post-metadata">

**Author:** ![haiflosse](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@haiflosse](https://community.thunkable.com/u/haiflosse)\
**Post date:** [October 27, 2020, 10:47am UTC](https://community.thunkable.com/t/visible-water-level/817117/4 "2020-10-27T10:47:23Z")

</div>

Thanks for the answer.  
The [http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6](http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) works fine.  
Can anybody help me how I can add under the liquid an further text for example date.  
kindly regards again

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 27, 2020, 5:02pm UTC](https://community.thunkable.com/t/visible-water-level/817117/5 "2020-10-27T17:02:33Z")

</div>

> [@haiflosse](#):
>
> Can anybody help me how I can add under the liquid an further text for example date.

Can you show an image of what that would look like?

---

<div class="post-metadata">

**Author:** ![haiflosse](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@haiflosse](https://community.thunkable.com/u/haiflosse)\
**Post date:** [October 27, 2020, 5:26pm UTC](https://community.thunkable.com/t/visible-water-level/817117/6 "2020-10-27T17:26:30Z")

</div>

Thanks for the answer.  
Here an example:  
 ![liquid](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/5/b553358ef9b0241c78697c3c3e554b2995e162ef.png)  
Kindly regards

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 27, 2020, 6:08pm UTC](https://community.thunkable.com/t/visible-water-level/817117/7 "2020-10-27T18:08:42Z")

</div>

Wouldn’t you just put the water level graphic inside a column and then put a label under it also inside the column? And then use the date blocks (e.g. click on “hour” in the “current hour” block and select “day of the week” etc.) in the Device drawer to populate the label?

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [October 27, 2020, 7:03pm UTC](https://community.thunkable.com/t/visible-water-level/817117/8 "2020-10-27T19:03:08Z")

</div>

Have you looked at the documentation. There is probably a data label option or property to be set.

---

<div class="post-metadata">

**Author:** ![haiflosse](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@haiflosse](https://community.thunkable.com/u/haiflosse)\
**Post date:** [October 27, 2020, 7:35pm UTC](https://community.thunkable.com/t/visible-water-level/817117/9 "2020-10-27T19:35:53Z")

</div>

Thanks for the answers.  
I couldn’t find anything in the documentation.  
I try now a table:

```auto
<table width="20%"><tr>
<td><svg id="fillgauge1" height="250" onload="gauge1.update(<?php echo $p; ?>);"></svg></td></tr>
<tr><td style="text-align: center;" ><?php echo $row['datum']; ?></td></tr>
</table>
```

This works…  
kindly regards

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [October 27, 2020, 8:26pm UTC](https://community.thunkable.com/t/visible-water-level/817117/10 "2020-10-27T20:26:02Z")

</div>

Wish I understood php!

Sorry. I can help you with this in JS.

I’ve used jQuery to append (overlay) a div with text elements on top of a chart. I think C3JS allows for a radial/gauge chart with a title property

What charting library are you using?

---

<div class="post-metadata">

**Author:** ![haiflosse](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@haiflosse](https://community.thunkable.com/u/haiflosse)\
**Post date:** [October 27, 2020, 9:06pm UTC](https://community.thunkable.com/t/visible-water-level/817117/11 "2020-10-27T21:06:05Z")

</div>

Thanks for your answer.  
But I don’t understand what you mean.

Can anybody help me how I can zoom the website automatic to the maximum width and hight in the webviewer object.  
kindly regards

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 12:21pm UTC](https://community.thunkable.com/t/visible-water-level/817117/12 "2024-11-08T12:21:54Z")

</div>