score:4
Accepted answer
This can be done with setExtremes
. You set up a paramaterization for your "window" per page and update the extremes on each click.
The can be done in 2 main sets of code.
1) On load you set your window the "beginning" of the chart:
chart: {
events: {
load: function() {
this.xAxis[0].setExtremes(0, 5);
}
}
},
2) You then apply logic to the button functions to allow for paging:
var stepWidth = 5;
// the button action
$('#beginning').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(0, 5);
});
$('#forward').click(function() {
var chart = $('#container').highcharts();
var currentMin = chart.xAxis[0].getExtremes().min;
var currentMax = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes(currentMin + stepWidth, currentMax + stepWidth);
});
$('#back').click(function() {
var chart = $('#container').highcharts();
var currentMin = chart.xAxis[0].getExtremes().min;
var currentMax = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes(currentMin - stepWidth, currentMax - stepWidth);
});
$('#ending').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(9, 11);
});
I leave adding in logic to prevent going out of range to you. Here is a sample jsFiddle.
Source: stackoverflow.com
Related Query
- Pagination in column chart with Previous, Next controls?
- How to show a column with the value Zero in Column chart in Highcharts?
- Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels
- Need stacked column chart with multiple series
- High chart - Column Range Chart with Time range. How to get tooltip as Start and End time
- Highcharts Grouped Column Chart with Multiple Groups?
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- How to Build a Column Chart in Highcharts with Data Entered Dynamically Within a CMS
- Highcharts - column chart with drilldown to waterfall
- Highcharts - Column chart with empty columns for date in x-axis
- Stacked column chart with irregular date time interval
- Highcharts column chart color by single color but with different brightness level as per respective column value
- highcharter: Fixing x-axis labels in a column chart with only one column
- Stacked Column Chart With Unequal SubGroups in HighCharts.js
- How to change color of bar in column chart with different level of percentage in highcharts
- How to set column width for columnRange chart with multiple series
- Multiple different chart types stacked, column type with y value as color
- Column chart with negative values and categories on xAxis in HighCharts
- Ajax dynamic data with column bar chart
- How to make split grouped column bar chart in highcharts with percentage?
- highcharts column chart with line, need line start at bar start
- HighCharts column chart populated with series data from a function
- How draw a stacked column chart with type datetime
- Hide a specific series legend in a column chart with multiple series
- how can we draw column chart with stacked column chart in a single high chart?
- How to create a javascript column chart with overlapping columns of variable width
- having sorted multi column chart with unsorted series in highchart-ng module
- Highcharts tooltip bug with stacked column chart
- Highcharts column chart with data from mongodb
More Query from same tag
- Is this possible with Highchart
- Add clickable link to tooltip in Highcharts Scatter Plot
- change VueJS component data value from inside Highchart event
- how to use highcharts tooltip formatter in python code
- Highcharts are squished in html tabs
- Customize tooltip in Highcharts.js?
- javascript highcharts builder function
- Highstock plotting images that follow series when scrolling
- highchart with numberformat (unit)
- Highcharts multiple charts, each with live data
- How to show xAxis categories up to the each chart in Bar-Highcharts library?
- How to Disable Highchart Unit Display None
- How to get points information when hovering over axis labels in highcharts using custom-events library?
- highcharts: change color of pie slice on hover
- Is it possible to fill particular portion between given start & end angle in pie chart in chart.js?
- return json arrays from symfony controller for many usage on highcharts.js
- Cannot read property 'cum' of undefined -- when creating a stacked area chart with xAxis.type=datetime
- highcharts bar chart: columns width is very thin
- Displaying marker with text in highchart gauge vuejs
- programatically change the color of a highcharts spline series?
- Is there a pie chart slice hover event in Highcharts?
- Highchart treemap legends do not show specific legend
- Add borderColor for map Highcharter R
- Getting the corresponding x-axis value from the max value in y-axis in Highcharts
- Formatting tooltip in Highcharts
- plotBands Hide and Show parameters do not work in Highcharts
- Highlight serie hover highcharts
- Highcharts change legend options dynamically
- Highcharts - shared tooltips for certain serieses
- (Highcharts) Polygon-like shell in polar chart