Vaadin Charts: stacked column chart with multiple DataSeries/DataSeriesItem

Flow
1

Hi,

this is pretty much the same as the
ColumnRangeResourceUsage Demo

I use a chart of ChartType.COLUMNRANGE with 3 DataSeries (A, B, C - should reflect the status of a machine in a period of time). These items should be in a single row. So far as soon as I add a second DataSeriesItem to a DataSeries there’s a new row (see attached image).
Has anyone an idea how to do this? I know it would be possible to use multiple DataSeries with only 1 DataSeriesItem but I don’t like this as the legend would not work…

Thanks,
Klaus

        Chart chart = new Chart(ChartType.COLUMNRANGE);
        
        
        Configuration conf = chart.getConfiguration();
        conf.setTitle("Resource usage");
        conf.getChart().setInverted(true);
        
        PlotOptionsColumnrange columnRange = new PlotOptionsColumnrange();
        columnRange.setGrouping(false);
        DataLabelsRange dataLabels = new DataLabelsRange(true);
        dataLabels
                .setFormatter("this.y == this.point.low ? '' : this.series.name");
        dataLabels.setInside(true);
        dataLabels.setColor(new SolidColor("white"));
        columnRange.setDataLabels(dataLabels);
        columnRange.setGrouping(false);

        conf.setPlotOptions(columnRange);
        
        Calendar instance = Calendar.getInstance();
        instance.set(Calendar.MILLISECOND, 0);
        instance.set(2013, 6, 7, 12, 00, 00);

        DataSeries a = new DataSeries();
        a.setName("A");
        PlotOptionsColumnrange o = new PlotOptionsColumnrange();
        o.setColor(SolidColor.RED);
        a.setPlotOptions(o);
        o.setGrouping(true);
        
        DataSeries b = new DataSeries();
        o = new PlotOptionsColumnrange();
        o.setColor(SolidColor.GREEN);
        b.setPlotOptions(o);
        b.setName("B");
        
        DataSeries c = new DataSeries();
        o = new PlotOptionsColumnrange();
        o.setColor(SolidColor.ORANGE);
        c.setPlotOptions(o);
        c.setName("C");
        
        DataSeriesItem item;

        item = new DataSeriesItem();
        item.setName("Printer");
        item.setLow(instance.getTimeInMillis());
        instance.roll(Calendar.HOUR_OF_DAY, 3);
        item.setHigh(instance.getTimeInMillis());
        a.add(item);

        item = new DataSeriesItem();
        item.setName("Printer");
        instance.roll(Calendar.HOUR_OF_DAY, 1);
        item.setLow(instance.getTimeInMillis());
        instance.roll(Calendar.HOUR_OF_DAY, 1);
        item.setHigh(instance.getTimeInMillis());
        b.add(item);
        
        item = new DataSeriesItem();
        item.setName("Printer");
        item.setLow(instance.getTimeInMillis());
        instance.roll(Calendar.HOUR_OF_DAY, 3);
        item.setHigh(instance.getTimeInMillis());
        a.add(item);
        
        item = new DataSeriesItem();
        item.setName("Printer");
        item.setLow(instance.getTimeInMillis());
        instance.roll(Calendar.HOUR_OF_DAY, 3);
        item.setHigh(instance.getTimeInMillis());
        c.add(item);
        
        conf.setSeries(a, b, c);
        
        layout.addComponent(chart);

26110.png

2

Hi Klaus,

If you want to show all columns in same “row” you need to force them to be in the same “category”. That can be done by setting the item X value.

By default each column in a data series has it’s own category or X value.

Doing

item.setX(0);

to all items in DataSeries a of your example seems to fix the issue.

Also

conf.getyAxis().setType(AxisType.DATETIME);

will make the axis labels more readable.

Remember than X and Y axes are swapped because the chart was inverted.

Hope this helps,

Guille

3

Also, if needed, you can add all the items in a single dataseries and set color to individual items in the following way:

        item.setColor(LIGHT_GRAY);
4

I knew how to change the color, but I did not know of setting the series/category.
Great, thank you!

5

Glad it worked!