Vaadin Charts Data Types

Luca Magnotta

Hi,

is there any way to pass some additional data to the series object that will use to show in the chart 'tooltip'?

In highchart I can create a Chart which data are made like this:
series: [{ name: 'Foo', data: [ { y : 3, myData : 'firstPoint' }, { y : 7, myData : 'secondPoint' }, { y : 1, myData : 'thirdPoint' } ] }]

i.e. Data Series has these properties:

name
x
y
mydata

so in the tooltip is possible to use 'MyData' property as shown in http://jsfiddle.net/japanick/dWDE6/314/

I can do the same thing using Vaadin Charts and its DataSeries? How?

Thank you all in advance.

Guillermo Alvarez

Hi Luca,

It is possible to add extra data yes.

For the use case you mentioned there's no need to add extra data, you can use DataSeriesItem class which already has 'x', 'y' and 'name' properties.

I did a small example of the chart in your jsfiddle using DataSeriesItem(String name, Number y) constructor and it looks quite simple:

Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getTooltip().setFormatter(
        "'Extra data: <b>' + this.point.name + '</b>'");

DataSeries series = new DataSeries();
series.add(new DataSeriesItem("firstPoint", 3));
series.add(new DataSeriesItem("secondPoint", 7));
series.add(new DataSeriesItem("thirdPoint", 1));
conf.setSeries(series);

If 'name' property is not enough you can extend DataSeriesItem to add extra properties, just be sure that DataSeriesItem makeCustomized method is called at some point so that the point is serialized correctly.

Hope this helps,

Guille

Guillermo Alvarez

The second option would look like this:

public class DataSeriesItemWithExtraProperty extends DataSeriesItem {

    private String myData;

    public DataSeriesItemWithExtraProperty(Number x, Number y, String myData) {
        super(x, y);
        this.myData = myData;
        makeCustomized();
    }

    public String getMyData() {
        return myData;
    }

    public void setMyData(String myData) {
        this.myData = myData;
    }
}

And the chart would be like:

Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getTooltip().setFormatter(
        "'Extra data: <b>' + this.point.myData + '</b>'");

DataSeries series = new DataSeries();
series.add(new DataSeriesItemWithExtraProperty(1, 3, "firstPoint"));
series.add(new DataSeriesItemWithExtraProperty(2, 7, "secondPoint"));
series.add(new DataSeriesItemWithExtraProperty(3, 1, "thirdPoint"));
conf.setSeries(series);

Regards,

Guille

Luca Magnotta

I tried your second option and it works!
Thank you very very very much!

Regards,
Luca

Important Notice - Forums is archived

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

Vaadin Charts Data Types

Important Notice - Forums is archived

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

Vaadin Charts Data Types

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