Vaadin Charts Data Types

Flow
1

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.

2

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:

[code]
Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getTooltip().setFormatter(
“‘Extra data: ’ + this.point.name + ‘’”);

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);
[/code]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

3

The second option would look like this:

[code]
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;
}

}
[/code]And the chart would be like:

[code]
Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getTooltip().setFormatter(
“‘Extra data: ’ + this.point.myData + ‘’”);

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);
[/code]Regards,

Guille

4

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

Regards,
Luca