Skip to content

Instantly share code, notes, and snippets.

@encikpulasan
Created September 2, 2021 05:28
Show Gist options
  • Save encikpulasan/b83ea9a1cdc1d1a1a84598ccadb5dde8 to your computer and use it in GitHub Desktop.
Save encikpulasan/b83ea9a1cdc1d1a1a84598ccadb5dde8 to your computer and use it in GitHub Desktop.
Gauge chart implementing ChartFultter package
/// Gauge chart example, where the data does not cover a full revolution in the
/// chart.
/// Sample data type.
class GaugeSegment {
final String segment;
final double size;
final Color color;
final Icon icon;
GaugeSegment(this.segment, this.size, this.color, this.icon);
}
/// Create one series with sample hard coded data.
List<charts.Series<GaugeSegment, String>> _createSampleData() {
final data = [
new GaugeSegment('NonCompliant', 9.72, KestrlColors.system_light_red, Icon(OutlinedIcons.abdominal)),
new GaugeSegment('Questionable', 31.48, KestrlColors.system_light_yellow, Icon(OutlinedIcons.abdominal)),
new GaugeSegment('Compliant', 58.8, KestrlColors.system_light_green, Icon(OutlinedIcons.abdominal)),
];
return [
new charts.Series<GaugeSegment, String>(
id: 'Compliancy',
domainFn: (GaugeSegment segment, _) => segment.segment,
measureFn: (GaugeSegment segment, _) => segment.size,
data: data,
colorFn: (GaugeSegment segment, _) => charts.ColorUtil.fromDartColor(segment.color),
)
];
}
class GaugeChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
GaugeChart(this.seriesList, {this.animate = true});
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 2,
child: ListView(
physics: NeverScrollableScrollPhysics(),
children: [
AspectRatio(
aspectRatio: 1,
child: charts.PieChart<String>(
_createSampleData(),
animate: animate,
selectionModels: [
charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: (model) {
model.selectedDatum.forEach(
(item) {
var data = item.datum as GaugeSegment;
print(data.size);
},
);
},
),
],
// Configure the width of the pie slices to 30px. The remaining space in
// the chart will be left as a hole in the center. Adjust the start
// angle and the arc length of the pie so it resembles a gauge.
defaultRenderer: new charts.ArcRendererConfig(
arcWidth: 64,
startAngle: pi,
arcLength: pi,
arcRendererDecorators: [
charts.ArcLabelDecorator(
insideLabelStyleSpec: charts.TextStyleSpec(
color: charts.Color.fromHex(code: '#FFFFFF'),
fontSize: 12,
),
),
],
),
),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment