Display Large Number of Data"
(Created page with "{{ZKChartsEssentialsPageHeader}} {{ZKChartsEssentialsPageFooter}}") |
|||
| Line 2: | Line 2: | ||
| + | If you need to display large number of data points. There are several ways to handle it: | ||
| + | = Show Horizontal Scrollbar= | ||
| + | give a large width and allow overflow-x: | ||
| + | |||
| + | <syntaxhighlight lang='xml'> | ||
| + | <charts id="chart" type="line" width="3000"/> | ||
| + | <style> | ||
| + | .z-charts{ | ||
| + | overflow-x: auto !important; | ||
| + | } | ||
| + | </style> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | = Enable X-axis Zoom = | ||
| + | After enabling the x-axis zoom: | ||
| + | <syntaxhighlight lang='java'> | ||
| + | chart.setZoomType("x"); | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | You can select a range by drag-and-drop to zoom in on a chart | ||
| + | |||
| + | |||
| + | 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. | ||
| + | |||
| + | just load 1-page of data at the beginning. | ||
| + | create 2 buttons for next and previous page | ||
| + | when users click paging buttons, load the corresponding page of data | ||
| + | |||
| + | = change x extremes range = | ||
| + | load all the data | ||
| + | set x data range by chart.getXAxis().setExtremes(1, 10); so it only shows those points in 1~10 | ||
| + | create 2 buttons for next and previous page | ||
| + | when users click paging buttons, change x data extremes to a different range | ||
{{ZKChartsEssentialsPageFooter}} | {{ZKChartsEssentialsPageFooter}} | ||
Revision as of 04:25, 14 November 2022
If you need to display large number of data points. There are several ways to handle it:
Show Horizontal Scrollbar
give a large width and allow overflow-x:
<charts id="chart" type="line" width="3000"/>
<style>
.z-charts{
overflow-x: auto !important;
}
</style>
Enable X-axis Zoom
After enabling the x-axis zoom:
chart.setZoomType("x");
You can select a range by drag-and-drop to zoom in on a chart
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.
just load 1-page of data at the beginning. create 2 buttons for next and previous page when users click paging buttons, load the corresponding page of data
change x extremes range
load all the data set x data range by chart.getXAxis().setExtremes(1, 10); so it only shows those points in 1~10 create 2 buttons for next and previous page when users click paging buttons, change x data extremes to a different range
< Get Complete Source Code of This Book >