Preparing the HTML

To use Flotr you’ll need to include the following scripts between the header tags.

<!--[if IE]><script language="javascript" type="text/javascript" src="path/to/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="path/to/prototype-x.x.x.x.js"></script>
<script language="javascript" type="text/javascript" src="path/to/base64.js"></script>
<script language="javascript" type="text/javascript" src="path/to/canvas2image.js"></script>
<script language="javascript" type="text/javascript" src="path/to/canvastext.js"></script>
<script language="javascript" type="text/javascript" src="path/to/flotr.js"></script>

The first script tag is included as a html conditional statement. This makes sure the excanvas javascript file is only included when the visitor uses Internet Explorer. Firefox, Safari and Opera 9 support the canvas tag which allows 2d drawing. Internet Explorer has something similar to the canvas tag, called VML. Excanvas brings the canvas functionality to Internet Explorer, but is not needed by other browsers.

Now we’ve included the javascript files, you need a div element in which the graph will be displayed. When drawing, Flotr inserts two canvas tags into the div. The first canvas element is used to draw the background grid, the axis and the graph. The second canvas element is used as an overlay that displays user interaction.

It’s very important to set the width and the height of the container div. You can do this with an inline style attribute, or just by a css rule. An example of a container div:

<div id="container" style="width:600px;height:300px;"></div>

That’s all html you’ll need. Of course you can style the various parts of the graph that’s generated by Flotr. Read more about it in the css section.

Preparing the Javascript

Flotr has an extremely simple syntax. Drawing a graph is nothing more than calling new Flotr.Graph(element, series, options) or Flotr.draw(element, series, options).

The arguments are:

• element → The container element.
• series → An Array of (data)series.
• options → Optional options Object.

Flotr (Data)Series

Data accepted by Flotr consists of an Array of series like:

[ serie1, serie2, ... ]

A series can either be raw data or an Object with properties. The raw data format is an Array of x- and y-coordinates:

[ [x1, y1], [x2, y2], ... ]

When passing an Object, you can also pass series specific options to Flotr:

{
    color: color or number,
    data: rawdata,
    label: string,
    lines: specific lines options,
    bars: specific bars options,
    points: specific points options,
    mouse:  mouse tracking options,
    shadowSize: number
}

Such a series Object might look like this:

{
    data: [ [1, 2], [2, 4], [3, 6] ],
    label: "y = 2x",
    lines: {fill: true},
    points: {show: true}
}

Here’s an example of how the javascript for a graph with two series might look like.

// Execute this when the page's finished loading
var f = Flotr.draw(
	$('container'), [
	{ // => first series
	    data: [ [0, 0], [1, 2], [2, 4], [3, 6], [4, 8] ],
	    label: "y = 2x",
	    lines: {show: true, fill: true},
	    points: {show: true}
	},
	{ // => second series
	    data: [ [0, 2.5], [1, 5.5], [2, 8.5], [3, 11.5], [4, 14.5] ],
	    label: "y = 2.5 + 3x"
	}]
);

The graph will be inserted into the element with id container. The first series consists of a line with points on the specified coordinates (in the data property). When a label is specified, a legend will be automagically added to the graph. The second series is just a line of the function y = 2.5 + 3x. To read more about data series, check out PassingDataToFlotr.

The options Object

The third argument of the Flotr.draw() function is an optional Object with properties that that override the default properties for the legend, the grid, lines, xaxis etc:

{
    colors: array of colors or numbers,
    legend: specific legend,
    xaxis: specific xaxis options,
    yaxis: specific yaxis options,
    grid: specific grid options,
    lines: specific lines options,
    bars: specific bars options,
    points: specific points options,
    selection: mouse selection options,
    mouse: mouse tracking options,
    shadowSize: number
    /// and other options
}

So the options Object overrides the default options, but those options in their turn are overridden by options defined in the series Objects. I refer to the documentation to read more about the options.