When working with a small amount of data, it is possible to fit it all within the bounds of the graph. When working with larger sets of data, it becomes necessary to manage the data differently: summarize the data, filter it, and so on. One alternative to these approaches, especially in the case of chronological data, is to make a graph that we can zoom in and out of.
For setting up a basic page and installing jQuery and Highcharts, refer to the Getting ready section of the Creating your first chart recipe in Chapter 1, Getting Started with Highcharts.
To get started, perform the following steps:
Define chart options as we normally would for our chart, as shown in the following code:
var options = { chart: { type: 'spline', }, title: { text: 'Making graphs zoomable' }, series: [{ name: 'Our data', data: [/* Our data goes here */] }] };
Set
options.chart.zoomType
tox
, as shown in the following...