Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to set the Gauge chart to other than half circle or full circle? #1633

Closed
escobar5 opened this issue Aug 24, 2020 · 7 comments
Labels

Comments

@escobar5
Copy link

Description

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

Screen Shot 2020-08-24 at 1 05 18 PM

@netil netil added the question label Aug 25, 2020
@netil
Copy link
Member

netil commented Aug 25, 2020

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

@escobar5
Copy link
Author

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
Copy link
Collaborator

michkami commented Aug 26, 2020

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 grafik
startingAngle: -1, arcLength: 50, fullCircle: true grafik

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
grafik

@escobar5
Copy link
Author

@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
Copy link
Collaborator

michkami commented Aug 27, 2020

@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:
grafik
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
Copy link
Author

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
Copy link
Member

netil commented Sep 14, 2020

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.

@netil netil closed this as completed in 25954ad Jan 8, 2021
github-actions bot pushed a commit that referenced this issue Jan 8, 2021
# [2.2.0-next.4](2.2.0-next.3...2.2.0-next.4) (2021-01-08)

### Bug Fixes

* **color:** fix color callback mismatch ([86ef214](86ef214)), closes [#1847](#1847)
* **types:** fix .load() data type ([7108e7b](7108e7b)), closes [#1848](#1848)

### Features

* **gauge:** added support for drawing gauge from 'startingAngle' to 'arcLength' ([25954ad](25954ad)), closes [#1633](#1633) [#1803](#1803) [#1849](#1849)
github-actions bot pushed a commit that referenced this issue Jan 26, 2021
# [2.2.0](2.1.4...2.2.0) (2021-01-26)

### Bug Fixes

* **api:** fix incorrect legend text positioning ([f1ede3f](f1ede3f)), closes [#1888](#1888)
* **api:** fix zoom for timesries axis ([0421a50](0421a50)), closes [#1868](#1868)
* **arc:** fix setting color value ([fad9e86](fad9e86)), closes [#1857](#1857) [#1847](#1847)
* **axis:** fix incorrect tick interval calculation ([1a96f3e](1a96f3e)), closes [#1896](#1896)
* **axis:** rotated horizontal xAxisHeight is calculated correctly after loading new data ([ef2754f](ef2754f)), closes [#1786](#1786) [#1787](#1787)
* **bar:** fix bar width on zoom ([25e987a](25e987a)), closes [#1907](#1907)
* **bar:** fix bar width rendering for 'total' data key ([eacaecb](eacaecb)), closes [#1818](#1818)
* **browser:** fix referencing global order ([8f84cb3](8f84cb3)), closes [#1778](#1778)
* **browser:** fix retrieving global ([3474ac0](3474ac0)), closes [#1826](#1826)
* **color:** fix color callback mismatch ([86ef214](86ef214)), closes [#1847](#1847)
* **data:** fix data.order to work for arc types ([3a716a0](3a716a0)), closes [#1863](#1863)
* **eventrect:** fix resizing event rect element after .load() ([12bf547](12bf547)), closes [#1864](#1864)
* **eventRect:** fix data.onclick work for scatter/bubble ([109c87d](109c87d)), closes [#1795](#1795)
* **point:** fix usePoint defs id value ([6df4653](6df4653)), closes [#1887](#1887)
* **radar:** fix data label text position ([c69d674](c69d674)), closes [#1871](#1871)
* **text:** data labels are working in Internet Explorer again ([865224e](865224e)), closes [#1877](#1877)
* **tooltip:** fix arc's tooltip interaction ([a8586a3](a8586a3)), closes [#1859](#1859)
* **types:** fix .load() data type ([7108e7b](7108e7b)), closes [#1848](#1848)

### Features

* **api:** make return values for axis.labels() ([efa5174](efa5174)), closes [#1865](#1865)
* **data:** Intent to ship data.label multiline ([8903aa6](8903aa6)), closes [#1784](#1784)
* **data.labels.colors:** Add callback support ([ac1affa](ac1affa)), closes [#1845](#1845)
* **gauge:** added support for drawing gauge from 'startingAngle' to 'arcLength' ([25954ad](25954ad)), closes [#1633](#1633) [#1803](#1803) [#1849](#1849)
* **gauge:** Intent to ship gauge.background ([632c600](632c600)), closes [#1804](#1804)
* **pie:** Intent to ship pie.outerRadius ([ca67418](ca67418)), closes [#1825](#1825)
* **point:** Intent to ship point.opacity ([fc5ad35](fc5ad35)), closes [#1867](#1867)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants