- HTML5 Data and Services Cookbook
- Gorgi Kosev Mite Mitreski
- 605字
- 2021-08-06 16:49:58
Creating an area chart
Area charts are usually used in place of line charts when we want to stack multiple results on top of each other. They can also be used to enhance the visual appeal of the chart in certain circumstances.
This recipe will present an example where the area chart is used for an enhanced visual appeal: displaying altitude data.
Let's say we need to visualize the altitude of a 8-km downhill hike succeeded by 12 km of flat walking. We would also like to mark the "mountain" portion of the chart. Finally, we would like the area below the altitude line to be filled in a way reminiscent of color relief maps with the color green for low, yellow for medium, and white for high-altitude.
Getting ready
We'll also use the Flot chart library in this example, so we will need to download Flot from the official website ta http://www.flotcharts.org/ and extract the content to a separate folder named flot.
How to do it...
- Our HTML file needs a chart placeholder element and the necessary scripts included. The following is the content:
<!DOCTYPE HTML> <html> <head> <title>Chart example</title> <style type="text/css"> #chart { font-family: Verdana; } </style> </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 type="text/javascript" src="example.js"></script> </body> </html> - We're going to draw the chart in our
example.jsscript that contains the following code:$(function() { function getData(cb) { var altitudes = []; // Generate random but convincing-looking data. for (var k = 0; k < 20; k += 0.5) altitudes.push([k, Math.random()*50 + 1000*Math.pow((k-15)/15,2)]); cb(altitudes); } getData(function(data) { $.plot("#chart", [{data: data}], { xaxis: { tickFormatter: function(km) { return km + ' km'; } }, lines: { fill: true, fillColor: {colors: ["#393", "#990", "#cc7", "#eee"] } }, grid: { markings: [{ xaxis: { from: 0, to: 8 }, color: "#eef" }] } }); }); });
And the following is how our result looks like:
The area below the altitude line is filled in a way reminiscent of color relief. The mountain section is marked with a blue area, created by the markings object.
How it works...
As in all of our examples, the getData function in example.js generates random data, and then calls the provided callback function with the data. We can easily write a replacement that fetches the data from a server instead, using jQuery.
A single call to $.plot will draw the area chart. The first argument is the target container. The second argument is an array of series to draw—in this case just one.
The third argument is more complex. It consists of the following parts:
- The
xaxisproperty specifies the behavior of our x axis. We override the default tick labels by providing our own tick formatter. This formatter adds the"km"string after the tick value. - The
linesproperty specifies that we'll be using a filled line chart. We want a mountain-like gradient fill effect, so we specify a gradient object that contains an array of CSS color strings, that is,{color: [array of colors]}. - The
gridproperty is used to mark the mountain segment on our chart. We specify that it should contain a marking of the x axis segment spanning in the range 0 to 8 km and having a light blue color.
There's more...
Flot has more area chart options—they can be found in the API documentation that is included with the distribution.
To use this recipe, we would need to provide our own data array from the server. The following is a simple Ajax replacement of the getData function, sending an Ajax request to a request handler hosted on the same domain at the path /areachart to retrieve the chart data. It is very simple:
function getData(cb) {
$.get('/areachart').success(cb);
}