Diagram chart for web app - dairy farm manager app


I am creating a dairy farm manager app. For a particular part of the app, called “diseases”. I need to create a diagram which will show clearly, wich diseases have the most cases, for example:
I know there is an D3.js/Google chart-component in marketplace but this only works on mobile apps.
Is there any way I can make something similar happen on my web app?
Or maybe there is another way without making a chart to show the diseases with most cases?

Thanks in advance


Hi! No component for that at the moment I’m afraid, but having web-compatible charts is on our backlog for 2022. At the moment the way to show something like this would be to create the image of the chart in the backend or somewhere and then show the image in the UI.

However if a chart is not a must but you need some way to show clearly which diseases have most cases, there are other options of doing that by using formulas to style components etc. :thinking:

Here’s a quick thing I made with just using containers
Screenshot 2021-12-15 at 16.33.00

Something like this is perfectly doable. The bar with the amount of each disease is just a horizontal container with a repeating container with static 40px height and width that is the percentage of that disease of all disease (e.g. amount_of_a_disease/amount_of_disease_in_total*100+"%").

For this solution you need to assign each disease a color. You can do this into the data variable probably or recreate the schema with a color field in a page variable. For test purposes I just generated a random color for each with RGB(RANDOM_INTEGER_BETWEEN(0, 255), RANDOM_INTEGER_BETWEEN(0, 255), RANDOM_INTEGER_BETWEEN(0, 255)).

1 Like

Dit it like you said. The only thing I changed, instead off containers I used buttons.
Clicking on one of the buttons will show you a list of all the animals with the clicked disease.

Translation Dutch → English
Ziekten = Diseases
Aantal dieren per ziekte = Amount of animals per disease
Nieuwste gevallen = Newest cases
Koenummer = Cownumber


Mevi, would this work for a bullet chart? Here is an image of something I’ve gotten to work in a bullet chart in excel. I really could use charts in my app and am not ready for D3. Js stuff, at least there is not enough to get me started to figure out things sooner rather than latter.

Can I stack out many containers that grow depending on a variable and have smaller containers that hold an image like the red lines that travel up and down. Also have numbers show on the side?

Hmm I think the lines are going to be hard, but you could try it? It might be hard to get them to be perfectly even and aligned though :thinking:

I didnt realize you could change the container size at first. It definitely does work.

hi, im having an issue with the container sizing, basically, for some reason this is how everything appears

this is how ive set it up

and heres the container

Do you know whats going on?

What’s the settings of the Container(s) it is in? Perhaps it has some “align everything to middle” thing or similar that might shrink it?

Thanks for reaching out, This is for the one

and this is for the other

Still, i cant understand why this is happening

And here it is without the center aligment

Wanna take a look in the app?
heres the id

Hmm, looks to me like for some reason it doesn’t recognize the width as percentage although it used to, and reads it as pixels. Please make a bug report about this!

1 Like

Here it is thanks Mevi

1 Like

Was this fix implemented? I’m having a hell of a time attempting to make this work.