Search in sources :

Example 1 with Labels

use of com.vaadin.flow.component.charts.model.Labels 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 2 with Labels

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

the class DynamicChangingChart method getPolarConfiguration.

public Configuration getPolarConfiguration() {
    Configuration configuration = new Configuration();
    configuration.getChart().setPolar(true);
    configuration.setTitle("Polar Chart");
    Pane pane = new Pane(0, 360);
    configuration.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);
    configuration.addxAxis(xAxis);
    configuration.addyAxis(yAxis);
    PlotOptionsSeries series = new PlotOptionsSeries();
    PlotOptionsColumn column = new PlotOptionsColumn();
    series.setPointStart(0);
    series.setPointInterval(45);
    column.setPointPadding(0);
    column.setGroupPadding(0);
    configuration.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());
    configuration.setSeries(col, line, area);
    return configuration;
}
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) 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 Labels

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

the class ErrorBar method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart();
    Configuration configuration = chart.getConfiguration();
    configuration.setTitle("Monthly Rainfall");
    XAxis x = new XAxis();
    x.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    configuration.addxAxis(x);
    YAxis y = new YAxis();
    Labels yLabels = new Labels();
    yLabels.setFormat("{value} mm");
    y.setLabels(yLabels);
    y.setTitle("Rainfall");
    configuration.addyAxis(y);
    Tooltip tooltip = new Tooltip();
    tooltip.setShared(true);
    configuration.setTooltip(tooltip);
    Series rainfall = new ListSeries("Rainfall", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);
    PlotOptionsColumn rainfallOptions = new PlotOptionsColumn();
    SeriesTooltip rainfallTooltip = new SeriesTooltip();
    rainfallTooltip.setPointFormat("<span style=\"font-weight: bold; color: {series.color}\">" + "{series.name}</span>: <b>{point.y:.1f} mm</b> ");
    rainfallOptions.setTooltip(rainfallTooltip);
    rainfall.setPlotOptions(rainfallOptions);
    configuration.addSeries(rainfall);
    Series error = new RangeSeries("Rainfall error", new Number[] { 48, 51 }, new Number[] { 68, 73 }, new Number[] { 92, 110 }, new Number[] { 128, 136 }, new Number[] { 140, 150 }, new Number[] { 171, 179 }, new Number[] { 135, 143 }, new Number[] { 142, 149 }, new Number[] { 204, 220 }, new Number[] { 189, 199 }, new Number[] { 95, 110 }, new Number[] { 52, 56 });
    PlotOptionsErrorbar errorOptions = new PlotOptionsErrorbar();
    SeriesTooltip errorTooltip = new SeriesTooltip();
    errorTooltip.setPointFormat("(error range: {point.low}-{point.high} mm)<br/>");
    errorOptions.setTooltip(errorTooltip);
    error.setPlotOptions(errorOptions);
    configuration.addSeries(error);
    add(chart);
}
Also used : RangeSeries(com.vaadin.flow.component.charts.model.RangeSeries) ListSeries(com.vaadin.flow.component.charts.model.ListSeries) Series(com.vaadin.flow.component.charts.model.Series) PlotOptionsErrorbar(com.vaadin.flow.component.charts.model.PlotOptionsErrorbar) Configuration(com.vaadin.flow.component.charts.model.Configuration) ListSeries(com.vaadin.flow.component.charts.model.ListSeries) PlotOptionsColumn(com.vaadin.flow.component.charts.model.PlotOptionsColumn) RangeSeries(com.vaadin.flow.component.charts.model.RangeSeries) Tooltip(com.vaadin.flow.component.charts.model.Tooltip) SeriesTooltip(com.vaadin.flow.component.charts.model.SeriesTooltip) Labels(com.vaadin.flow.component.charts.model.Labels) Chart(com.vaadin.flow.component.charts.Chart) XAxis(com.vaadin.flow.component.charts.model.XAxis) YAxis(com.vaadin.flow.component.charts.model.YAxis) SeriesTooltip(com.vaadin.flow.component.charts.model.SeriesTooltip)

Example 4 with Labels

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

the class Gauge 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");
    configuration.getChart().setWidth(500);
    Pane pane = configuration.getPane();
    pane.setStartAngle(-150);
    pane.setEndAngle(150);
    YAxis yAxis = new YAxis();
    yAxis.setTitle("km/h");
    yAxis.setMin(0);
    yAxis.setMax(200);
    yAxis.setTickLength(10);
    yAxis.setTickPixelInterval(30);
    yAxis.setTickPosition(TickPosition.INSIDE);
    yAxis.setMinorTickLength(10);
    yAxis.setMinorTickInterval("auto");
    yAxis.setMinorTickPosition(TickPosition.INSIDE);
    Labels labels = new Labels();
    labels.setStep(2);
    labels.setRotation("auto");
    yAxis.setLabels(labels);
    PlotBand[] bands = new PlotBand[3];
    bands[0] = new PlotBand();
    bands[0].setFrom(0);
    bands[0].setTo(120);
    bands[0].setClassName("band-0");
    bands[1] = new PlotBand();
    bands[1].setFrom(120);
    bands[1].setTo(160);
    bands[1].setClassName("band-1");
    bands[2] = new PlotBand();
    bands[2].setFrom(160);
    bands[2].setTo(200);
    bands[2].setClassName("band-2");
    yAxis.setPlotBands(bands);
    configuration.addyAxis(yAxis);
    final ListSeries series = new ListSeries("Speed", 89);
    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    SeriesTooltip tooltip = new SeriesTooltip();
    tooltip.setValueSuffix(" km/h");
    plotOptionsGauge.setTooltip(tooltip);
    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);
    add(chart);
}
Also used : PlotOptionsGauge(com.vaadin.flow.component.charts.model.PlotOptionsGauge) 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) Pane(com.vaadin.flow.component.charts.model.Pane) PlotBand(com.vaadin.flow.component.charts.model.PlotBand) Chart(com.vaadin.flow.component.charts.Chart) YAxis(com.vaadin.flow.component.charts.model.YAxis) SeriesTooltip(com.vaadin.flow.component.charts.model.SeriesTooltip)

Example 5 with Labels

use of com.vaadin.flow.component.charts.model.Labels 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);
}
Also used : Legend(com.vaadin.flow.component.charts.model.Legend) Configuration(com.vaadin.flow.component.charts.model.Configuration) PlotOptionsColumn(com.vaadin.flow.component.charts.model.PlotOptionsColumn) Tooltip(com.vaadin.flow.component.charts.model.Tooltip) Labels(com.vaadin.flow.component.charts.model.Labels) DataSeries(com.vaadin.flow.component.charts.model.DataSeries) PlotOptionsSpline(com.vaadin.flow.component.charts.model.PlotOptionsSpline) AxisTitle(com.vaadin.flow.component.charts.model.AxisTitle) 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)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