Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

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

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

[Vaadin Charts] share one x-Axis with stacked y-Axis

René Zurbrügg
5 years ago Jul 06, 2016 9:01am

Hi There

I'm trying to create a chart, that has only one x-Axis but multiple y-Axis that are stacked (not overlaying).
In the Attachement, there is a Image from JFreeCharts of what i want to achieve.

Do you Guys know, if this is possibly and how i could do this?

Thanks in advance!
René

Guillermo Alvarez
5 years ago Jul 06, 2016 1:05pm

Did a quick test and looks like you need to set offset 0 to the different Yaxes and also set their sizes and top position.

I only used two series and code looks like this:

Chart chart = new Chart(ChartType.COLUMN);
Configuration conf = chart.getConfiguration();
conf.getChart().setAlignTicks(false);
conf.setTitle("");

XAxis x = new XAxis();
x.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
        "Sep", "Oct", "Nov", "Dec");
conf.addxAxis(x);

YAxis y0 = new YAxis();
y0.setMin(0);
y0.setHeight("100");
y0.setTitle("Process Load");
conf.addyAxis(y0);

YAxis y1 = new YAxis();
y1.setMin(0);
y1.setTitle("Live Threads");
y1.setTop("200");
y1.setHeight("100");
y1.setOffset(0);
conf.addyAxis(y1);

ListSeries series0 = new ListSeries("Process Load", 49.9, 71.5, 106.4,
        129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);
ListSeries series1 = new ListSeries("Live Threads", 83.6, 78.8, 98.5,
        93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3);
conf.addSeries(series0);
conf.addSeries(series1);
series1.setyAxis(y1);

I'm also attaching the output I got. One downside of this is that it looks like it requires absolute values for sizes.
Hope this helps!
 

+1
René Zurbrügg
5 years ago Jul 06, 2016 1:21pm

Awesome!

Works perfect, just the tooltips from axis1 are missplayed right now, but i'm sure i can fix this :)

Thanks for the fast and helpfull answer!

 

Guillermo Alvarez
5 years ago Jul 06, 2016 2:01pm

Glad to hear it worked.

Not sure what you mean with axis tooltip but hope you can solve it, otherwise just post it

René Zurbrügg
5 years ago Jul 06, 2016 2:45pm

The problem is, that the tooltip won't show at the right position, as you can see in the picture i attached.

I also have a second problem. Somehow i can't force the Chart to draw the grid lines if the yAxis has a fixed height.. 
I tried:

y0.setLineWidth(2);
 y0.setGridLineColor(new SolidColor("black"));
 y0.setGridLineDashStyle(DashStyle.SOLID);
 y0.setGridLineWidth(1);
 y0.setType(AxisType.LINEAR);

Looks like the same problem as this one https://vaadin.com/forum/#!/thread/13013570/13013569

Thanks for helping!
 

Guillermo Alvarez
5 years ago Jul 06, 2016 4:04pm

Ok, now I understand both problems, they seem to be two separate issues when using axes on this way :(. Could you report them in dev.vaadin.com?

 

René Zurbrügg
5 years ago Jul 06, 2016 4:12pm

Sure, i'll open a ticket

Edit: Created these tickets:
https://dev.vaadin.com/ticket/20035
https://dev.vaadin.com/ticket/20036
 

Guillermo Alvarez
5 years ago Aug 16, 2016 5:09pm

Thanks for creating the issues, both of them are now in review and should be released in next maintenance or minor release.