Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Vaadin Charts with x, y and timestamp values

George Bougiakas
5 years ago Mar 15, 2017 12:33pm
Johannes Häyry
5 years ago Mar 16, 2017 5:52am
George Bougiakas
5 years ago Mar 16, 2017 7:44am
Johannes Häyry
5 years ago Mar 16, 2017 9:05am

With "the name property id should work" I meant that I didn't see any issue in your code, so I am puzzled why doesn't it work.

You can add any bean that extends DataSeriesItem. Then you can add access your custom property in Tooltip format.

George Bougiakas
5 years ago Mar 16, 2017 9:54am
George Bougiakas
5 years ago Mar 16, 2017 10:19am
Guillermo Alvarez
5 years ago Mar 16, 2017 2:38pm

Hi George,

I did a small POC using the name property and it seems to work

Chart chart = new Chart(ChartType.SCATTER);
DataSeries dataSeries = new DataSeries();

DataSeriesItem item = new DataSeriesItem(1, 1);
//you can use the name to set your custom SimpleDateFormat formatted date
item.setName("12/3");
dataSeries.add(item);
item = new DataSeriesItem(3, 2);
item.setName("18/3");
dataSeries.add(item);
item = new DataSeriesItem(5, 4);
item.setName("02/3");
dataSeries.add(item);

Configuration configuration = chart.getConfiguration();
configuration.addSeries(dataSeries);
Tooltip tooltip = new Tooltip();
tooltip.setUseHTML(true);

//Because it's the header you should use key property, 
tooltip.setHeaderFormat("<small>Date: {point.key}</small><table>");

//you can use point.name in point format
tooltip.setPointFormat(
        "<tr><td style=\"color: {series.color}\">x: </td><td style=\"text-align: right\"><b>{point.x}</b></td></tr>"
                + "<tr><td style=\"color: {series.color}\">y: </td><td style=\"text-align: right\"><b>{point.y}</b></td></tr>");
tooltip.setFooterFormat("</table>");
configuration.setTooltip(tooltip);
return chart;

The result is a scatter chart with the name displayed in the tooltip header as shown in the attachment.

The other option I tried and seems to work in the same way is by just using tooltip.setPointFormat and not using header nor footer:

tooltip.setHeaderFormat("");

// you can use point.name in point format
tooltip.setPointFormat(
        "<small>Date: {point.name}</small><table><tr><td style=\"color: {series.color}\">x: </td><td style=\"text-align: right\"><b>{point.x}</b></td></tr>"
                + "<tr><td style=\"color: {series.color}\">y: </td><td style=\"text-align: right\"><b>{point.y}</b></td></tr></table>");

Also note I'm not setting shared to true, although that doesn't seem to affect as scatter charts do not share tooltips.

Hope this helps,

Guille
 

George Bougiakas
5 years ago Mar 16, 2017 3:12pm
Guillermo Alvarez
5 years ago Mar 16, 2017 3:19pm
George Bougiakas
5 years ago Mar 16, 2017 3:19pm
George Bougiakas
5 years ago Mar 16, 2017 3:21pm
Guillermo Alvarez
5 years ago Mar 16, 2017 3:25pm

One step at a time :P

I guess that in the browser console you're getting the following error: "Highcharts error #12: www.highcharts.com/errors/12"

It is related to an optimization done to data serialization, if data is simple (only has X and Y values) it's serialized as an 2D array and that works for the underlying charts library. Once the name is added it becomes complex and it's serialized as an array of JSON objects.

The large complex data issue can be fixed by adding the following code:

PlotOptionsSeries options = new PlotOptionsSeries();
        options.setTurboThreshold(0);
        configuration.addPlotOptions(options);

Try it and let me know how it goes

George Bougiakas
5 years ago Mar 17, 2017 9:25am
Guillermo Alvarez
5 years ago Mar 17, 2017 9:43am
George Bougiakas
5 years ago Mar 17, 2017 10:31am