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

Example 1 with Chart

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

the class Organization method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart(ChartType.ORGANIZATION);
    Configuration conf = chart.getConfiguration();
    conf.getChart().setInverted(true);
    conf.getChart().setHeight("500px");
    conf.getTooltip().setOutside(true);
    conf.setTitle("Acme organization chart");
    NodeSeries series = createSeries();
    conf.addSeries(series);
    add(chart);
}

Example 2 with Chart

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

the class Polar method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart();
    Configuration conf = chart.getConfiguration();
    conf.getChart().setPolar(true);
    conf.setTitle("Polar Chart");
    Pane pane = new Pane(0, 360);
    conf.addPane(pane);
    XAxis xAxis = new XAxis();
    xAxis.setTickInterval(45);
    xAxis.setMin(0);
    xAxis.setMax(360);
    Labels labels = new Labels();
    labels.setFormatter("function() {return this.value + '°';}");
    xAxis.setLabels(labels);
    YAxis yAxis = new YAxis();
    yAxis.setMin(0);
    conf.addxAxis(xAxis);
    conf.addyAxis(yAxis);
    PlotOptionsSeries series = new PlotOptionsSeries();
    PlotOptionsColumn column = new PlotOptionsColumn();
    series.setPointStart(0);
    series.setPointInterval(45);
    column.setPointPadding(0);
    column.setGroupPadding(0);
    conf.setPlotOptions(series, column);
    ListSeries col = new ListSeries(8, 7, 6, 5, 4, 3, 2, 1);
    ListSeries line = new ListSeries(1, 2, 3, 4, 5, 6, 7, 8);
    ListSeries area = new ListSeries(1, 8, 2, 7, 3, 6, 4, 5);
    col.setPlotOptions(new PlotOptionsColumn());
    col.setName(ChartType.COLUMN.toString());
    line.setPlotOptions(new PlotOptionsLine());
    line.setName(ChartType.LINE.toString());
    area.setPlotOptions(new PlotOptionsArea());
    area.setName(ChartType.AREA.toString());
    conf.setSeries(col, line, area);
    add(chart);
}

Example 3 with Chart

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

the class Pyramid method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart(ChartType.PYRAMID);
    Configuration configuration = chart.getConfiguration();
    configuration.setTitle("Sales pyramid");
    configuration.getLegend().setEnabled(false);
    PlotOptionsPyramid plotOptionsSeries = new PlotOptionsPyramid();
    DataLabelsFunnel dataLabels = plotOptionsSeries.getDataLabels();
    dataLabels.setEnabled(true);
    dataLabels.setSoftConnector(true);
    dataLabels.setFormat("<b>{point.name}</b> ({point.y:,.0f})");
    plotOptionsSeries.setCenter("40%", "50%");
    plotOptionsSeries.setWidth("60%");
    configuration.setPlotOptions(plotOptionsSeries);
    DataSeries series = new DataSeries("Unique users");
    series.add(new DataSeriesItem("Website visits", 15654));
    series.add(new DataSeriesItem("Downloads", 4064));
    series.add(new DataSeriesItem("Requested price list", 1987));
    series.add(new DataSeriesItem("Invoice sent", 976));
    series.add(new DataSeriesItem("Finalized", 846));
    configuration.addSeries(series);
    add(chart);
}

Example 4 with Chart

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

the class SolidGauge method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart(ChartType.SOLIDGAUGE);
    Configuration configuration = chart.getConfiguration();
    Pane pane = configuration.getPane();
    pane.setCenter(new String[] { "50%", "50%" });
    pane.setStartAngle(-90);
    pane.setEndAngle(90);
    Background paneBackground = new Background();
    paneBackground.setInnerRadius("60%");
    paneBackground.setOuterRadius("100%");
    paneBackground.setShape(BackgroundShape.ARC);
    pane.setBackground(paneBackground);
    YAxis yAxis = configuration.getyAxis();
    yAxis.setTickAmount(2);
    yAxis.setTitle("Speed");
    yAxis.setMinorTickInterval("null");
    yAxis.getTitle().setY(-50);
    yAxis.getLabels().setY(16);
    yAxis.setMin(0);
    yAxis.setMax(200);
    PlotOptionsSolidgauge plotOptionsSolidgauge = new PlotOptionsSolidgauge();
    DataLabels dataLabels = plotOptionsSolidgauge.getDataLabels();
    dataLabels.setY(5);
    dataLabels.setUseHTML(true);
    configuration.setPlotOptions(plotOptionsSolidgauge);
    DataSeries series = new DataSeries("Speed");
    DataSeriesItem item = new DataSeriesItem();
    item.setY(80);
    // item.setColorIndex(2);
    item.setClassName("myClassName");
    DataLabels dataLabelsSeries = new DataLabels();
    dataLabelsSeries.setFormat("<div style=\"text-align:center\"><span style=\"font-size:25px;" + "color:black' + '\">{y}</span><br/>" + "<span style=\"font-size:12px;color:silver\">km/h</span></div>");
    item.setDataLabels(dataLabelsSeries);
    series.add(item);
    configuration.addSeries(series);
    add(chart);
}

Example 5 with Chart

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

the class Spiderweb method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart();
    Configuration configuration = chart.getConfiguration();
    configuration.getChart().setPolar(true);
    configuration.setTitle("Budget vs spending");
    XAxis xAxis = configuration.getxAxis();
    xAxis.setCategories("Sales", "Marketing", "Development", "Customer Support", "Information Technology", "Administration");
    xAxis.setTickmarkPlacement(TickmarkPlacement.ON);
    YAxis yAxis = configuration.getyAxis();
    yAxis.setGridLineInterpolation("polygon");
    yAxis.setMin(0);
    Tooltip tooltip = configuration.getTooltip();
    tooltip.setShared(true);
    tooltip.setPointFormat("<span style=\"color:{series.color}\">{series.name}: <b>${point.y:,.0f}</b><br/>");
    Legend legend = configuration.getLegend();
    legend.setAlign(HorizontalAlign.RIGHT);
    legend.setVerticalAlign(VerticalAlign.TOP);
    legend.setLayout(LayoutDirection.VERTICAL);
    legend.setY(70);
    ListSeries allocatedBudget = new ListSeries("Allocated Budget", 43000, 19000, 60000, 35000, 17000, 10000);
    configuration.addSeries(allocatedBudget);
    ListSeries actualSpending = new ListSeries("Actual Spending", 50000, 39000, 42000, 31000, 26000, 14000);
    configuration.addSeries(actualSpending);
    add(chart);
}