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.
It is very simple to make these different types of graphs. Take for example the following data set:
var data_set = [[0, 3], [4, 8], [8, 5], [9, 13]];
As review, you can place it as a standard line graph by using the following code:
$.plot($("#placeholder"), [ data_set ]);
Now you can also use a modification to the previous code to set more options, including the way to graph the data.
$.plot($("#placeholder"), [
{
data: d1,
lines: { show: true, fill: true },
label: "Data Set 1"
},
{
data: d2,
bars: { show: true },
label: "Data Set 2"
},
{
data: d3,
points: { show: true },
label: "Data Set 3"
},
{
data: d4,
lines: { show: true },
label: "Data Set 4"
},
{
data: d5,
lines: { show: true },
points: { show: true },
label: "Data Set 5"
}
]);
Ok now pretending that data set’s d1 through d5 exist. Data set 1, creates a line that has a fill associated with it. Data set 2 creates a bar chart. Data set 3 creates a point line. Data set 4 is a generic line. Data set 5 creates a line with dots at its points. The option “show: true” tells the chart to show the data. If you set it to false, that data set will not be displayed.
The label option creates is placed in a list of options on the upper right hand corner.
You can take a look at an example by clicking here.
