Pikemere Web Services

Graphs are a great way to present data on the web. Sometimes tables aren’t enough to visually interpret data and only a graph will do. Flot is a really useful tool to create graphs for the web either statically or on the fly. It uses jQuery and works with Firefox 2+, Internet Explorer 6+, Opera 9.5+ and Konqueror 4+ and uses HTML5 canvas (using excanvas emulation for Internet Explorer 8 or earlier).

Why should I use it?

Flot is completely free to use, commercially or non-commercially, and there are plenty of different graphs and charts to choose from. A large number of companies and individuals are using Flot – you can see some examples here: http://code.google.com/p/flot/wiki/FlotUsage.

Where do I get hold of Flot and how do I use it?

To use Flot you need to include the source files for Flot and jQuery in your HTML document.

You can download the latest version of Flot from here: http://code.google.com/p/flot/downloads/list and the latest version of jQuery from here: http://jquery.com.

Note that you need to include them in this order as Flot is dependent on jQuery. For Internet Explorer 8 or earlier, you will need to also include the excanvas file:

<!--[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>

Then in the head section of your HTML document, include the following code:

<script type="text/javascript">
$(document).ready(function(){
	$.plot($("#placeholder"), data, options);
});
</script>

This is where you call the ‘plot’ function that creates the graph in your document. ‘Placeholder’ is the element (preferably a div) that the graph will be inserted into, ‘data’ is an array of data series to be used in your graph, and ‘options’ is completely optional. As Flot uses many default values when generating graphs, you don’t have to include anything for options, but if you want to make use of additional customised features, then this is the place to put your code.

You will also need to include a div element in the body section of your HTML document – the place where the chart will be inserted.

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

Remember that you need to make sure you give your chart a width and a height else Flot will not know how to scale the graph and will not display anything at all:

#placeholder {
	width: 500px;
	height: 300px;
}

That’s all there is to including the basics of Flot in your HTML document. You are now ready to create different types of graphs and charts – take a look at the other tutorials below.

• Flot Tutorial – Line Graphs
• Flot Tutorial – Bar Charts
• Flot Tutorial – Pie Charts
• Flot Tutorial – Area Charts
• Flot Tutorial – Scatter Graphs