Add gauge visualization chart to library

[Spiderbezno]

Would be very useful a gauge chart, with a range value, to represent a consumption usage of rate mobile or similar

[imaNNeo]

Not yet, but edit the title to more descriptive title, and let it be open,
If it gained lot of thumbs up, we will consider it.
Thanks!

Adding to the conversation, here we have a couple of designs to consider:

Gauge meter Vector - Dribbble
Freebie Smart Home - Dribbble

@Spiderbezno please change the Title to something like: "Add gauge visualization chart to library".

Regards,

[imaNNeo]

Thanks!

[imaNNeo]

It is similar to our PieChart, right?

[elhe26]

It is similar to our PieChart, right?

Kind of. Checking this example, the gauge viz chart has a circular shape.

[Digoun]

It is similar to our PieChart, right?

To add on this, a simple design could be similar to the actual PieChart but adding a custom angle, for example by passing optional parameters startAngle and endAngle.

Something similar to the way it is done in the ApexChart library in this example:
https://apexcharts.com/docs/chart-types/radialbar-gauge/#custom-angle

[ClecknerT]

Gauges would be super useful addition!

[FlorianArnould]

Hi,
I started working on this over the weekend, and I already have a first preview to discuss on (my fork branch here).

For the moment a full example would look like this :

GaugeChart(
  GaugeChartData(
    value: 0.7, // double in range [0, 1]
    valueColor: Colors.yellow,
    backgroundColor: Colors.orange,
    strokeWidth: 30,
    startAngle: -90, // degree as you can imagine
    endAngle: 270, // same
    strokeCap: StrokeCap.round, /// can be [StrokeCap.butt] (good looking square), [StrokeCap.round] or [StrokeCap.square] (bad looking square)
  ),
),

strokeCap

StrokeCap.butt	StrokeCap.round	StrokeCap.square

startAngle / endAngle

This could be simpler with startAngle / sweepAngle.

For example with : startAngle: 135, endAngle: 405, the result is :

other parameters

It almost work like the circular progress indicator.

Not yet implemented ideas

• I have not worked on the touch / border thing yet
• I would like to add the ability to turn clockwise or counter clockwise, using an enum defaulting to clockwise
• I want to add the ticks but I don't know where to put them inner, outer maybe parametered.
• Where to put the title(s) (see last point for the s)
• Would also be interesting to have an arrow too like on the dribbble designs but
• I would also like to maybe have multiple gauge on the same chart having something like this :
  
  • So we need a margin between gauge
  • Where to put the ticks in this case
  • How to able the case where the available width or height is lesser than 2 * n * strokeWidth.

If you have something else don't hesitate 😉

[ClecknerT]

This is great. I am trying to use the kdgaugeview package which has some nice features but lacks upkeep and not a lot of customization options. I do like the alertColorArray and the inner tick marks in the stroke. I am having issues with it not updating with new values from a Firestore Stream and it is Android only. I am not using stroke titles and putting dynamic data in the inner part of the gauge. I really like the multi-gauge idea. I have a use for this but have not found another package that can do it. 

[ClecknerT]

FlorianArnould I'd tip you if accepted them. Thanks for the quick response.