Pikemere Web Services

You might decide that area charts are the best type of chart to present your data. In this tutorial I’ve provided examples of a normal area chart and a stacked area chart.

For a more in depth introduction to Flot and how to use it in your web pages, take a look at the tutorial how to add charts to your web pages using Flot.

Area Chart with Legend

To create the above chart, firstly we need an element, preferably a div, to contain the chart. Create the following:

<div id="placeholder"></div>

You will need to specify the width and height of the chart else Flot will not generate the chart. You will also need to provide the CSS for the legend:

#placeholder {
    width: 450px;
    height: 200px;
}

.legend table, .legend > div {
    height: 50px !important;
    opacity: 1 !important;
    right: 285px;
    top: 10px;
    width: 100px !important;
}

.legend table {
    border: 1px solid #555;
    padding: 5px;
}

Then we will need some data to place in the chart. The above area chart uses two data series, each in its own array:

var d1 = [[1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000, 26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004], [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295]];
var d2 = [[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000, 11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000], [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000]];

var data1 = [
    { label: "Label 1", data: d1, points: { fillColor: "#4572A7", size: 5 }, color: '#4572A7' },
    { label: "Label 2", data: d2, points: { fillColor: "#89A54E", size: 5 }, color: '#89A54E' }
];

In each element in both arrays, the first digit is a timestamp of a particular date that will appear on the x axis and the second is where the data point will appear on the y axis.

After this we need to include the code to create the chart:

$.plot($("#placeholder"), data1, {
    xaxis: {
        min: (new Date(2009, 12, 1)).getTime(),
        max: (new Date(2010, 11, 1)).getTime(),
        mode: "time",
        tickSize: [1, "month"],
        monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        tickLength: 0,
        axisLabel: 'Month',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5
    },
    yaxis: {
        axisLabel: 'Amount',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5
    },
    series: {
        lines: {
            show: true,
            fill: true
        },
        points: {
            show: false
        },
    },
    grid: {
        borderWidth: 1
    },
    legend: {
        labelBoxBorderColor: "none",
        position: "right"
    }
});

Firstly the plot function includes the options for the x axis, setting the minimum and maximum dates to show on the chart. The options mode, tickSize and monthNames then specify the units to be used on the x axis. tickLength removes the vertical gridlines from the chart, and finally the five options starting with axisLabel insert a label onto the axis. These last options also apply to the y axis. The series are then specified, showing lines but hiding points, and lastly the legend settings are specified.

Note that to include labels on the axis, you will need to use a plugin. Include jquery.flot.axislabels.js underneath jquery.flot.js in the head section of your HTML document:

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.axislabels.js"></script>

When all of this is put together, you should see an area chart. Here is all of the code in its entirety:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flot Area Chart</title>

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 450px; height: 200px; }
.legend table, .legend > div { height: 50px !important; opacity: 1 !important; right: 285px; top: 10px; width: 100px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
</style>

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.axislabels.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var d1 = [[1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000, 26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004], [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295]];
    var d2 = [[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000, 11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000], [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000]];

    var data1 = [
        { label: "Label 1", data: d1, points: { fillColor: "#4572A7", size: 5 }, color: '#4572A7' },
        { label: "Label 2", data: d2, points: { fillColor: "#89A54E", size: 5 }, color: '#89A54E' }
    ];

    $.plot($("#placeholder"), data1, {
        xaxis: {
            min: (new Date(2009, 12, 1)).getTime(),
            max: (new Date(2010, 11, 1)).getTime(),
            mode: "time",
            tickSize: [1, "month"],
            monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            tickLength: 0,
            axisLabel: 'Month',
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5
        },
        yaxis: {
            axisLabel: 'Amount',
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5
        },
        series: {
            lines: {
                show: true, fill: true
            },
            points: {
                show: false
            },
        },
        grid: {
            borderWidth: 1
        },
        legend: {
            labelBoxBorderColor: "none",
            position: "right"
        }
    });
});
</script>
</head>

<body>
    <div id="placeholder"></div>
</body>
</html>

Area Chart with Stacking

Alternatively you may require an area chart that is stacked.

To start creating the above chart, we will firstly need to include a div to contain the chart:

<div id="placeholder"></div>

Then we need to specify the width and height of the chart else Flot will not generate the chart. The CSS for the legend also needs including:

#placeholder {
    width: 450px;
    height: 200px;
}

.legend table, .legend > div {
    height: 94px !important;
    opacity: 1 !important;
    right: 286px;
    top: 10px;
    width: 100px !important;
}

.legend table {
    border: 1px solid #555;
    padding: 5px;
}

You will then need to create some data to put into your chart. Let’s create the following data:

