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

Example 1 with PlotLine

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

the class ServerSideEvents method initDemo.

@Override
public void initDemo() {
    historyLayout = new OrderedList();
    historyLayout.setId("history");
    chart = new Chart();
    chart.setId("chart");
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setWidth(500);
    configuration.getChart().setType(ChartType.SCATTER);
    configuration.getTitle().setText("Test server side events.");
    configuration.getSubTitle().setText("When an event occurs, the details are shown below the chart");
    configuration.setExporting(true);
    configuration.getChart().setAnimation(false);
    configuration.getChart().setZoomType(Dimension.XY);
    configuration.getAccessibility().setEnabled(false);
    XAxis xAxis = configuration.getxAxis();
    xAxis.setMinPadding(0.2);
    xAxis.setMaxPadding(0.2);
    YAxis yAxis = configuration.getyAxis();
    yAxis.setTitle(new AxisTitle("Value"));
    PlotLine plotline = new PlotLine();
    plotline.setValue(0);
    plotline.setWidth(1);
    plotline.setColor(new SolidColor("#808080"));
    yAxis.setPlotLines(plotline);
    yAxis.setMinPadding(0.2);
    yAxis.setMaxPadding(0.2);
    YAxis yAxis1 = new YAxis();
    yAxis1.setTitle("Another axis");
    yAxis1.setOpposite(true);
    configuration.addyAxis(yAxis1);
    PlotOptionsSeries opt = new PlotOptionsSeries();
    opt.setShowCheckbox(true);
    opt.setAllowPointSelect(true);
    configuration.setPlotOptions(opt);
    configuration.setTooltip(new Tooltip(false));
    final DataSeries series1 = createDataSeries(0);
    final DataSeries series2 = createDataSeries(20);
    DataSeries series3 = createDataSeries(100);
    series3.get(0).setY(105);
    series3.get(3).setY(95);
    series3.setName("Another axis");
    series3.setyAxis(1);
    DataSeriesItem firstDataPoint = series1.get(0);
    firstDataPoint.setSelected(true);
    configuration.setSeries(series1, series2, series3);
    chart.addChartClickListener(this::logEvent);
    chart.addPointClickListener(this::logEvent);
    chart.addCheckBoxClickListener(this::logEvent);
    chart.addSeriesLegendItemClickListener(this::logEvent);
    chart.addSeriesHideListener(this::logEvent);
    chart.addSeriesShowListener(this::logEvent);
    chart.addPointSelectListener(this::logEvent);
    chart.addPointUnselectListener(this::logEvent);
    chart.addYAxesExtremesSetListener(this::logEvent);
    chart.drawChart();
    chart.setVisibilityTogglingDisabled(false);
    VerticalLayout layout = new VerticalLayout();
    layout.setId("master");
    layout.add(createControls());
    layout.add(new H2("Event History"), historyLayout);
    add(chart, layout);
}

Example 2 with PlotLine

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

the class BoxPlot method initDemo.

