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

Example 1 with Legend

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

Example 2 with Legend

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

the class AreaSpline method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart(ChartType.AREASPLINE);
    Configuration conf = chart.getConfiguration();
    conf.setTitle(new Title("Average fruit consumption during one week"));
    Legend legend = new Legend();
    legend.setLayout(LayoutDirection.VERTICAL);
    legend.setAlign(HorizontalAlign.LEFT);
    legend.setFloating(true);
    legend.setVerticalAlign(VerticalAlign.TOP);
    legend.setX(150);
    legend.setY(100);
    conf.setLegend(legend);
    XAxis xAxis = new XAxis();
    xAxis.setCategories(new String[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" });
    PlotBand plotBand = new PlotBand(4.5, 6.5, SolidColor.BLUE);
    plotBand.setZIndex(1);
    xAxis.setPlotBands(plotBand);
    conf.addxAxis(xAxis);
    YAxis yAxis = new YAxis();
    yAxis.setTitle(new AxisTitle("Fruit units"));
    conf.addyAxis(yAxis);
    Tooltip tooltip = new Tooltip();
    // Customize tooltip formatting
    tooltip.setShared(true);
    tooltip.setValueSuffix(" units");
    conf.setTooltip(tooltip);
    PlotOptionsArea plotOptions = new PlotOptionsArea();
    conf.setPlotOptions(plotOptions);
    ListSeries o = new ListSeries("John", 3, 4, 3, 5, 4, 10);
    // You can also add values separately
    o.addData(12);
    conf.addSeries(o);
    conf.addSeries(new ListSeries("Jane", 1, 3, 4, 3, 3, 5, 4));
    add(chart);
}

Example 3 with Legend

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

the class MultipleAxes method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart();
    Configuration conf = chart.getConfiguration();
    conf.getChart().setZoomType(Dimension.XY);
    conf.setTitle("Average Monthly Weather Data for Tokyo");
    conf.setSubTitle("Source: WorldClimate.com");
    XAxis x = new XAxis();
    x.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    conf.addxAxis(x);
    YAxis y1 = new YAxis();
    y1.setShowEmpty(false);
    y1.setTitle(new AxisTitle("Temperature"));
    Labels labels = new Labels();
    labels.setFormatter("return this.value +'°C'");
    y1.setLabels(labels);
    y1.setOpposite(true);
    y1.setClassName("y1");
    conf.addyAxis(y1);
    YAxis y2 = new YAxis();
    y2.setShowEmpty(false);
    y2.setTitle(new AxisTitle("Rainfall"));
    labels = new Labels();
    labels.setFormatter("return this.value +' mm'");
    y2.setLabels(labels);
    y2.setClassName("y2");
    conf.addyAxis(y2);
    YAxis y3 = new YAxis();
    y3.setShowEmpty(false);
    y3.setTitle(new AxisTitle("Sea-Level Pressure"));
    labels = new Labels();
    labels.setFormatter("return this.value +' mb'");
    y3.setLabels(labels);
    y3.setOpposite(true);
    y3.setClassName("y3");
    conf.addyAxis(y3);
    Tooltip tooltip = new Tooltip();
    tooltip.setFormatter("function() { " + "var unit = { 'Rainfall': 'mm', 'Temperature': '°C', 'Sea-Level Pressure': 'mb' }[this.series.name];" + "return ''+ this.x +': '+ this.y +' '+ unit; }");
    conf.setTooltip(tooltip);
    Legend legend = new Legend();
    legend.setLayout(LayoutDirection.VERTICAL);
    legend.setAlign(HorizontalAlign.LEFT);
    legend.setX(120);
    legend.setVerticalAlign(VerticalAlign.TOP);
    legend.setY(80);
    legend.setFloating(true);
    conf.setLegend(legend);
    DataSeries series = new DataSeries();
    PlotOptionsColumn plotOptionsColumn = new PlotOptionsColumn();
    series.setPlotOptions(plotOptionsColumn);
    series.setName("Rainfall");
    series.setyAxis(1);
    series.setData(49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);
    conf.addSeries(series);
    series = new DataSeries();
    PlotOptionsSpline plotOptionsSpline = new PlotOptionsSpline();
    series.setPlotOptions(plotOptionsSpline);
    series.setName("Sea-Level Pressure");
    series.setyAxis(2);
    series.setData(1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7);
    conf.addSeries(series);
    series = new DataSeries();
    plotOptionsSpline = new PlotOptionsSpline();
    series.setPlotOptions(plotOptionsSpline);
    series.setName("Temperature");
    series.setData(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6);
    conf.addSeries(series);
    add(chart);
}

