Vaadin Charts v1.1.1 Can't set Tooltip by PlotOptions

Flow
1

Hi,

If I set a tooltip in the Configuration it is displayed fine.
However I want to set an individual Tooltip for every DataSeries:

	
private PlotOptionsLine getDefaultPlotOptionsLine(int decimalShown) {
		PlotOptionsLine plotOptions = new PlotOptionsLine();
		Tooltip tooltip = new Tooltip();
		tooltip.setFormatter(getTooltipFormatter(decimalShown));
		plotOptions.setTooltip(tooltip);
		plotOptions.setMarker(new Marker(false));
                ...

Setting the Tooltip for a DataSerie by using the PlotOptions seem to be ignored. I checked this by changing the Marker to true, which is working, so the PlotOptions themselves are correctly set. Setting the same Tooltip with the Configuration however works.

Is this a bug or is there another way to set the Tooltip indivually for every DataSeries?

Cheers,
Maarten

2

I still have no solution for this problem.

Is the way I tried to set an individual Tooltip for every DataSeries by the use of PlotOptions a valid way to do this?
Is there another way?
Or is it just not possible?

Cheers,
Maarten

3

Same problem here.

I would consider this a bug …

Or is it just not possible?
The plotoptions have the setToolTip () method. So if its there is must work …

I have an even more strange effect with tooltips and PlotOptionsScatter(): The tooltips from the basic chart config are ignored and just a 1,2,3, … categories series is displayed in the tooltip.

Regards
Gerd

4

Hi!

Does anybody solve this issue?

5

Same issue for me: is it possible to set the tooltip formatting individually per series?

6

Consideration of PlotOptions ToolTips also for Series would be of real value for this excellent add-on.
Example: StackedBars of requires a tool tip which includes the total of the included series.
For further series of the same chart, the total mostly makes no sense.

Any plans for implementation?

7

Hi guys,

For some reason I’ve completely missed this thread, sorry about that.

Unfortunately this seems to be missing from the API. I added this to the product backlog so that it gets added in a future version. Until then, you can fairly easily add the functionality yourself by extending the DataSeries class and adding a getter/setter for Tooltip like so:

public class DataSeriesWithTooltip extends DataSeries {
    private Tooltip tooltip;

    public Tooltip getTooltip() {
        if (tooltip == null) {
            tooltip = new Tooltip();
        }
        return tooltip;
    }

    public void setTooltip(Tooltip tooltip) {
        this.tooltip = tooltip;
    }
}

Use this class instead of the DataSeries class wherever you like to specify the tooltip options for a specific series.

HTH,
/Jonatan

8

Excellent solution!

Easy to consider current Locale.

Thanks, Jonatan

Håkan

9

Hi Jonatan,

Unfortunately the Tooltip set in the Series sub class is not considered;-(

Could you please have a second look?
Below my test code.

Cheers,
Håkan

public class MyUI extends UI {
    private static final long serialVersionUID = -7435249801490407385L;
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        layout.setSizeFull();
        setContent(layout);

        layout.addComponent(buildChart());

    }
    protected Component buildChart() {
        Chart chart = new Chart(ChartType.BAR);

        Configuration conf = chart.getConfiguration();

        conf.setTitle("Stacked bar chart");

        XAxis x = new XAxis();
        x.setCategories("Apples", "Oranges", "Pears", "Grapes", "Bananas");
        conf.addxAxis(x);

        YAxis y = new YAxis();
        y.setMin(0);
        y.setTitle("Total fruit consumption");
        conf.addyAxis(y);

        Legend legend = new Legend();
        legend.setBackgroundColor("#FFFFFF");
        legend.setReversed(true);

        Tooltip stackedBarTooltip = new Tooltip();
        stackedBarTooltip.setFormatter("function() { return ''+ '<b>' + this.x + '</b>: ' + '' " 
        + "+this.series.name +': '+ this.y +''+', Total: '+ this.point.stackTotal; }");
        conf.setTooltip(stackedBarTooltip);

        PlotOptionsSeries stackPlot = new PlotOptionsSeries();
        stackPlot.setStacking(Stacking.NORMAL);
        conf.setPlotOptions(stackPlot);

        ListSeriesWithTooltip prognostedIntake = new ListSeriesWithTooltip("Prognosted Yearly Intake", 10, 14, 15, 13, 9);
        PlotOptionsLine stepPlot = new PlotOptionsLine();
        stepPlot.setStepType(StepType.CENTER);
        Tooltip tooltipPrognose = new Tooltip();
        // No 'Total' in this formatter:
        tooltipPrognose.setFormatter("function() { return ''+ '<b>' + this.x + '</b>: ' + '' " 
                + "+this.series.name +': '+ this.y; }");
        // Has no effect. stackedBarTooltip is used also for prognostedIntake.
        stepPlot.setTooltip(tooltipPrognose);
        prognostedIntake.setPlotOptions(stepPlot);
        // Has no effect.
        prognostedIntake.setTooltip(tooltipPrognose);
        conf.addSeries(prognostedIntake);

        conf.addSeries(new ListSeries("Q4", 3, 4, 4, 2, 5));
        conf.addSeries(new ListSeries("Q3", 3, 4, 4, 2, 5));
        conf.addSeries(new ListSeries("Q2", 2, 2, 3, 2, 1));
        conf.addSeries(new ListSeries("Q1", 5, 3, 4, 7, 2));
        
        conf.getLegend().setReversed(true);

        chart.drawChart(conf);
        
        chart.setHeight("100%");

        return chart;
    }
    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
        private static final long serialVersionUID = 671278797594121042L;
    }
}
10

Hi Håkan,

I tested your code, and indeed it does not work. I did, however, manage to get it to work correctly by using the pointFormat property instead of the formatter property, i.e. specifying the contents of the tooltips using HTML templates instead of JS functions. Changing the two relevant lines as follows makes the tooltips display the correct information:

stackedBarTooltip.setPointFormat("<b>{point.x}</b> {series.name}: {point.y}, Total: {point.stackTotal}"); and

tooltipPrognose.setPointFormat("<b>{point.x}</b>: {series.name}: {point.y}");

HTH,
/Jonatan

11

Terrific!
Yes, this works! I’m happy.

Thanks,
Håkan