Vaadin Basic Colum Chart - Series

Hi,

i have a problem with organising my dataset for basic column chart like this: https://demo.vaadin.com/charts/#BasicColumn

In my case i have a poll with 20 questions and they all have between 2 and 5 possible answers. The one who creates the poll can choose for every question between 2 and 5 checkboxex as answer options and name the checkbox.

So one question could be:
How many pets do you have ? (Checkbox 1 = 0; Checkbox 2 = 1; Checkbox 3 = 1+; Checkbox 4 and 5 are not set for this question)
Another example… Do you drink coffee ? (Checkbox 1 = “Yes”; Checkbox 2 = “NO”; Checkbox 3, 4, 5 are not set for this question)

Not the poll is done and 100 people answer the 20 questions. I wanna use a Column Chart to display this result Like in the picture: https://ibb.co/icJ2wx

I couldt figure out how to manage this. The vaadin chart examples always use datasets with displays horizontal things like Months and then for every month there is a equal dataset.

With charts dataseries model you would need to have one series per option, that is 5 series. And then in each series there will be one point(series item) for the number of times the option was chosen for each question.

In the case of you attached:

  • Point 1 of series 1 will have value 50
  • Point 1 of series 2 will have value ~80
  • Point 1 of series 3 will have value 0 (because there is no option 3)
  • Point 1 of series 4 will have value 0 (because there is no option 4)
  • Point 1 of series 5 will have value 0 (because there is no option 5)

It’s like transposing your data, instead of one series per question, you’ll have one series per option, and value is 0 if the question doesn’t have that option.

Afterwards you can use some extra configuration to add a name to the point and show it in the column, looks tricky but should be doable.

Hope this helps,

Guille

Yeah Guille this works well. I setup 5 series as you said. Then iterate over all questions and put the values from question 1 to slot 1 on series one , slot 1 on series 2 , slot 1 on series 3, slot 1 on series 4 and slot 1 on series 5. This for all questions +1 on the slots. After this i add all 5 series as Serieslist to my Chartconfig. Works well but 1 Thing is left i wanna have too.

If you look on my picture again i have between 1 and 5 possible answers for question. I i now hover over 1 of the 5 for one question there is always the questiontext and series information.

I want instead of this, that the series will not appear because it make no sense… each series have 1 answer for ever question so the information itself makes no sense. It should be invisible. Instead i want, like in my picture, the Answertext that represents every column.

For the hovering you can either disable the tooltip by

conf.getTooltip().setEnabled(false);

or make the tooltip format more relevant with the following code

PlotOptionsColumn columnOptions = new PlotOptionsColumn();

SeriesTooltip tooltip = columnOptions.getTooltip();
tooltip.setHeaderFormat("{point.x}<br/>");
tooltip.setPointFormat("{point.name}: {point.y}");

conf.setPlotOptions(columnOptions);

For the labels in each column you can use the datalabels in plotoptions like this:

PlotOptionsColumn columnOptions = new PlotOptionsColumn();
DataLabels labels = columnOptions.getDataLabels();
labels.setEnabled(true);
labels.setInside(true);
labels.setColor(SolidColor.BLACK);
labels.setFormat("{point.name}");
labels.setRotation(270);

conf.setPlotOptions(columnOptions);

I got the attached chart with the following configuration:

Chart chart = new Chart(ChartType.COLUMN);

Configuration conf = chart.getConfiguration();

conf.setTitle("Survey results");

conf.getxAxis().setCategories("Do you drink coffee?",
        "What's your pet?", "Where do you sleep?");

conf.getyAxis().setMax(250);
conf.getyAxis().setTitle("");

conf.getLegend().setEnabled(false);

PlotOptionsColumn columnOptions = new PlotOptionsColumn();
DataLabels labels = columnOptions.getDataLabels();
labels.setEnabled(true);
labels.setInside(true);
labels.setColor(SolidColor.BLACK);
labels.setFormat("{point.name}");
labels.setRotation(270);

SeriesTooltip tooltip = columnOptions.getTooltip();
tooltip.setHeaderFormat("{point.x}<br/>");
tooltip.setPointFormat("{point.name}: {point.y}");

conf.setPlotOptions(columnOptions);

DataSeries option1 = new DataSeries();
option1.add(new DataSeriesItem("Yes", 50));
option1.add(new DataSeriesItem("Chicken", 70));
option1.add(new DataSeriesItem("House", 105));
conf.addSeries(option1);
DataSeries option2 = new DataSeries();
option2.add(new DataSeriesItem("No", 80));
option2.add(new DataSeriesItem("Dog", 75));
option2.add(new DataSeriesItem("Hotel", 95));
conf.addSeries(option2);
DataSeries option3 = new DataSeries();
option3.add(new DataSeriesItem("", 0));
option3.add(new DataSeriesItem("Cat", 40));
option3.add(new DataSeriesItem("Bridge", 40));
conf.addSeries(option3);
DataSeries option4 = new DataSeries();
option4.add(new DataSeriesItem("", 0));
option4.add(new DataSeriesItem("", 0));
option4.add(new DataSeriesItem("Tree", 35));
conf.addSeries(option4);

It looks pretty much like the one you attached originally

17061576.png