How to make Flot area chart

Area chart is line chart with filled shape, area chart just like line chart, they both are used for showing trends over time, except area chart is easier to see the proportion of data. This chapter uses estimates of the world`s population over the years as example, statistics from 1800 to 2010, the population growth change of six continents.


Area chart (estimates of the world`s population)

Area chart data

First we create a <div>, and specify an id to it, also set width and height, this will be the placeholder where Flot insert chart.
   
        <div id="flot-placeholder" style="width:400px;height:300px"></div>
        
Next, we create an array variable call rawData1, and insert data to this array, data format like[x,y],because we`re making time series data format, and Flot requires that you need to convert time into javascript timestamps, so we create a function call year() to do all the work in x axis, year(1800) represents that this is the data of year 1800, as for y axis, we put in the value of population. Below only shows the data of Oceania, use the same method to create the other five continents data.
   
        //Oceania
        var rawData1 = [
            [year(1800), 200], [year(1850), 200], [year(1900), 600], [year(1950), 1281], [year(1955), 1426],
            [year(1960), 1589], [year(1965), 1766], [year(1970), 1944], [year(1975), 2156], [year(1980), 2283],
            [year(1985), 2467], [year(1990), 2668], [year(1995), 2892], [year(2000), 3104], [year(2005), 3299],
            [year(2010), 3510]
        ];
        //North America
        var rawData2 = [
            //skip
        ];

        //rawData3 rawData4...

        function year(year) {    
            return new Date(year, 1, 1).getTime();
        }
        
When the data is created, we create another array call dataSet, this array will be used as data source later. Then we insert data objects into this array,label attribute is used for the legend, if you don`t specify one, the series will not show up in the legend. And the rawData we created before will be the value of data attribute. In order to make area chart to be more readable, we use color attribute to give each one of the data series a different color.
   
        var dataSet = [
            { label: "Asia", data: rawData6, color: "#0077FF" },
            { label: "Africa", data: rawData5, color: "#7D0096" },
            { label: "Europe", data: rawData4, color: "#DE000F" },
            { label: "Latin America", data: rawData3, color: "#00B503" },
            { label: "North America", data: rawData2, color: "#ED7B00" },
            { label: "Oceania", data: rawData1, color: "#E8E800" }
        ];
        

Area chart options

The only difference between area chart and line chart is series.lines.fill, if it`s set to true, the chart will come out as area chart, if it`s set to false, the chart will come out as line chart. And series.lines.show is to determine whether the line will show or not.
   
        series: {            
            lines: {
                show: true,
                fill: true
            }
        }
        
Since the time series chart is what we`re making, so xaxis.mode must set be to "time", and also we need to include jquery.flot.time.js plugin, so Flot will interpret data of x axis as date object. We also used xaxis.timeformat, you can set value to it like "%Y/%m/%d" when using this attribute, this will result in tick labels like "2013/03/05", in this example we set timeformat with value "%Y", because we only want ticks to display year. Refer to timeformat specifiers

In order to control how tick labels of x axis are formatted, we used xaxis.tickSize, tickSize is tick interval size, you can set value to it in the form of [value, unit], in here, we set it to [20, "year"], it means that tick labels will be shown in 20 years interval, and unit can also be set to "day" or "hour",  but if you set value to "hour" and your data is based on year, it could cause browser to stop responding due to heavy calculation.

Bacause Flot doesn`t support axis label, so we need to include jquery.flot.axislabels.js plugin to label an axis, axis.axisLabel can be set with a string value, it will be displayed as the label, and axis.axisLabelPadding is to create an area of clear space between the chart and label, you also can set axis label with different fonts and font sizes.

In order to make tick labels fit more our needs, we used axis.tickFormatter to create our own function, the function is passed two parameters, the tick value and an axis object, and should return a string. To make values of y axis to be displayed as currency format, we used number formatter plugin, this way tick labels of y axis will become more readable.
   
        xaxis: {
            axisLabel: "Year",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,            
            mode: "time",
            tickSize: [20, "year"],
            timeformat: "%Y"
        }

        yaxis: {
            axisLabel: "Population (multiply by 10,000)",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
            tickFormatter: function (v, axis) {
                return $.formatNumber(v, { format: "#,###", locale: "us" });
            }
        }
        
By default the legend will appear in the upper right corner(north east) of the chart, but this overlaps with the lines, to avoid this situation, we can move the legend to the left, to do this, we can use legend.position and set value to "nw", "nw" means north west(upper left corner). We also used legend.noColumns, noColumns is the number of columns to divide the legend table into, in here, we set it to 3.
   
        legend: {
            noColumns: 3,
            labelBoxBorderColor: "#858585",
            position: "nw"
        }
        
By default the chart background is white color, we want to change background color, so we could use grid.backgroundColor, it accepts single color like backgroundColor:"#A12858", it aslo accepts gradient color.

We also used tooltip in this example, so we need to set grid.hoverable with true value, when hoverable is set to true, Flot will listen for mouse move events on the plot area and fire a "plothover" event.
   
        grid: {
            hoverable: true,
            borderWidth: 2,
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        }
        

Tooltip

Because Flot doesn`t support tooltip, but Flot provides a workaround for you to create your own tooltip, Below is the complete codes of tooltip, we will explain how it works in more detail in the following chapters.
   
        var previousPoint = null, previousLabel = null;

        $.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {
                if (item) {
                    if ((previousLabel != item.series.label) || 
                         (previousPoint != item.dataIndex)) {
                        previousPoint = item.dataIndex;
                        previousLabel = item.series.label;
                        $("#tooltip").remove();

                        var x = item.datapoint[0];
                        var y = item.datapoint[1];

                        var color = item.series.color;                        
                
                        showTooltip(item.pageX,
                                item.pageY,
                                color,
                                "<strong>" + item.series.label + "</strong><br>" + new Date(x).getFullYear() +
                                " : <strong>Population : " + $.formatNumber(y, { format: "#,###", locale: "us" }) + "</strong>  (multiply by 10,000)");                
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        };

        function showTooltip(x, y, color, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 10,
                left: x + 10,
                border: '2px solid ' + color,
                padding: '3px',
                'font-size': '9px',
                'border-radius': '5px',
                'background-color': '#fff',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }
        

Finishing making a chart

We pass variable dataSet and options that we created above into $.plot, and put $.plot insdie of document.ready, to prevent Flot start drawing before DOM is completely loaded. And call UseTooltip() to build tooltip.
   
        $(document).ready(function () {
            $.plot($("#flot-placeholder"), dataSet, options);    
            $("#flot-placeholder").UseTooltip();
        });
        


Timeformat specifiers
   
        %a: weekday name (customizable)
        %b: month name (customizable)
        %d: day of month, zero-padded (01-31)
        %e: day of month, space-padded ( 1-31)
        %H: hours, 24-hour time, zero-padded (00-23)
        %I: hours, 12-hour time, zero-padded (01-12)
        %m: month, zero-padded (01-12)
        %M: minutes, zero-padded (00-59)
        %q: quarter (1-4)
        %S: seconds, zero-padded (00-59)
        %y: year (two digits)
        %Y: year (four digits)
        %p: am/pm
        %P: AM/PM (uppercase version of %p)
        %w: weekday as number (0-6, 0 being Sunday)
        

Practice

You can find the source code of this example and test it online! Go to Example Tester