Billboard.js: Is it possible to set the Gauge chart to other than half circle or full circle?

[escobar5]

Description

Is it possible to draw the gauge with a custom starting and end angle? something like this:

[netil]

Hi @escobar5, you can use gauge.fullCircle option to make gauge to draw as "full circle".

[escobar5]

Hi @netil, thanks for your response, what I'm trying to achieve is 3 quarters of a circle, as seen in the picture, not a full circle.

[michkami]

Hi @escobar5, you can use gauge.fullCircle option to make gauge to draw as "full circle".

Hi @netil, thanks for your response, what I'm trying to achieve is 3 quarters of a circle, as seen in the picture, not a full circle.

This is not possible at the moment, but I could try to implement an option to show x percent of the gauge.

Specifyng the max length of the circle should only work if gauge_fullCircle: true.
It should start drawing the gauge at config.gauge_startingAngle and end at config.gauge_startingAngle + (2π * (config.gauge_arcLength / 100)).

In my prototype it would look like this (don't mind the wrongly placed value texts):
| Options | Example |
| ------------- | ------------- |
| startingAngle: 0, arcLength: 75, fullCircle: true | |
| startingAngle: -1, arcLength: 50, fullCircle: true | |

Also it should be considered if gauge_startingAngle should be disabled for gauge_fullCircle: false, as I don't see any useful use case in changing the starting angle for not fully circled gauge (maybe you know some @netil, @escobar5).
The only thing that would make any sense is to mirror the starting angle and use -config.gauge_startingAngle as our end angle, so it would look like this:
startingAngle: -1, fullCircle: false

[escobar5]

@michkami, yes, that would be perfect, I also don't see any use case in setting the angles when gauge_fullCircle: false, as a matter of fact, having startingAngle and arcLength just makes the option gauge_fullCircle kind of obsolete.

[michkami]

@michkami, yes, that would be perfect, I also don't see any use case in setting the angles when gauge_fullCircle: false, as a matter of fact, having startingAngle and arcLength just makes the option gauge_fullCircle kind of obsolete.

I think gauge_fullCircle should stay as an option.
We have 2 possible cases how the gauge can be rendered:

1. The default half circle gauge which starts at -1 * Math.PI / 2 and ends at Math.PI / 2.
2. The full circle gauge which starts at -1 * Math.PI / 2 and ends at -1 * Math.PI / 2.

For the first case, setting the gauge_startingAngle should just mirror the starting angle and use the mirrored value as end angle.
It is pretty easy, as long as the value of the starting angle is between -1 * Math.PI / 2 and Math.PI / 2. If you use smaller or bigger value, the gauge is rendered behind the bottom legend and out of the SVG, which is bad. In this case, the height of arc/svg should be calculated dynamically (which seems not to be taht easy). Other option would be to limit the starting angle if gauge_fullCircle: false to -1 * Math.PI / 2 < value <Math.PI / 2.
In my opinion calculating the height dynamically makes more sense than limiting the starting angle. But in this case I will maybe need some help @netil.

Setting the gauge_fullCircle is necessary, as we don't want to mirror the starting angle. Here it is possible to set the starting angle AND the length of the arc. In this case it would also be possible to calculate the height dynamically which would make gauge_fullCircle obsolete but it does not make any sense for me.
Setting the starting angle AND arc length does not make any sense, if you want a simble gauge like in the first case, that's why you would either set gauge_fullCircle: false.
gauge_fullCircle: true should be used for cases like yours @escobar5, where you want to start at 0° and draw the arc to 270°. In this case mirroring the starting angle would make no sense.

At this point arcLength can be set between 0% and 100%, but it would be also possible to change it to 0° to 360°.
Which way do you prefer @netil?

Regardless of the implementation, we will also have to optimize the placement of the min and max value, as in both cases it will be placed in the wrong place.
The best way would be:

It will work for the most cases, but not if there is almost a full circle. In this case, min and max value should be placed somewhere else. Do you have any ideas?

All the changes should be applied for the single gauge aswell.

[escobar5]

Setting the gauge_fullCircle is necessary, as we don't want to mirror the starting angle. Here it is possible to set the starting angle AND the length of the arc. In this case it would also be possible to calculate the height dynamically which would make gauge_fullCircle obsolete but it does not make any sense for me.
Setting the starting angle AND arc length does not make any sense, if you want a simble gauge like in the first case, that's why you would either set gauge_fullCircle: false.
gauge_fullCircle: true should be used for cases like yours @escobar5, where you want to start at 0° and draw the arc to 270°. In this case mirroring the starting angle would make no sense.

Yes, you're right, gauge_fullCircle makes things more simple.

It will work for the most cases, but not if there is almost a full circle. In this case, min and max value should be placed somewhere else. Do you have any ideas?

This is tricky, maybe setting a single label with both values like "0 - 100"

[netil]

At this point arcLength can be set between 0% and 100%, but it would be also possible to change it to 0° to 360°.
Which way do you prefer @netil?

I'd prefer showing in percent values.