Charts 2.1 and Stacked Column/Bar with drilldown

What I need to do is to use the Drilldown feature in a stacked column or bar. Each drilldown will lead to more stacked columns or bars, but I cannot see any drilldown support in a ListSeries in Charts 2.1 and I don’t think one can use a DataSeries in a stacked model.

Any info links or examples would be supremely helpful.

Hi,

As you mentioned drilldown will be supported in Charts 2.1 estimated for this May. At the moment the drilldown documentation and tutorial hasn’t been published.

In Vaadin Charts drilldown is done by defining one Series for one Item. Given that you need to add some extra data for each Item you will need to use DataSeries and DataSeriesItems.

The stacking configuration is done in plotoptions class (PlotOptionsColumn or PlotOptionsBar), and that’s independent of the Series class you use.

To change ListSeries for DataSeries you can consider that:

xAxis.setCategories(new String[] { "Apples", "Oranges" });
...
ListSeries series = new ListSeries("John", new Number[] { 5, 3 });

Is equivalent to:

xAxis.setType(AxisType.CATEGORY);
...
DataSeries series = new DataSeries("John");
series.setData(new String[] { "Apples", "Oranges" }, new Number[]
 { 5, 3 });

That should be enough to create stacked columns/bars with DataSeries.

But series.setData is not enough to enable drilldown, since you can’t specify which is the drilldown series to be used when the users clicks in a point or a category label. In this case series.addItemWithDrilldown is used in the following way:

DataSeries series = new DataSeries("John"); Series drillDownSeries = ...// create Series to be used when item is clicked series.addItemWithDrilldown(new DataSeriesItem("Apples", 5), drillDownSeries); A more complete example would be like:

DataSeries john = new DataSeries("John");
DataSeries johnApples = new DataSeries("John");
johnApples.setData(new String[] { "Morning", "Night" }, new Number[]
 { 4, 1 });
johnApples.setId("JohnApples");
john.addItemWithDrilldown(new DataSeriesItem("Apples", 5), johnApples);
DataSeries johnOranges = new DataSeries("John");
johnOranges.setData(new String[] { "Morning", "Night" }, new Number[]
 { 1, 2 });
johnOranges.setId("JohnOranges");
john.addItemWithDrilldown(new DataSeriesItem("Oranges", 3), johnOranges);

DataSeries jane = new DataSeries("Jane");
DataSeries janeApples = new DataSeries("Jane");
janeApples.setData(new String[] { "Morning", "Night" }, new Number[]
 { 1, 1 });
janeApples.setId("JaneApples");
jane.addItemWithDrilldown(new DataSeriesItem("Apples", 2), janeApples);
DataSeries janeOranges = new DataSeries("Jane");
janeOranges.setData(new String[] { "Morning", "Night" }, new Number[]
 { 1, 1 });
janeOranges.setId("JaneOranges");
jane.addItemWithDrilldown(new DataSeriesItem("Oranges", 2), janeOranges);

conf.setSeries(john, jane);

This example has two stacked DataSeries. Each one has two Items, one for each category ( Apples and Oranges). And each one of the four Items has a drilldown series (John Apples, John Oranges, Jane Apples and Jane Oranges). Clicking in one Item will animate and show a chart with the item drilldown series, while clicking in the category label will animate and show a chart with the series of all the Items in the clicked category. I’ve attached some screenshots in case you’re not able to run the example at the moment.

19117.png
19118.png
19119.png

Hi Guillermo ,

I see some error with registering RPC implementation for Chart class, where the clicks are not having any action. I am fairly new to Vaadin and as there wasnt any documentation, could you please point to some place where I could get this in detail? Maybe a GitHub proj or code snippet?

thanks,
Pavan

Hi Pavan,

I’m not sure I understand the error you’re having. The error trace or code to reproduce it would help.

You can check the Book of Vaadin section about Vaadin Charts: https://vaadin.com/book/vaadin7/-/page/charts.html
and the Vaadin Charts tutorial: https://vaadin.com/wiki/-/wiki/10674/Vaadin+Charts+Tutorial
to get started.

Also Vaadin Charts demo contains a tab showing the code for each demo: http://demo.vaadin.com/charts/#BarWithNegativeStack

Hope that helps!