GaugeChart

image not found

Contents:

General

Detailed information can be found additionally here: https://developers.google.com/chart/interactive/docs/gallery/gauge

Example: Filling the data

final ChartModel model = ChartModel.New()
    .addColumn(Column.New(Column.Type.STRING, "label"))
    .addColumn(Column.New(Column.Type.NUMBER, "value"));

model.addRow("Memory", 80);
model.addRow("CPU", 55);
model.addRow("Network", 68);

this.gaugeChart.setModel(model);

API and methods:

Properties

GreenColor, YellowColor, RedColor

The color to use for the green, yellow and red section, in HTML color notation.

this.gaugeChart.setYellowColor("yellow");
this.gaugeChart.setYellowColor("#526846");
this.gaugeChart.setYellowColor("red");

GreenFrom, YellowFrom, RedFrom

The lowest value for an area marked by a green, yellow or red color.

this.gaugeChart.setYellowFrom(75);

GreenTo, YellowTo, RedTo

The highest value for an area marked by a green, yellow or red color.

this.gaugeChart.setYellowTo(90);

MajorTicks

Labels for the main tick marks. The number of labels sets the number of major tick marks in all gauges. The default setting is five major ticks, with the minimum and maximum measurement labels.

this.gaugeChart.setMajorTicks(Arrays.asList("10", "20", "30"));

MinorTicks

The number of smaller tick sections in each larger tick section.

this.gaugeChart.setMinorTicks(5);

AnimationDuration

The duration of the animation, in milliseconds. Details can be found under the animation documentation.

this.gaugeChart.setAnimation(Animation.New(2000));

AnimationEasing

The "easing function" applied to the animation. The following options are available:

  • 'linear' - constant speed.

  • 'in' - Ease in - Start slowly and accelerate.

  • 'out' - Ease out - Quick start and slow down.

  • 'inAndOut' - Ease in and out - Start slowly, accelerate and decelerate again.

this.gaugeChart.setAnimation(Animation.New(2000, Easing.LINEAR));