Example 4 with Legend

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

the class DynamicExtremes method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart();
    Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.LINE);
    configuration.getChart().setMarginRight(130);
    configuration.getChart().setMarginBottom(25);
    configuration.getTitle().setText("Monthly Average Temperature");
    configuration.getSubTitle().setText("Source: WorldClimate.com");
    configuration.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    YAxis yAxis = configuration.getyAxis();
    yAxis.setMin(-10d);
    yAxis.setMax(30d);
    yAxis.setTitle(new AxisTitle("Temperature (°C)"));
    yAxis.getTitle().setAlign(VerticalAlign.HIGH);
    configuration.getTooltip().setFormatter("return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C'");
    PlotOptionsLine plotOptions = new PlotOptionsLine();
    plotOptions.setDataLabels(new DataLabels(true));
    configuration.setPlotOptions(plotOptions);
    Legend legend = configuration.getLegend();
    legend.setLayout(LayoutDirection.VERTICAL);
    legend.setAlign(HorizontalAlign.RIGHT);
    legend.setVerticalAlign(VerticalAlign.TOP);
    legend.setX(-10d);
    legend.setY(100d);
    ListSeries ls = new ListSeries();
    ls.setName("Tokyo");
    ls.setData(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6);
    configuration.addSeries(ls);
    ls = new ListSeries();
    ls.setName("New York");
    ls.setData(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5);
    configuration.addSeries(ls);
    ls = new ListSeries();
    ls.setName("Berlin");
    ls.setData(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0);
    configuration.addSeries(ls);
    ls = new ListSeries();
    ls.setName("London");
    ls.setData(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8);
    configuration.addSeries(ls);
    NativeButton toggleExtremesButton = new NativeButton("Toggle extremes", e -> {
        if (setExtremes) {
            chart.getConfiguration().getyAxes().getAxis(0).setExtremes(10, 15);
        } else {
            chart.getConfiguration().resetZoom();
        }
        setExtremes = !setExtremes;
    });
    toggleExtremesButton.setId("toggleExtremesButton");
    add(chart, toggleExtremesButton);
}

Example 5 with Legend

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

the class Line method initDemo.

@Override
public void initDemo() {
    final Chart chart = new Chart();
    Configuration configuration = chart.getConfiguration();
    configuration.setTitle("Solar Employment Growth by Sector, 2010-2016");
    configuration.setSubTitle("Source: thesolarfoundation.com");
    YAxis yAxis = configuration.getyAxis();
    yAxis.setTitle("Number of Employees");
    Legend legend = configuration.getLegend();
    legend.setLayout(LayoutDirection.VERTICAL);
    legend.setVerticalAlign(VerticalAlign.MIDDLE);
    legend.setAlign(HorizontalAlign.RIGHT);
    PlotOptionsSeries plotOptionsSeries = new PlotOptionsSeries();
    plotOptionsSeries.setPointStart(2010);
    configuration.setPlotOptions(plotOptionsSeries);
    configuration.addSeries(new ListSeries("Installation", 43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175));
    configuration.addSeries(new ListSeries("Manufacturing", 24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434));
    configuration.addSeries(new ListSeries("Sales & Distribution", 11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387));
    configuration.addSeries(new ListSeries("Project Development", null, null, 7988, 12169, 15112, 22452, 34400, 34227));
    configuration.addSeries(new ListSeries("Other", 12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111));
    add(chart);
}