HTML5 Data and Services Cookbook: Take the fast track to the rapidly growing world of HTML5 data and services with this brilliantly practical cookbook. Whether building websites or web applications, this is the handbook you need to master HTML5.

In this chapter, we will take a look at displaying graphical data using various JavaScript libraries that are based on modern HTML5 standards. The main idea is to get you interested into various visual parts ranging from 2D graphics with canvas and SVG data-driven documents, with the help of problem-solving examples.

Line charts are the most basic type of charts. They display a series of data points connected together by lines. Line charts are often used to visualize time series data.

There are various libraries that implement this charting functionality, both paid and free. We're going to use the Flot chart library. It's free, simple, and easy to use and it has been in active development for the past 4 years. It also aims to produce aesthetically pleasing charts.

In this recipe, we're going to make a time series chart that displays the outside temperature history for the past 24 hours.

In contrast to a line chart, which is usually used to display averages or momentary values, bar charts are used to visualize data that belongs to discrete groups. Examples include daily, monthly, and weekly sales (the groups are days, months, and weeks respectively), page visits per user, fuel consumption for each car, and so on.

The Flot chart library can also draw bar charts. In this example, we're going to visualize the number of daily sales for the past seven days. We're also going to show the sales from separate products separately, stacked on top of each other.

When visualizing proportions or percentages as a whole, we usually use pie charts. Pie charts are simple enough to draw on our own; however, to get more flexibility and aesthetically pleasing results, we're going to use the Flot charting library with its pie plugin.

Flot's pie plugin can show a pie with or without a legend, and has extensive options for controlling the position of the labels. It's also capable of rendering tilted pies and donuts. Support for interactive pies is also included.

In this recipe, we're going to make a pie chart of our visitor's browsers.

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.

Combined charts are charts that have more than one x or y axis, and may have multiple types of series (lines, bars, and areas). Sometimes, we may want to present multiple heterogeneous types of data on a single chart, usually to visualize its correlation.

In this recipe, we're going to try and visualize a mountain hike by presenting both temperature and altitude on a single chart. The altitude series will be an area chart with gradient colors reminiscent of relief maps, but the temperature series will be a line chart, which we would like to be red if above 19 degrees Celsius and blue if below that.

In order to do this, we're going to need a charting library that can handle two y axes. We're going to use the Flot charting library because it is capable of displaying charts with two or more x or y axes.

Bubble charts can display sets of values as circles. They're usable for datasets with sizes in the range 10 through 100. They're particularly useful for visualizing values that differ by orders of magnitude and can replace pie charts in those situations.

As bubble charts are more complex and slightly less common, we're going to need a flexible library to draw them. The excellent D3 library (http://d3js.org/) is a great fit; it provides a set of tools, (the core data-driven DOM API plus the "pack" data layout) that enables the creation of bubble charts.

We're going to draw a bubble chart displaying the numbers of visitors coming to our website from referring websites.

The rise of Google Maps and their excellent API popularized the embedding of maps on websites. Embedded maps have a variety of uses: displaying places that users have been to, displaying locations of events, displaying locations of stores owned by a business, and many others. Maps can be displayed along with every textual address displayed on our websites.

In this recipe we're going to make a simple map with a single location marked on it. To do this, we're going to use the Leaflet library (http://leafletjs.com/), which is a well known and widely library used by Flickr, FourSquare, Craigslist, Wikimedia, and other popular sites.

We're going to display an OpenStreetMap map layer. OpenStreetMap (http://www.openstreetmap.org/) is a free Wikipedia-like collaboratively created street map with great coverage.

We're also going to add a description balloon, which would be displayed when the placemark is clicked.

When displaying maps, sometimes we may want to show more than just locations. Besides markers, the other most common map overlays are paths and areas.

In this recipe, we're going to create a map showing a path and an area.

Analog gauges are useful for visualizing data with values bound between predefined minimums and maximums, which undergo changes over time. Examples include amount of fuel, current speed, disk space, process and memory usage, and so on.

In this recipe, we're going to make a very flexible, data-driven gauge plugin for jQuery. Then we're going to use this plugin to display an analog car speedometer. The following is how the speedometer will look:

The recipe makes extensive use of HTML5's canvas.

In this recipe, we will take a look into how to display data in a tree-like layout. We are going to visualize a small family tree of Linux represented via JSON file. Additionally, will be using the D3.js file for manipulating the DOM to display the data.

In this recipe, we are going create an LED scoreboard similar to the ones used in basketball games by making a clever use of HTML web fonts. The main goal of the recipe is to get introduced to web fonts and the features they offer.