var d1 = [[1750, 502], [1800, 635], [1850, 809], [1900, 947], [1950, 1402], [2000, 3634], [2050, 5268]];
var d2 = [[1750, 106], [1800, 107], [1850, 111], [1900, 133], [1950, 221], [2000, 767], [2050, 1766]];
var d3 = [[1750, 163], [1800, 203], [1850, 276], [1900, 408], [1950, 547], [2000, 729], [2050, 628]];
var d4 = [[1750, 18], [1800, 31], [1850, 54], [1900, 156], [1950, 339], [2000, 818], [2050, 1201]];
var d5 = [[1750, 2], [1800, 2], [1850, 2], [1900, 6], [1950, 136], [2000, 300], [2050, 460]];

var data1 = [
    { label: "Label 1", data: d1, points: { fillColor: "#4572A7", size: 5 }, color: '#4572A7' },
    { label: "Label 2", data: d2, points: { fillColor: "#AA4643", size: 5 }, color: '#AA4643' },
    { label: "Label 3", data: d3, points: { fillColor: "#89A54E", size: 5 }, color: '#89A54E' },
    { label: "Label 4", data: d4, points: { fillColor: "#80699B", size: 5 }, color: '#80699B' },
    { label: "Label 5", data: d5, points: { fillColor: "#3D96AE", size: 5 }, color: '#3D96AE' }
];

First we have created some data arrays, one for each data series. The first digit in each element of the arrays is where the data point will fall on the x axis and the second digit is where the data point will fall on the y axis. The data series are then put into the data object data1.

After this we will use jQuery to create the chart. Take a look at the following code:

$.plot($("#placeholder"), data1, {
    xaxis: {
        axisLabel: 'Year',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5,
        tickLength: 0
    },
    yaxis: {
        min: 0,
        max: 10000,
        axisLabel: 'Amount',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5
    },
    series: {
        lines: {
            show: true,
            fill: true
        },
        stack: true,
        points: {
            show: false
        }
    },
    grid: {
        borderWidth: 1
    },
    legend: {
        labelBoxBorderColor: "none",
        position: "right"
    }
});

All of the options starting axisLabel specify the options for the labels on each axis. The option tickLength on xaxis removes the vertical gridlines. The minimum and maximum values are then set on the yaxis. After this, the series options are set, showing lines but hiding points. The chart is also set to stack.

Note that you will need to include the stack plugin to enable stacking functionality in the chart and also the axis label plugin. Include jquery.flot.axislabels.js and jquery.flot.stack.js underneath jquery.flot.js in the head section of your HTML document:

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.stack.js"></script>

Once you have included all of this code, you should hopefully see an area chart. Here is all of the code put together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flot Area Chart</title>

<style type="text/css">body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 450px; height: 200px; }
.legend table, .legend > div { height: 94px !important; opacity: 1 !important; right: 285px; top: 10px; width: 100px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
</style>

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.stack.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var d1 = [[1750, 502], [1800, 635], [1850, 809], [1900, 947], [1950, 1402], [2000, 3634], [2050, 5268]];
    var d2 = [[1750, 106], [1800, 107], [1850, 111], [1900, 133], [1950, 221], [2000, 767], [2050, 1766]];
    var d3 = [[1750, 163], [1800, 203], [1850, 276], [1900, 408], [1950, 547], [2000, 729], [2050, 628]];
    var d4 = [[1750, 18], [1800, 31], [1850, 54], [1900, 156], [1950, 339], [2000, 818], [2050, 1201]];
    var d5 = [[1750, 2], [1800, 2], [1850, 2], [1900, 6], [1950, 136], [2000, 300], [2050, 460]];

    var data1 = [
        { label: "Label 1", data: d1, points: { fillColor: "#4572A7", size: 5 }, color: '#4572A7' },
        { label: "Label 2", data: d2, points: { fillColor: "#AA4643", size: 5 }, color: '#AA4643' },
        { label: "Label 3", data: d3, points: { fillColor: "#89A54E", size: 5 }, color: '#89A54E' },
        { label: "Label 4", data: d4, points: { fillColor: "#80699B", size: 5 }, color: '#80699B' },
        { label: "Label 5", data: d5, points: { fillColor: "#3D96AE", size: 5 }, color: '#3D96AE' }
    ];

    $.plot($("#placeholder"), data1, {
        xaxis: {
            axisLabel: 'Year',
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5, tickLength: 0
        },
        yaxis: {
            min: 0,
            max: 10000,
            axisLabel: 'Amount',
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5
        },
        series: {
            lines: {
                show: true,
                fill: true
            },
            stack: true,
            points: {
                show: false
            }
        },
        grid: {
            borderWidth: 1
        },
        legend: {
            labelBoxBorderColor: "none",
            position: "right"
        }
    });
});
</script>
</head>

<body>
    <div id="placeholder"></div>
</body>
</html>