Search in sources :

Example 6 with Labels

use of com.vaadin.flow.component.charts.model.Labels 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);
}
Also used : PlotOptionsGauge(com.vaadin.flow.component.charts.model.PlotOptionsGauge) DataLabels(com.vaadin.flow.component.charts.model.DataLabels) Random(java.util.Random) Configuration(com.vaadin.flow.component.charts.model.Configuration) ListSeries(com.vaadin.flow.component.charts.model.ListSeries) Labels(com.vaadin.flow.component.charts.model.Labels) DataLabels(com.vaadin.flow.component.charts.model.DataLabels) Chart(com.vaadin.flow.component.charts.Chart) YAxis(com.vaadin.flow.component.charts.model.YAxis) SeriesTooltip(com.vaadin.flow.component.charts.model.SeriesTooltip)

Example 7 with Labels

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

the class CompareMultipleSeries method initDemo.

@Override
public void initDemo() {
    final Chart chart = new Chart();
    chart.setTimeline(true);
    Configuration configuration = chart.getConfiguration();
    configuration.getTitle().setText("AAPL Stock Price");
    YAxis yAxis = new YAxis();
    Labels label = new Labels();
    label.setFormatter("function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }");
    yAxis.setLabels(label);
    PlotLine plotLine = new PlotLine();
    plotLine.setValue(2);
    plotLine.setWidth(2);
    yAxis.setPlotLines(plotLine);
    configuration.addyAxis(yAxis);
    Tooltip tooltip = new Tooltip();
    tooltip.setPointFormat("<span>{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>");
    tooltip.setValueDecimals(2);
    configuration.setTooltip(tooltip);
    DataSeries aaplSeries = new DataSeries();
    aaplSeries.setName("AAPL");
    for (StockPrices.PriceData data : StockPrices.fetchAaplPrice()) {
        DataSeriesItem item = new DataSeriesItem();
        item.setX(data.getDate());
        item.setY(data.getPrice());
        aaplSeries.add(item);
    }
    DataSeries googSeries = new DataSeries();
    googSeries.setName("GOOG");
    for (StockPrices.PriceData data : StockPrices.fetchGoogPrice()) {
        DataSeriesItem item = new DataSeriesItem();
        item.setX(data.getDate());
        item.setY(data.getPrice());
        googSeries.add(item);
    }
    DataSeries msftSeries = new DataSeries();
    msftSeries.setName("MSFT");
    for (StockPrices.PriceData data : StockPrices.fetchMsftPrice()) {
        DataSeriesItem item = new DataSeriesItem();
        item.setX(data.getDate());
        item.setY(data.getPrice());
        msftSeries.add(item);
    }
    configuration.setSeries(aaplSeries, googSeries, msftSeries);
    PlotOptionsSeries plotOptionsSeries = new PlotOptionsSeries();
    plotOptionsSeries.setCompare(Compare.PERCENT);
    configuration.setPlotOptions(plotOptionsSeries);
    RangeSelector rangeSelector = new RangeSelector();
    rangeSelector.setSelected(4);
    configuration.setRangeSelector(rangeSelector);
    add(chart);
}
Also used : StockPrices(com.vaadin.flow.component.charts.examples.timeline.util.StockPrices) Configuration(com.vaadin.flow.component.charts.model.Configuration) RangeSelector(com.vaadin.flow.component.charts.model.RangeSelector) Tooltip(com.vaadin.flow.component.charts.model.Tooltip) Labels(com.vaadin.flow.component.charts.model.Labels) PlotLine(com.vaadin.flow.component.charts.model.PlotLine) DataSeries(com.vaadin.flow.component.charts.model.DataSeries) Chart(com.vaadin.flow.component.charts.Chart) DataSeriesItem(com.vaadin.flow.component.charts.model.DataSeriesItem) PlotOptionsSeries(com.vaadin.flow.component.charts.model.PlotOptionsSeries) YAxis(com.vaadin.flow.component.charts.model.YAxis)

Aggregations

Configuration (com.vaadin.flow.component.charts.model.Configuration)7 Labels (com.vaadin.flow.component.charts.model.Labels)7 YAxis (com.vaadin.flow.component.charts.model.YAxis)7 Chart (com.vaadin.flow.component.charts.Chart)6 ListSeries (com.vaadin.flow.component.charts.model.ListSeries)5 PlotOptionsColumn (com.vaadin.flow.component.charts.model.PlotOptionsColumn)4 XAxis (com.vaadin.flow.component.charts.model.XAxis)4 Pane (com.vaadin.flow.component.charts.model.Pane)3 PlotOptionsSeries (com.vaadin.flow.component.charts.model.PlotOptionsSeries)3 SeriesTooltip (com.vaadin.flow.component.charts.model.SeriesTooltip)3 Tooltip (com.vaadin.flow.component.charts.model.Tooltip)3 DataSeries (com.vaadin.flow.component.charts.model.DataSeries)2 PlotOptionsArea (com.vaadin.flow.component.charts.model.PlotOptionsArea)2 PlotOptionsGauge (com.vaadin.flow.component.charts.model.PlotOptionsGauge)2 PlotOptionsLine (com.vaadin.flow.component.charts.model.PlotOptionsLine)2 Random (java.util.Random)2 StockPrices (com.vaadin.flow.component.charts.examples.timeline.util.StockPrices)1 AxisTitle (com.vaadin.flow.component.charts.model.AxisTitle)1 DataLabels (com.vaadin.flow.component.charts.model.DataLabels)1 DataSeriesItem (com.vaadin.flow.component.charts.model.DataSeriesItem)1