Creating a bar chart_HTML5 Data and Services Cookbook-QQ阅读女频仙侠网

上QQ阅读APP看书，第一时间看更新

Creating a bar chart

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.

Getting ready

We'll need to download Flot from the official website at http://www.flotcharts.org/ and extract the contents to a separate folder named flot.

How to do it...

Let's modify the line chart code to make it draw our bar charts.

First, we're going to copy the same HTML page from the previous line chart recipe, but we'll make some changes. In order to draw stacking bars, we're going to need the stacking plugin, which is located in the jquery.flot.stack.js file. The height of the chart placeholder is increased to get a better overview of the individual stacking bars:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Chart example</title>
    </head>
    <body>
        <div id="chart" style="height:300px; 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.stack.js"></script>
        <script type="text/javascript" src="example.js"></script>
    </body>
</html>

Then we will create the example.js script:

$(function() {    
    var day = 24 * 60 * 60 * 1000;
    function getData(cb) {
        var now  = new Date();
        now = new Date(now.getYear(), now.getMonth(), now.getDate()).getTime();
        var products = [];
        for (var product = 1; product < 4; ++product) {
            var sales = { label: "Product " + product, data: [] };
            for (var k = 7; k > 0; --k)
                sales.data.push([now - k*day, Math.round(Math.random()*10)]);
            products.push(sales);
        }
        cb({series:products});
    }

    getData(function(data) {
        $.plot("#chart", data.series, {
            series: {
                stack: true, lines: { show: false },
                bars: { show: true, barWidth: 0.8 * day, align:'center' }
            }, xaxis: {mode: 'time'}
        });
    });
});

The code is explained in the next section. The following is how the resulting chart appears:

How it works...

Like in the previous recipe, the $.plot function takes three arguments. The first argument is the chart placeholder, the second is data, and the third is an object containing the chart options.

The following is a scheme of our input data:

[
  {label: "Product 1", data:[
    [timestamp, value],
    [timestamp, value], …]},
  {label: "Product 2", data: […]},
  {label: "Product 3", data: […]}
]

The input data is an array of series. Each series represents the sales for a product. The series object has a label property denoting the product, and a data property, which is an array of data points. Every data point is a two-dimensional array. The first element of this array is the date represented as a UNIX timestamp in milliseconds—the exact beginning of the day. The second is the number of sales for that day.

To manipulate the dates more easily, we define a variable representing the number of milliseconds in a day. Later, we use this variable to define the width of the bars in the chart.

Flot automatically picks the series colors for us from a predefined list (however, it's also possible to specify the colors we need, as we will see in the following recipes).

There are several series options specified in the code. We tell Flot to stack our series by setting the value of the stack property to true. We also make sure to hide the lines that would otherwise be shown by default.

To get the bar centers to align with the x-axis ticks for the day, we set the value of the align property in the bar object to center.

Each series in our input data has a label. As a result, Flot automatically generates a legend placed in the upper-right corner.

The boundaries of the axes are automatically picked by Flot, but it's possible to control them using the options object.