0

Combined domain zk chart

asked 2021-04-05 02:34:04 +0800

bztom35 gravatar image bztom35
103 4

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

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

delete flag offensive retag edit

Comments

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

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

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

bztom35 ( 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.

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

9 Answers

Sort by ยป oldest newest most voted
0

answered 2021-04-07 14:32:21 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

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?

link publish delete flag offensive edit

Comments

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

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

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

bztom35 ( 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.

bztom35 ( 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());

bztom35 ( 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.

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

answered 2021-04-09 08:40:51 +0800

bztom35 gravatar image 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: image description

link publish delete flag offensive edit
0

answered 2021-04-09 08:41:22 +0800

bztom35 gravatar image bztom35
103 4

Want to achieve this with Zkoss Charts: image description

link publish delete flag offensive edit
0

answered 2021-04-09 10:29:30 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

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.

link publish delete flag offensive edit

Comments

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.

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

answered 2021-04-09 10:37:04 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

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. image description

link publish delete flag offensive edit
0

answered 2021-04-09 14:16:12 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-04-09 14:16:49 +0800

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);
link publish delete flag offensive edit
0

answered 2021-04-09 14:29:30 +0800

bztom35 gravatar image bztom35
103 4

Want to achieve this with Zkoss Charts: image description

link publish delete flag offensive edit
0

answered 2021-04-12 10:28:32 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

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() {
    List list = new LinkedList<>();
    PlotLine line = new PlotLine();
    line.setValue(1);
    line.setWidth(5);
    line.setColor("#FF0000");
    list.add(line);
    chart.getXAxis().setPlotLines(list);
}

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

image description

link publish delete flag offensive edit

Comments

actually, it was a specific date line marker.

bztom35 ( 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?

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

Yes, thank you for your help!

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

answered 2021-04-12 11:48:45 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-04-12 11:49:12 +0800

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-

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2021-04-05 02:34:04 +0800

Seen: 18 times

Last updated: Apr 12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More