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>
//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(); }
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 } }
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" }); } }
legend: { noColumns: 3, labelBoxBorderColor: "#858585", position: "nw" }
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)