WP Flot

WP Flot is a Wordpress plugin adding shortcodes to easily add line, pie and bar charts using the Flot library.

View on wordpress.org

Share on Facebook or Twitter.

Examples

Basic line chart

[linechart] { label: "A red line",
color: "#e4062d",
data: [[2013,38],
[2012, 38],
[2010, 30],
[2006, 33],
[2003, 42],
[2002, 23],
[1998, 45]] }
[/linechart]

Line chart with steps and fill

[linechart fill="yes" steps="yes" miny="15"] { label: "A red line",
data: [[2013,38],
[2012, 38],
[2010, 30],
[2006, 33],
[2003, 42],
[2002, 23],
[1998, 45]] }
[/linechart]

Basic pie chart

[piechart]
{ label: "Series1", data: 10},
{ label: "Series2", data: 30},
{ label: "Series3", data: 90},
{ label: "Series4", data: 70},
{ label: "Series5", data: 80},
{ label: "Series6", data: 110}
[/piechart]

Pie chart with legend

[piechart legend="true"]
{ label: "Series1", data: 100},
{ label: "Series2", data: 230},
{ label: "Series3", data: 903},
{ label: "Series4", data: 323},
{ label: "Series5", data: 244}
[/piechart]

Bar chart

Bar charts in Flot work similar like line charts, which means the bars are not spaced out evenly by themselves. Take this in account when inputting your data. Also note that all values have to be a number.

[barchart]
{ label: "Bars",
data: [[1, 6],[2, 4],[3, 5],[4, 6],[5, 14],[6, 5],[7, 12]] },
{ label: "More bars",
data: [[1.5, 3],[2.5, 3],[3.5, 15],[4.5, 3],[5.5, 10],[6.5, 11],[7.5, 10]] }
[/barchart]

Possible attributes

Attribute Valid on Accepts Description
height, width All px or % Height or width of the chart
minx, maxx, maxy, miny All px or % Minimum and maximum values of y- or x-axis
legend All True or false Show the legend
fill Line True or false Fill the area between x-axis and line
points Line True or false Show datapoints on the line
steps Line True or false The line is stepped (doesn't work well with points)
donut Pie 0 - 1 Whether the pie chart has a 'dougnut hole', and it's size
horizontal Bar True or false Whether the bars should be vertical or horizontal.