# Combined domain zk chart

bztom35
103 4

Is the current version 7.2.x Zk charts support combined domain charts?

For example: https://imgur.com/a/AZRNQ

delete retag edit

Have you seen this example? Combination chart with dual axes: https://www.zkoss.org/zkchartsdemo/combodualaxes

( 2021-04-06 12:12:54 +0800 )edit

Yes, but it's not a combined domain chart. It's similar to highchart stocks.

( 2021-04-06 12:46:32 +0800 )edit

ZK charts doesn't cover highcharts stock. We'll have to see if there's a different approach.

( 2021-04-07 09:11:05 +0800 )edit

Sort by » oldest newest most voted

hawk
3023 1 5
http://hawkphoenix.blogsp...

I think the combined domain charts you mean is: http://www.java2s.com/Code/Java/Chart/JFreeChartCombinedXYPlotDemo1.htm

I summarize its characteristics:

1. 2 charts are in separate positions
2. both charts have the same x-axis but different y-axes

Zk Charts doesn't have exactly the same chart type. But I think you can simulate it with 2 charts. The steps are:

1. create 2 line charts, put them in vertical order, the upper and lower one
2. both charts are set to the same x-axis values (In JFreeChartCombinedXYPlotDemo1, it also sets the same x values for all series)
3. hide the upper chart's x-axis value chart.getXAxis().getLabels().setEnabled(false)

I think these steps will make 2 charts look quite similar to JFreeChartCombinedXYPlotDemo1. I think the main difference is:

JFreeChartCombinedXYPlotDemo1 has one legend with 3 series, but ZK charts has 2 legends.

Is this solution feasible for you?

Yes, I have already tried the method that was suggested by you; however, it's still a bit clucky. I need to have date marker align across multiple subplots. problem with this setup: https://cdec.water.ca.gov/misc/twochartsstackedoneach_other.png

( 2021-04-07 15:10:31 +0800 )edit

Want to achieve this with Zkoss Charts: https://cdec.water.ca.gov/misc/wantthisinzkosscharts.png

( 2021-04-07 16:32:03 +0800 )edit

Is there a way to get min and max date range from given chart? I am trying to set the same date range for the both charts. I am hopefully that it will solve the miss align line marker issue; until a combined domain feature is available.

( 2021-04-08 00:20:14 +0800 )edit

I tried to manually set the min range for both charts, but this does not seem to do anything: this.chartFlows.getXAxis().setMinRange(this.chartElevation.getXAxis().getMinRange());

( 2021-04-08 00:53:33 +0800 )edit

I can't access the links to images. I have increased your karma, you can upload an image now.

( 2021-04-09 07:48:31 +0800 )edit

bztom35
103 4

Yes, I have already tried the method that was suggested by you; however, it's still a bit clucky. I need to have date marker align across multiple subplots. problem with this setup:

bztom35
103 4

Want to achieve this with Zkoss Charts:

hawk
3023 1 5
http://hawkphoenix.blogsp...

if you set the same date to the x-axis for 2 charts, they should both have the same date labels on the x-axis, e.g. https://www.zkoss.org/zkchartsdemo/line_basic

why do you need to get min and max from a chart? I suppose you provide data to a chart.

I tried this to match x-axis of chart one to chart two: this.chartFlows.getXAxis().setMinRange(this.chartElevation.getXAxis().getMinRange()), but it does not seem to be working. Maybe I didn't do it correctly.

( 2021-04-09 11:23:19 +0800 )edit

hawk
3023 1 5
http://hawkphoenix.blogsp...

according to your chart image, I found date and time are separate on the x-axis. I think "01/13 12:00" should be one point, but it likes they are 2 separate points.

And the x values on both chart doesn't match, you can make them consistent when creating a model or series.

hawk
3023 1 5
http://hawkphoenix.blogsp...

You should make x-axis consistent by providing same x values for both chart, for example if you add 1 point in the 1st chart:

model.setValue("Tokyo", "Jan", 7);


Then you should add 1 point with the same X value and different value in the 2nd chart:

model.setValue("Tokyo", "Jan", 10);


bztom35
103 4

Want to achieve this with Zkoss Charts:

hawk
3023 1 5
http://hawkphoenix.blogsp...

It looks like you want to draw an extra line in a chart, please reference this example: https://github.com/zkoss/zkchartsessentials/blob/master/src/main/java/org/zkoss/zkcharts/essentials/SeriesComposer.java

private void addPlotLine() {
PlotLine line = new PlotLine();
line.setValue(1);
line.setWidth(5);
line.setColor("#FF0000");
chart.getXAxis().setPlotLines(list);
}


You can visit https://github.com/zkoss/zkchartsessentials/blob/master/src/main/webapp/series.zul to see the result.

actually, it was a specific date line marker.

( 2021-04-12 16:11:54 +0800 )edit

But I think you still can add a plotline on a specific date with that API. Does it fulfill your requirement?

( 2021-04-14 09:08:52 +0800 )edit

Yes, thank you for your help!

( 2021-04-14 21:17:20 +0800 )edit

hawk
3023 1 5
http://hawkphoenix.blogsp...

There is another approach.

ZK traditional chart component is based on JFreeChart. But it doesn't support the type Combined XY Plot by default, you need to implement your own ChartEngine by extending org.zkoss.zkex.zul.impl.JFreeChartEngine and use your chart engine by https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/Chart.html#setEngine-org.zkoss.zul.impl.ChartEngine- or https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/Chart.html#setEngine-java.lang.String-

[hide preview]