@Override
public void initDemo() {
    final Chart chart = new Chart();
    chart.getConfiguration().setTitle("Box Plot Example");
    Legend legend = new Legend();
    legend.setEnabled(false);
    chart.getConfiguration().setLegend(legend);
    XAxis xaxis = chart.getConfiguration().getxAxis();
    xaxis.setTitle("Experiment No.");
    xaxis.setCategories("1", "2", "3", "4", "5");
    YAxis yAxis = chart.getConfiguration().getyAxis();
    yAxis.setTitle("Observations");
    PlotLine plotLine = new PlotLine();
    plotLine.setValue(932);
    plotLine.setZIndex(0);
    Label label = new Label("Theoretical mean: 932");
    label.setAlign(HorizontalAlign.CENTER);
    plotLine.setLabel(label);
    yAxis.setPlotLines(plotLine);
    final DataSeries observations = new DataSeries();
    observations.setName("Observations");
    // Add PlotBoxItems contain all fields relevant for plot box chart
    observations.add(new BoxPlotItem(760, 801, 848, 895, 965));
    // Example with no arg constructor
    BoxPlotItem plotBoxItem = new BoxPlotItem();
    plotBoxItem.setLow(733);
    plotBoxItem.setLowerQuartile(853);
    plotBoxItem.setMedian(939);
    plotBoxItem.setUpperQuartile(980);
    plotBoxItem.setHigh(1080);
    observations.add(plotBoxItem);
    observations.add(new BoxPlotItem(714, 762, 817, 870, 918));
    observations.add(new BoxPlotItem(724, 802, 806, 871, 950));
    observations.add(new BoxPlotItem(834, 836, 864, 882, 910));
    PlotOptionsBoxplot plotOptions = new PlotOptionsBoxplot();
    SeriesTooltip observationsTooltip = new SeriesTooltip();
    observationsTooltip.setHeaderFormat("<em>Experiment No {point.key}</em><br/>");
    plotOptions.setTooltip(observationsTooltip);
    observations.setPlotOptions(plotOptions);
    chart.getConfiguration().addSeries(observations);
    final DataSeries outlier = new DataSeries();
    outlier.setName("Outlier");
    outlier.add(new DataSeriesItem(0, 644));
    outlier.add(new DataSeriesItem(4, 718));
    outlier.add(new DataSeriesItem(4, 951));
    outlier.add(new DataSeriesItem(4, 969));
    PlotOptionsScatter outlierOptions = new PlotOptionsScatter();
    SeriesTooltip outlierTooltip = new SeriesTooltip();
    outlierTooltip.setPointFormat("Observation: {point.y}");
    outlierOptions.setTooltip(outlierTooltip);
    outlier.setPlotOptions(outlierOptions);
    chart.getConfiguration().addSeries(outlier);
    Checkbox useCustomStyles = new Checkbox("Use custom styling");
    useCustomStyles.addValueChangeListener(e -> {
        PlotOptionsBoxplot options = new PlotOptionsBoxplot();
        if (e.getValue()) {
            options.setClassName("custom-style");
            options.setWhiskerLength("70");
        }
        observations.setPlotOptions(options);
        chart.drawChart(true);
    });
    add(chart, useCustomStyles);
}

Example 3 with PlotLine

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

the class CompareMultipleSeries method initDemo.

@Override
public void initDemo() {
    final Chart chart = new Chart();
    chart.setTimeline(true);
    Configuration configuration = chart.getConfiguration();
    configuration.getTitle().setText("AAPL Stock Price");
    YAxis yAxis = new YAxis();
    Labels label = new Labels();
    label.setFormatter("function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }");
    yAxis.setLabels(label);
    PlotLine plotLine = new PlotLine();
    plotLine.setValue(2);
    plotLine.setWidth(2);
    yAxis.setPlotLines(plotLine);
    configuration.addyAxis(yAxis);
    Tooltip tooltip = new Tooltip();
    tooltip.setPointFormat("<span>{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>");
    tooltip.setValueDecimals(2);
    configuration.setTooltip(tooltip);
    DataSeries aaplSeries = new DataSeries();
    aaplSeries.setName("AAPL");
    for (StockPrices.PriceData data : StockPrices.fetchAaplPrice()) {
        DataSeriesItem item = new DataSeriesItem();
        item.setX(data.getDate());
        item.setY(data.getPrice());
        aaplSeries.add(item);
    }
    DataSeries googSeries = new DataSeries();
    googSeries.setName("GOOG");
    for (StockPrices.PriceData data : StockPrices.fetchGoogPrice()) {
        DataSeriesItem item = new DataSeriesItem();
        item.setX(data.getDate());
        item.setY(data.getPrice());
        googSeries.add(item);
    }
    DataSeries msftSeries = new DataSeries();
    msftSeries.setName("MSFT");
    for (StockPrices.PriceData data : StockPrices.fetchMsftPrice()) {
        DataSeriesItem item = new DataSeriesItem();
        item.setX(data.getDate());
        item.setY(data.getPrice());
        msftSeries.add(item);
    }
    configuration.setSeries(aaplSeries, googSeries, msftSeries);
    PlotOptionsSeries plotOptionsSeries = new PlotOptionsSeries();
    plotOptionsSeries.setCompare(Compare.PERCENT);
    configuration.setPlotOptions(plotOptionsSeries);
    RangeSelector rangeSelector = new RangeSelector();
    rangeSelector.setSelected(4);
    configuration.setRangeSelector(rangeSelector);
    add(chart);
}