Tag Archive - Flot

Flot Tutorial Series: Creating Different Types of Graphs

Today we will discuss how by using Flot, you can display your data in a number of different ways. In Flot you can have a line graph (the default display for Flot), a bar graph, and a point graph.
Continue Reading…

Flot Tutorial Series: Placing a Chart On Your Website

Now that we know how to create a Flot data set, we can now go over how you actually place a data set into a chart. Thankfully, this is very easy to do.
Continue Reading…

Flot Tutorial Series: Creating A Flot Dataset

The most basic thing that one must know in order to use Flot is to understand how to create a data set. The data set is the actual raw data that Flot uses to construct your chart.

While some other libraries make this difficult to accomplish, Flot actually makes it very simple. In the most basic form, a Flot data set is actually just a multi-dimensional array.

The following is an example of constructing a very basic data set.
var data_set = [[2, 1], [3, 8], [4, 5], [5, 13]];

When this data set is placed on the chart, a line will be created that starts at (2, 1), goes to (3, 8), and so on through the entire data set.

If you want to create a break in your line, you are able to do that as well. Take this for example:
var data_set = [[2, 1], [3, 8], null, [4, 5], [5, 13]];

By placing the null value, we have essentially split the line in half.

Now with a little math, you can create mathematical charts.

var sine_wave = [];
for (var i = 0; i < 14; i += 0.5)
   sine_wave.push([i, Math.sin(i)]);

This data set will create a sine wave.

Now that you have the basic idea how to create a data set, we can continue on to actually creating a chart and placing it on a web page.

Upcoming Series: Flot Charting Using jQuery

This week we will be diving in to the examples given in Flot. Flot is a charting library for jQuery. With Flot you will be able to create charts to present data and allow your users to interact with that data.
Continue Reading…