Auto-size a Label on the basis of a number (content)

Hi all,

I want to auto-size (increase or decrese) the label size on the basis of a number. If the number (count) increase then the cirkel has to encrease with the number and vice versa. See image

  • max count is 2000 = 100% size of the label
  • min count is 0 = 1% size of the label

I think I have to do this with CSS, but I don't know how.

Can someone help me with this?

Thanks,

Sonja

Sonja van den Heuvel wrote:

Hi all,

I want to auto-size (increase or decrese) the label size on the basis of a number. If the number (count) increase then the cirkel has to encrease with the number and vice versa. See image

  • max count is 2000 = 100% size of the label
  • min count is 0 = 1% size of the label

I think I have to do this with CSS, but I don't know how.

Can someone help me with this?

Thanks,

Sonja

Hi,

-You can define CSS classes for each respective size & apply them in CSS using Expression.

You can use If Clause or  provided decision statement for the same under expression.

or

-You can also set the size property of defined class using JS.

Thanks


assif_tiger wrote:

Sonja van den Heuvel wrote:

Hi all,

I want to auto-size (increase or decrese) the label size on the basis of a number. If the number (count) increase then the cirkel has to encrease with the number and vice versa. See image

  • max count is 2000 = 100% size of the label
  • min count is 0 = 1% size of the label

I think I have to do this with CSS, but I don't know how.

Can someone help me with this?

Thanks,

Sonja

Hi,

-You can define CSS classes for each respective size & apply them in CSS using Expression.

You can use If Clause or  provided decision statement for the same under expression.

or

-You can also set the size property of defined class using JS.

Thanks


Hi thanks for your awnser!

Can you give me an example for each solution?


To calcute the percentage you can do:

percentage = (othersize*100)/2000 where othersize is your count.

you can use this percentage to adjust your number, saving this value into a variable and controlling the size of the expression "Number".


I hope this will help you


Best Regards,

Nuno Pereira

Nuno Gonçalo Pereira wrote:

To calcute the percentage you can do:

percentage = (othersize*100)/2000 where othersize is your count.

you can use this percentage to adjust your number, saving this value into a variable and controlling the size of the expression "Number".


I hope this will help you


Best Regards,

Nuno Pereira

Thanks Nuno,

But I think I did not explane myself clear. I only want to encrease or decrease the size of the yellow circles.

Do you have an example for how I can do that?

Sonja van den Heuvel wrote:

Hi all,

I want to auto-size (increase or decrese) the label size on the basis of a number. If the number (count) increase then the cirkel has to encrease with the number and vice versa. See image

  • max count is 2000 = 100% size of the label
  • min count is 0 = 1% size of the label

I think I have to do this with CSS, but I don't know how.

Can someone help me with this?

Thanks,

Sonja

First of all, have you already made the circles on outsystems ? 

With the class "dot", you can use the height and widht with radius.


Best Regards


Yes , sure !

You need to do something like this:


Hope i could help you!

Best Regards,

Nuno Pereira

Solution

Sonja van den Heuvel wrote:

Nuno Gonçalo Pereira wrote:

To calcute the percentage you can do:

percentage = (othersize*100)/2000 where othersize is your count.

you can use this percentage to adjust your number, saving this value into a variable and controlling the size of the expression "Number".


I hope this will help you


Best Regards,

Nuno Pereira

Thanks Nuno,

But I think I did not explane myself clear. I only want to encrease or decrease the size of the yellow circles.

Do you have an example for how I can do that?

Hi Sonja van den Heuvel!

Did you solve your issue?


Best Regards,

Nuno Pereira


Solution

Nuno Gonçalo Pereira wrote:

Sonja van den Heuvel wrote:

Nuno Gonçalo Pereira wrote:

To calcute the percentage you can do:

percentage = (othersize*100)/2000 where othersize is your count.

you can use this percentage to adjust your number, saving this value into a variable and controlling the size of the expression "Number".


I hope this will help you


Best Regards,

Nuno Pereira

Thanks Nuno,

But I think I did not explane myself clear. I only want to encrease or decrease the size of the yellow circles.

Do you have an example for how I can do that?

Hi Sonja van den Heuvel!

Did you solve your issue?


Best Regards,

Nuno Pereira



Hi Nuno,

Yes is works!  thanks for your help

Kind regards,

Sonja