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

Example 41 with Chart

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

the class Bullet method initDemo.

@Override
public void initDemo() {
    Chart revenue = createBulletChart(0, 150, 225, 9e9, 275, 250, "<span style=\"font-size: 13px; font-weight: bold;\">Revenue</span><br/>U.S. $ (1,000s)");
    revenue.setHeight("115px");
    revenue.getConfiguration().getChart().setMarginTop(40);
    revenue.getConfiguration().setTitle("2017 YTD");
    Chart profit = createBulletChart(0, 20, 25, 100, 22, 27, "<span style=\"font-size: 13px; font-weight: bold;\">Profit</span><br/>%");
    Chart newCustomers = createBulletChart(0, 1400, 2000, 9e9, 1650, 2100, "<span style=\"font-size: 13px; font-weight: bold;\">New Customers</span><br/>Count");
    add(revenue);
    add(profit);
    add(newCustomers);
}

Example 42 with Chart

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

the class Bullet method createBulletChart.

/**
 * Create a bullet chart with shared configuration
 *
 * @param plotBandY1
 *            "from" value for the first plotband
 * @param plotBandY2
 *            "to" value for the first plotband and "from" value for the
 *            second plotband
 * @param plotBandY3
 *            "to" value for the second plotband and "from" value for the
 *            third plotband
 * @param plotBandY4
 *            "to" value for the third plotband
 * @param y
 *            Y value for the series item
 * @param target
 *            Target value for the series item
 * @param category
 *            Title to be used in the category
 * @return Chart with shared configuration
 */
private Chart createBulletChart(Number plotBandY1, Number plotBandY2, Number plotBandY3, Number plotBandY4, Number y, Number target, String category) {
    Chart chart = new Chart(ChartType.BULLET);
    chart.setHeight("85px");
    Configuration conf = chart.getConfiguration();
    conf.getChart().setInverted(true);
    conf.getChart().setMarginLeft(135);
    conf.getLegend().setEnabled(false);
    YAxis yAxis = conf.getyAxis();
    yAxis.setGridLineWidth(0);
    yAxis.setTitle("");
    yAxis.addPlotBand(new PlotBand(plotBandY1, plotBandY2, new SolidColor("#666666")));
    yAxis.addPlotBand(new PlotBand(plotBandY2, plotBandY3, new SolidColor("#999999")));
    yAxis.addPlotBand(new PlotBand(plotBandY3, plotBandY4, new SolidColor("#bbbbbb")));
    conf.getxAxis().addCategory(category);
    conf.getTooltip().setPointFormat("<b>{point.y}</b> (with target at {point.target})");
    PlotOptionsBullet options = new PlotOptionsBullet();
    options.setPointPadding(0.25);
    options.setBorderWidth(0);
    options.setColor(SolidColor.BLACK);
    options.getTargetOptions().setWidth("200%");
    conf.setExporting(false);
    DataSeries series = new DataSeries();
    series.add(new DataSeriesItemBullet(y, target));
    series.setPlotOptions(options);
    conf.addSeries(series);
    return chart;
}

Example 43 with Chart

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

the class DynamicChangingChart method initDemo.

@Override
public void initDemo() {
    final Chart chart = new Chart();
    chart.setConfiguration(getFunnelConfiguration());
    add(chart);
    add(createConfigurationButton(chart, "funnel", this::getFunnelConfiguration));
    add(createConfigurationButton(chart, "polar", this::getPolarConfiguration));
    add(createConfigurationButton(chart, "line", this::getLineConfiguration));
}

Example 44 with Chart

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

the class FunnelChart method initDemo.

@Override
public void initDemo() {
    DataSeries dataSeries = new DataSeries("Unique users");
    dataSeries.add(new DataSeriesItem("Website visits", 15654));
    dataSeries.add(new DataSeriesItem("Downloads", 4064));
    dataSeries.add(new DataSeriesItem("Requested price list", 1987));
    dataSeries.add(new DataSeriesItem("Invoice sent", 976));
    dataSeries.add(new DataSeriesItem("Finalized", 846));
    Chart chart = new Chart();
    Configuration conf = chart.getConfiguration();
    conf.setTitle("Sales funnel");
    conf.getLegend().setEnabled(false);
    PlotOptionsFunnel options = new PlotOptionsFunnel();
    options.setReversed(false);
    options.setNeckWidth("30%");
    options.setNeckHeight("30%");
    options.setWidth("70%");
    DataLabelsFunnel dataLabels = new DataLabelsFunnel();
    dataLabels.setFormat("<b>{point.name}</b> ({point.y:,.0f})");
    options.setDataLabels(dataLabels);
    dataSeries.setPlotOptions(options);
    conf.addSeries(dataSeries);
    add(chart);
}

Example 45 with Chart

use of com.vaadin.flow.component.charts.Chart 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);
}