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

Example 1 with Tooltip

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

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

Example 3 with Tooltip

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

the class Flags method initDemo.

@Override
public void initDemo() {
    Chart chart = new Chart(ChartType.AREASPLINE);
    Configuration configuration = chart.getConfiguration();
    configuration.setTitle("Average fruit consumption during one week");
    XAxis xAxis = new XAxis();
    xAxis.setCategories("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
    configuration.addxAxis(xAxis);
    YAxis yAxis = new YAxis();
    yAxis.setTitle("Fruit units");
    configuration.addyAxis(yAxis);
    Tooltip tooltip = new Tooltip();
    tooltip.setShared(true);
    tooltip.setValueSuffix(" units");
    configuration.setTooltip(tooltip);
    configuration.addSeries(new ListSeries("John", 3, 4, 3, 5, 4, 10, 12));
    ListSeries janeSeries = new ListSeries("Jane", 1, 3, 4, 3, 3, 5, 4);
    janeSeries.setId("jane");
    configuration.addSeries(janeSeries);
    DataSeries onSeriesFlags = new DataSeries("On series");
    PlotOptionsFlags onSeriesFlagsOptions = new PlotOptionsFlags();
    onSeriesFlagsOptions.setOnSeries("jane");
    onSeriesFlagsOptions.setShape(FlagShape.SQUAREPIN);
    onSeriesFlags.setPlotOptions(onSeriesFlagsOptions);
    onSeriesFlags.add(new FlagItem(2, "On series"));
    onSeriesFlags.add(new FlagItem(5, "On series"));
    configuration.addSeries(onSeriesFlags);
    DataSeries onAxisFlags = new DataSeries("On axis");
    onAxisFlags.setPlotOptions(new PlotOptionsFlags());
    onAxisFlags.add(new FlagItem(3, "On axis"));
    configuration.addSeries(onAxisFlags);
    add(chart);
}

Example 4 with Tooltip

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

the class GlobalOptions method initDemo.

@Override
public void initDemo() {
    List<Chart> charts = new ArrayList();
    NativeButton changeTitleButton = new NativeButton();
    changeTitleButton.setId("add_chart");
    changeTitleButton.setText("Add chart");
    changeTitleButton.addClickListener(e -> {
        final Chart chart = new Chart();
        Configuration configuration = chart.getConfiguration();
        configuration.setTitle("First Chart for Flow");
        chart.getConfiguration().getChart().setType(ChartType.AREA);
        Tooltip tooltip = configuration.getTooltip();
        tooltip.setEnabled(true);
        tooltip.setShared(true);
        PlotOptionsSeries options = new PlotOptionsSeries();
        options.setPointStart(0);
        options.setPointIntervalUnit(IntervalUnit.DAY);
        configuration.setPlotOptions(options);
        configuration.addSeries(new ListSeries("Tokyo", 20, 12, 34, 23, 65, 8, 4, 7, 76, 19, 20, 8));
        configuration.addSeries(new ListSeries("Miami", 34, 29, 23, 65, 8, 4, 7, 7, 59, 8, 9, 19));
        XAxis x = new XAxis();
        x.setType(AxisType.DATETIME);
        x.getLabels().setFormat("{value:%a}");
        configuration.addxAxis(x);
        YAxis y = new YAxis();
        y.setMin(0);
        y.setTitle("Rainfall (mm)");
        configuration.addyAxis(y);
        charts.add(chart);
        add(chart);
    });
    add(changeTitleButton);
    NativeButton changeLangButton = new NativeButton();
    changeLangButton.setId("change_lang");
    changeLangButton.setText("Change lang");
    changeLangButton.addClickListener(e -> {
        Lang lang = new Lang();
        lang.setShortMonths(new String[] { "Tammi", "Helmi", "Maalis", "Huhti", "Touko", "Kesä", "Heinä", "Elo", "Syys", "Loka", "Marras", "Joulu" });
        lang.setMonths(new String[] { "Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu", "Toukokuu", "Kesäkuu", "Heinäkuu", "Elokuu", "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu" });
        lang.setWeekdays(new String[] { "Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai" });
        lang.setShortWeekdays(new String[] { "su", "ma", "ti", "ke", "to", "pe", "la" });
        ChartOptions.get().setLang(lang);
    });
    add(changeLangButton);
    NativeButton changeThemeLightButton = new NativeButton();
    changeThemeLightButton.setId("change_theme_light");
    changeThemeLightButton.setText("Change theme light");
    changeThemeLightButton.addClickListener(e -> {
        ChartOptions.get().setTheme(new LumoLightTheme());
        for (Chart chart : charts) {
            chart.drawChart(true);
        }
    });
    add(changeThemeLightButton);
    NativeButton changeThemeDarkButton = new NativeButton();
    changeThemeDarkButton.setId("change_theme_dark");
    changeThemeDarkButton.setText("Change theme Dark");
    changeThemeDarkButton.addClickListener(e -> {
        ChartOptions.get().setTheme(new LumoDarkTheme());
        for (Chart chart : charts) {
            chart.drawChart(true);
        }
    });
    add(changeThemeDarkButton);
}

Example 5 with Tooltip

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

the class SVGGeneratorTest method exportWithTimeline.

@Test
public void exportWithTimeline() throws IOException, InterruptedException {
    Configuration configuration = new Configuration();
    configuration.getChart().setType(ChartType.AREASPLINERANGE);
    configuration.getTitle().setText("Temperature variation by day");
    Tooltip tooltip = configuration.getTooltip();
    tooltip.setValueSuffix("°C");
    DataSeries dataSeries = new DataSeries("Temperatures");
    for (StockPrices.RangeData data : StockPrices.fetchDailyTempRanges()) {
        dataSeries.add(new DataSeriesItem(data.getDate(), data.getMin(), data.getMax()));
    }
    configuration.setSeries(dataSeries);
    ExportOptions options = new ExportOptions();
    options.setTimeline(true);
    Path expectedFilePath = Paths.get("src", "test", "resources", "timeline.svg");
    String expectedSVG = readUtf8File(expectedFilePath);
    String actualSVG = svgGenerator.generate(configuration, options);
    assertEquals(replaceIds(expectedSVG), replaceIds(actualSVG));
}