Flot Charts

Introduction

Flot Charts - is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Basic Usage

Basic Usage.

Series Types

Series Types.

Categories

Categories.

Adding Annotations

Adding Annotations.

Chart Out Of Symbols

Points can be marked in several ways, with circles being the built-in default. For other point types, you can define a callback function to draw the symbol. Some common symbols are available in the symbol plugin.

Stacked

With the stack plugin, you can have Flot stack the series. This is useful if you wish to display both a total and the constituents it is made of. The only requirement is that you provide the input sorted on x.

Crosshair

You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.

If you combine it with listening on hover events, you can use it to track the intersection on the curves by interpolating the data points (look at the legend).

Pie 1

Pie 1.

With Label Formatter

Pie chart with label formatter.

Labels Inside

Slightly more transparent label backgrounds and adjusted the radius values to place them within the pie.

Black-Colored Labels

Semi-transparent, black-colored label background.

Black Labels On Pie Edge

Semi-transparent, black-colored label background placed at pie edge.

Combined Slices

Multiple slices less than a given percentage (27% in this case) of the pie can be combined into a single, larger slice.

Rectangular Pie

The radius can also be set to a specific size (even larger than the container itself).

Tilted Pie

The pie can be tilted at an angle.

Interactivity

The pie can be made interactive with hover and click events.

Donut Chart

A donut hole can be added to the Pie chart.

Donut Chart With Interactivity

The donut can be made interactive with hover and click events.