- HTML5 Data and Services Cookbook
- Gorgi Kosev Mite Mitreski
- 676字
- 2021-08-06 16:50:01
Zooming and panning a chart
The charts we discussed in the preceding chapter of this book were static. As such, they're great for visualizing limited quantities of data. However, when the dataset grows too large, users might be needed to interactively choose the range of data shown in the chart.
To enable this, we're going to make a chart that is capable of interactive controls, such as zooming and panning. The Flot chart library easily supports this with its navigation plugin.
In this recipe, we're going to show a one week temperature history at 30 minute increments. We're going to allow the user to zoom and pan the history.
Getting ready
We'll need to download Flot from the official website http://www.flotcharts.org/ and extract the contents to a separate folder flot.
How to do it...
To create this recipe, we will add Flot, jQuery, and create an HTML file.
- First, we create a basic HTML page with a placeholder for our chart. We're also going to include jQuery (needed by Flot), Flot itself, and the Flot navigate plugin. Flot needs to draw the chart canvas a placeholder
div, so we're going to provide one. The placeholder needs to havewidthandheightspecified via CSS; otherwise Flot may fail to draw the chart correctly.<!DOCTYPE HTML> <html> <head> <title>Chart example</title> </head> <body> <div id="chart" style="height:200px;width:800px;"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="flot/jquery.flot.js"></script> <script src="flot/jquery.flot.navigate.js"></script> <script type="text/javascript" src="example.js"></script> </body> </html> - We're going to add our code in
example.js.$(function() { var now = Date.now(); var hour = 60 * 60 * 1000, day = 24*hour; var weekAgo = now - 7*day; var zoomOut = null; function getData(cb) { var temperatures = []; // Generate random but convincing-looking data. for (var k = 24 * 7; k >= 0; --k) temperatures.push([now - k*hour,Math.random()*2 + 10*Math.sin(k/4 + 2)]); cb(temperatures); } getData(function(data) { var p = $.plot("#chart", [{data: data}], { xaxis: { mode: 'time', zoomRange: [day / 2, 7 * day], panRange: [weekAgo, now] }, yaxis: { zoomRange: false, panRange: false }, zoom: { interactive: true },pan: { interactive: true } }); zoomOut = p.zoomOut.bind(p); }); $('<input type="button" value="zoom out">') .appendTo("#chart") .click(function (e) { e.preventDefault(); zoomOut && zoomOut(); }); });
How it works...
To draw the chart, first we wrote the function getData to generate some convincing looking random data of temperature that rises during the day and falls during the night. Because it is callback based, we can replace this function with one that fetches the data from a server.
The plot drawing function $.plot takes three arguments. The first is the plot placeholder, the second is an array of series we need to draw, and the third are drawing options. We're going to pass only one series.
The new additions to our chart are to the plot options and the zoom-out button. We specify the zoom and pan range in the axes options. Our Y axis doesn't support zooming and panning, so it has been disabled.
The zoomRange option specifies the minimum and maximum range of the full plot when zooming. For example, our options specify that the plot will zoom to show at least half a day and at most a week in its full range.
The panRange option specifies the minimal minimum and maximal maximum on the X axis. In our example, we specify that the user cannot pan the chart to make its minimum value go below weekAgo, and cannot pan it to make its maximum value go above now.
Finally, we specify that zooming and panning will be interactive. This means that the user can zoom-in using double-click, and can pan it by dragging with the mouse.
To allow the user to reset the zoom, we add a zoomOut button, which calls the zoomOut function. We need to update this function whenever we redraw the plot, because the object returned from the $.plot call changes. This way multiple getData calls are allowed.
With this, we've added interactivity to our charts, allowing the user to customize the range of data they would like to view. Flot navigation works with all kinds of charts; be sure to check out the preceding chapter to see an overview of some of the chart types that are supported.