Search in sources :

Example 1 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration 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);
}
Also used : Configuration(com.vaadin.flow.component.charts.model.Configuration) NodeSeries(com.vaadin.flow.component.charts.model.NodeSeries) Chart(com.vaadin.flow.component.charts.Chart)

Example 2 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration 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);
}
Also used : Configuration(com.vaadin.flow.component.charts.model.Configuration) PlotOptionsColumn(com.vaadin.flow.component.charts.model.PlotOptionsColumn) ListSeries(com.vaadin.flow.component.charts.model.ListSeries) PlotOptionsLine(com.vaadin.flow.component.charts.model.PlotOptionsLine) PlotOptionsArea(com.vaadin.flow.component.charts.model.PlotOptionsArea) Labels(com.vaadin.flow.component.charts.model.Labels) Pane(com.vaadin.flow.component.charts.model.Pane) Chart(com.vaadin.flow.component.charts.Chart) XAxis(com.vaadin.flow.component.charts.model.XAxis) PlotOptionsSeries(com.vaadin.flow.component.charts.model.PlotOptionsSeries) YAxis(com.vaadin.flow.component.charts.model.YAxis)

Example 3 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration 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);
}
Also used : DataLabelsFunnel(com.vaadin.flow.component.charts.model.DataLabelsFunnel) Configuration(com.vaadin.flow.component.charts.model.Configuration) PlotOptionsPyramid(com.vaadin.flow.component.charts.model.PlotOptionsPyramid) DataSeries(com.vaadin.flow.component.charts.model.DataSeries) Chart(com.vaadin.flow.component.charts.Chart) DataSeriesItem(com.vaadin.flow.component.charts.model.DataSeriesItem)

Example 4 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration 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);
}
Also used : DataLabels(com.vaadin.flow.component.charts.model.DataLabels) Configuration(com.vaadin.flow.component.charts.model.Configuration) Background(com.vaadin.flow.component.charts.model.Background) DataSeries(com.vaadin.flow.component.charts.model.DataSeries) Pane(com.vaadin.flow.component.charts.model.Pane) PlotOptionsSolidgauge(com.vaadin.flow.component.charts.model.PlotOptionsSolidgauge) Chart(com.vaadin.flow.component.charts.Chart) DataSeriesItem(com.vaadin.flow.component.charts.model.DataSeriesItem) YAxis(com.vaadin.flow.component.charts.model.YAxis)

Example 5 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration 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);
}
Also used : Legend(com.vaadin.flow.component.charts.model.Legend) Configuration(com.vaadin.flow.component.charts.model.Configuration) ListSeries(com.vaadin.flow.component.charts.model.ListSeries) Tooltip(com.vaadin.flow.component.charts.model.Tooltip) Chart(com.vaadin.flow.component.charts.Chart) XAxis(com.vaadin.flow.component.charts.model.XAxis) YAxis(com.vaadin.flow.component.charts.model.YAxis)

Aggregations

Configuration (com.vaadin.flow.component.charts.model.Configuration)72 Chart (com.vaadin.flow.component.charts.Chart)48 DataSeries (com.vaadin.flow.component.charts.model.DataSeries)32 YAxis (com.vaadin.flow.component.charts.model.YAxis)32 XAxis (com.vaadin.flow.component.charts.model.XAxis)25 ListSeries (com.vaadin.flow.component.charts.model.ListSeries)24 DataSeriesItem (com.vaadin.flow.component.charts.model.DataSeriesItem)20 Tooltip (com.vaadin.flow.component.charts.model.Tooltip)19 Test (org.junit.Test)16 DataLabels (com.vaadin.flow.component.charts.model.DataLabels)12 PlotOptionsColumn (com.vaadin.flow.component.charts.model.PlotOptionsColumn)10 Path (java.nio.file.Path)10 PlotOptionsSeries (com.vaadin.flow.component.charts.model.PlotOptionsSeries)9 AxisTitle (com.vaadin.flow.component.charts.model.AxisTitle)8 Legend (com.vaadin.flow.component.charts.model.Legend)8 Labels (com.vaadin.flow.component.charts.model.Labels)7 StockPrices (com.vaadin.flow.component.charts.examples.timeline.util.StockPrices)6 RangeSelector (com.vaadin.flow.component.charts.model.RangeSelector)5 SeriesTooltip (com.vaadin.flow.component.charts.model.SeriesTooltip)5 Pane (com.vaadin.flow.component.charts.model.Pane)4