Visible water level

I want to display a water level like 75%.
for example:
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.

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:

1 Like

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


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

And here

1 Like

Thanks for the answer.
The works fine.
Can anybody help me how I can add under the liquid an further text for example date.
kindly regards again

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

Thanks for the answer.
Here an example:
Kindly regards

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?

1 Like

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

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

<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>

This works…
kindly regards

1 Like

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?

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