scroll or pagination in charts

asked 2022-10-15 03:06:40 +0800

nome gravatar image nome
107 3

updated 2022-10-15 03:22:41 +0800

Hi guys.

currently, I using (stacked column chart) but I have many data to display on it. Is it possible to use scroll horizontal or pagination in this chart? appreciate your help.

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2022-10-17 15:35:34 +0800

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

updated 2022-10-18 12:04:56 +0800

There are several ways to handle large data:

show horizontal scrollbar

give a large width and allow overflow-x:

<charts id="chart" type="line"  width="3000"/>
        overflow-x: auto !important;

enable x-axis zoom

You can select a range by drag and drop to zoom in.


See https://github.com/zkoss/zkchartsessentials/blob/master/src/main/webapp/event/events.zul

load data of 1 page one time

You need to define the size of data points for 1 page.

  1. just load 1-page of data at the beginning.
  2. create 2 buttons for next and previous page
  3. when users click paging buttons, load the corresponding page of data

change x extremes range

  1. load all the data
  2. set x data range by chart.getXAxis().setExtremes(1, 10); so it only shows those points in 1~10
  3. create 2 buttons for next and previous page
  4. when users click paging buttons, change x data extremes to a different range
link publish delete flag offensive edit


if one of the solutions works for you, please accept the answer :)

hawk ( 2022-10-24 09:25:18 +0800 )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




Asked: 2022-10-15 03:06:40 +0800

Seen: 7 times

Last updated: Oct 18 '22

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