Examples with PlotOptionsGauge com.vaadin.flow.component.charts.model.PlotOptionsGauge used on opensource projects

Example 1 with PlotOptionsGauge

use of com.vaadin.flow.component.charts.model.PlotOptionsGauge in project flow-components by vaadin.

the class Gauge method initDemo.

@Override
public void initDemo() {
    // NOSONAR
    final Random random = new Random(0);
    final Chart chart = new Chart();
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.setTitle("Speedometer");
    configuration.getChart().setWidth(500);
    Pane pane = configuration.getPane();
    pane.setStartAngle(-150);
    pane.setEndAngle(150);
    YAxis yAxis = new YAxis();
    yAxis.setTitle("km/h");
    yAxis.setMin(0);
    yAxis.setMax(200);
    yAxis.setTickLength(10);
    yAxis.setTickPixelInterval(30);
    yAxis.setTickPosition(TickPosition.INSIDE);
    yAxis.setMinorTickLength(10);
    yAxis.setMinorTickInterval("auto");
    yAxis.setMinorTickPosition(TickPosition.INSIDE);
    Labels labels = new Labels();
    labels.setStep(2);
    labels.setRotation("auto");
    yAxis.setLabels(labels);
    PlotBand[] bands = new PlotBand[3];
    bands[0] = new PlotBand();
    bands[0].setFrom(0);
    bands[0].setTo(120);
    bands[0].setClassName("band-0");
    bands[1] = new PlotBand();
    bands[1].setFrom(120);
    bands[1].setTo(160);
    bands[1].setClassName("band-1");
    bands[2] = new PlotBand();
    bands[2].setFrom(160);
    bands[2].setTo(200);
    bands[2].setClassName("band-2");
    yAxis.setPlotBands(bands);
    configuration.addyAxis(yAxis);
    final ListSeries series = new ListSeries("Speed", 89);
    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    SeriesTooltip tooltip = new SeriesTooltip();
    tooltip.setValueSuffix(" km/h");
    plotOptionsGauge.setTooltip(tooltip);
    series.setPlotOptions(plotOptionsGauge);
    configuration.addSeries(series);
    runWhileAttached(chart, () -> {
        Integer oldValue = series.getData()[0].intValue();
        Integer newValue = (int) (oldValue + (random.nextDouble() - 0.5) * 20.0);
        series.updatePoint(0, newValue);
    }, 5000, 12000);
    add(chart);
}

Example 2 with PlotOptionsGauge

use of com.vaadin.flow.component.charts.model.PlotOptionsGauge in project flow-components by vaadin.

the class GaugeWithDualAxes method initDemo.

@Override
public void initDemo() {
    // NOSONAR
    final Random random = new Random(0);
    final Chart chart = new Chart();
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.setTitle("Speedometer with dual axes");
    configuration.getChart().setWidth(500);
    configuration.getPane().setStartAngle(-150);
    configuration.getPane().setEndAngle(150);
    YAxis yAxis = new YAxis();
    yAxis.setClassName("kmh");
    yAxis.setMin(0);
    yAxis.setMax(200);
    yAxis.setOffset(-25);
    Labels labels = new Labels();
    labels.setDistance(-20);
    labels.setRotation("auto");
    yAxis.setLabels(labels);
    yAxis.setTickLength(5);
    yAxis.setMinorTickLength(5);
    yAxis.setEndOnTick(false);
    YAxis yAxis2 = new YAxis();
    yAxis2.setClassName("mph");
    yAxis2.setMin(0);
    yAxis2.setMax(124);
    yAxis2.setOffset(-20);
    labels = new Labels();
    labels.setDistance(12);
    labels.setRotation("auto");
    yAxis2.setLabels(labels);
    yAxis2.setTickPosition(TickPosition.OUTSIDE);
    yAxis2.setMinorTickPosition(TickPosition.OUTSIDE);
    yAxis2.setTickLength(5);
    yAxis2.setMinorTickLength(5);
    yAxis2.setEndOnTick(false);
    configuration.addyAxis(yAxis);
    configuration.addyAxis(yAxis2);
    final ListSeries series = new ListSeries("Speed", 80);
    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    plotOptionsGauge.setDataLabels(new DataLabels());
    plotOptionsGauge.getDataLabels().setFormatter("function() {return '<span class=\"kmh\">'+ this.y + ' km/h</span><br/>' + '<span class=\"mph\">' + Math.round(this.y * 0.621) + ' mph</span>';}");
    plotOptionsGauge.setTooltip(new SeriesTooltip());
    plotOptionsGauge.getTooltip().setValueSuffix(" km/h");
    series.setPlotOptions(plotOptionsGauge);
    configuration.addSeries(series);
    runWhileAttached(chart, () -> {
        Integer oldValue = series.getData()[0].intValue();
        Integer newValue = (int) (oldValue + (random.nextDouble() - 0.5) * 20.0);
        series.updatePoint(0, newValue);
    }, 5000, 12000);
    chart.drawChart();
    add(chart);
}