Charts - Flot

Plugin Information

Create interactive charts easily for your web projects.

Plugin Name: Flot
Author: Ole Laursen/David Schnur
License: MIT
Website: http://www.flotcharts.org/
Git Branch: flot/flot
Dependencies:
None Required
<script src="vendor/plugins/jqueryflot/jquery.flot.min.js"></script>
Flot has many addons, check official documentation for detailed usage of what's required

Basic Spline Chart

Copy 

<div id="flot-spline" style="height: 220px; width: 100%;"></div>
Copy 

// Define Dataset
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
    d1.push([i, Math.sin(i)]);
}

// Define Grid Style/Options
var Grid = {
    grid: {
        show: true,
        aboveData: true,
        color: "#bbbbbb",
        labelMargin: 15,
        axisMargin: 0,
        borderWidth: 0,
        borderColor: null,
        minBorderMargin: 5,
        clickable: true,
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 20,
    },
    tooltip: true,
    //activate tooltip
    tooltipOpts: {
        content: "%x : %y.0",
        shifts: {
            x: -30,
            y: -50
        },
        defaultTheme: false
    }
}

// Plot Flot Chart
$.plot("#flot-spline", [{
    data: d1,
    lines: {
        show: true,
        fill: true
    },
    color: "#4a89dc"
}], Grid);

Basic Bar Chart

Copy 

<div id="flot-bar" style="height: 220px; width: 100%;"></div>
Copy 

// Define Dataset
var d1 = [
    [0, 10],
    [4, 8],
    [8, 4],
    [12, 22],
    [16, 25],
    [20, 14],
    [24, 10],
    [28, 16],
    [32, 10],
    [36, 8],
    [40, 10]
];
var d2 = [
    [1, 7],
    [5, 12],
    [9, 19],
    [13, 9],
    [17, 11],
    [21, 33],
    [25, 4],
    [29, 25],
    [33, 7],
    [37, 12],
    [41, 14]
];
var d3 = [
    [2, 12],
    [6, 19],
    [10, 10],
    [14, 4],
    [18, 18],
    [22, 25],
    [26, 18],
    [30, 11],
    [34, 12],
    [38, 19],
    [42, 18]
];

// Define Grid Style/Options
var Grid = {
    grid: {
        show: true,
        aboveData: true,
        color: "#bbbbbb",
        labelMargin: 15,
        axisMargin: 0,
        borderWidth: 0,
        borderColor: null,
        minBorderMargin: 5,
        clickable: true,
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 20,
    },
    tooltip: true,
    //activate tooltip
    tooltipOpts: {
        content: "%x : %y.0",
        shifts: {
            x: -30,
            y: -50
        },
        defaultTheme: false
    }
}

// Plot Flot Chart
$.plot("#flot-bar", [{
    data: d1,
    bars: {
        show: true,
        fill: 1,
        fillColor: {
            colors: [{
                opacity: 0.8
            }, {
                opacity: 1
            }]
        }
    },
    color: "#F6BB42"
}, {
    data: d2,
    bars: {
        show: true,
        fill: 1,
        fillColor: {
            colors: [{
                opacity: 0.8
            }, {
                opacity: 1
            }]
        }
    },
    color: "#4A89DC"
}, {
    data: d3,
    bars: {
        show: true,
        fill: 1,
        fillColor: {
            colors: [{
                opacity: 0.8
            }, {
                opacity: 1
            }]
        }
    },
    color: "#3BAFDA"
}], Grid);

Basic Step Chart

Copy 

<div id="flot-step" style="height: 220px; width: 100%;"></div>
Copy 

// Define Dataset
var d1 = [];
for (var i = 0; i < 14; i += 0.5 + Math.random()) {
    d1.push([i, Math.sqrt(2 * i + Math.sin(i) + 5)]);
}

// Define Grid Style/Options
var Grid = {
    grid: {
        show: true,
        aboveData: true,
        color: "#bbbbbb",
        labelMargin: 15,
        axisMargin: 0,
        borderWidth: 0,
        borderColor: null,
        minBorderMargin: 5,
        clickable: true,
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 20,
    },
    tooltip: true,
    //activate tooltip
    tooltipOpts: {
        content: "%x : %y.0",
        shifts: {
            x: -30,
            y: -50
        },
        defaultTheme: false
    }
}

// Plot Flot Chart
$.plot("#flot-step", [{
    data: d1,
    lines: {
        show: true,
        steps: true
    },
    color: "#4A89DC"
}], Grid);

Basic Line Chart

Copy 

<div id="flot-line" style="height: 220px; width: 100%;"></div>
Copy 

// Define Dataset
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
    d1.push([i, Math.sqrt(i)]);
}

// Define Grid Style/Options
var Grid = {
    grid: {
        show: true,
        aboveData: true,
        color: "#bbbbbb",
        labelMargin: 15,
        axisMargin: 0,
        borderWidth: 0,
        borderColor: null,
        minBorderMargin: 5,
        clickable: true,
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 20,
    },
    tooltip: true,
    //activate tooltip
    tooltipOpts: {
        content: "%x : %y.0",
        shifts: {
            x: -30,
            y: -50
        },
        defaultTheme: false
    }
}

// Plot Flot Chart
$.plot("#flot-line", [{
    data: d1,
    lines: {
        show: true
    },
    points: {
        show: true
    },
    color: "#4A89DC"
}], Grid);

Basic Area Chart

Copy 

<div id="flot-area" style="height: 220px; width: 100%;"></div>
Copy 

// Define Dataset
var d1 = [];
for (var i = 0; i < 14; i += 0.1) {
    d1.push([i, Math.sqrt(i * 10)]);
}

// Define Grid Style/Options
var Grid = {
    grid: {
        show: true,
        aboveData: true,
        color: "#bbbbbb",
        labelMargin: 15,
        axisMargin: 0,
        borderWidth: 0,
        borderColor: null,
        minBorderMargin: 5,
        clickable: true,
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 20,
    },
    tooltip: true,
    //activate tooltip
    tooltipOpts: {
        content: "%x : %y.0",
        shifts: {
            x: -30,
            y: -50
        },
        defaultTheme: false
    }
}

// Plot Flot Chart
$.plot("#flot-area", [{
    data: d1,
    lines: {
        show: true,
        fill: true
    },
    color: "#4A89DC"
}], Grid);

Basic Matrix Chart

Copy 

<div id="flot-matrix" style="height: 220px; width: 100%;"></div>
Copy 

// Define Dataset
var d1 = [];
for (var i = 0; i < 14; i += 0.6) {
    d1.push([i, Math.cos(i)]);
}
var d2 = [];
for (var i = 0; i < 14; i += 0.6) {
    d2.push([i, Math.sin(i)]);
}

// Define Grid Style/Options
var Grid = {
    grid: {
        show: true,
        aboveData: true,
        color: "#bbbbbb",
        labelMargin: 15,
        axisMargin: 0,
        borderWidth: 0,
        borderColor: null,
        minBorderMargin: 5,
        clickable: true,
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 20,
    },
    tooltip: true,
    //activate tooltip
    tooltipOpts: {
        content: "%x : %y.0",
        shifts: {
            x: -30,
            y: -50
        },
        defaultTheme: false
    }
}

// Plot Flot Chart
$.plot("#flot-matrix", [{
    data: d1,
    points: {
        show: true,
        radius: 4
    },
    lines: {
        show: true
    },
    color: "#4A89DC"
}, {
    data: d2,
    points: {
        show: true,
        radius: 4
    },
    lines: {
        show: true
    },
    color: "#3BAFDA",
}], Grid);

Basic Donut Chart

Copy 

<div id="flot-donut" style="height: 220px; width: 100%;"></div>
Copy 

// Define Dataset
var d1 = [
	{data: 5, color: "#4A89DC"},
	{data: 15, color: "#3BAFDA"},
	{data: 10, color: "#F6BB42"}
]

// Plot Flot Chart
$.plot('#flot-donut', d1, {
    series: {
        pie: {
            innerRadius: 0.5,
            show: true,
        }
    },
});

Basic Pie Chart

Copy 

<div id="flot-pie" style="height: 220px; width: 100%;"></div>
Copy 

// Define Dataset
var d1 = [
	{data: 6, color: "#4A89DC"},
	{data: 4, color: "#3BAFDA"},
	{data: 3, color: "#F6BB42"},
	{data: 4, color: "#967ADC"}
]

// Plot Flot Chart
$.plot('#flot-pie', d1, {
    series: {
        pie: {
            innerRadius: 0,
            show: true,
        }
    },
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: https://github.com/flot/flot/blob/master/API.md
Advanced Examples: http://www.flotcharts.org/flot/examples/
Return to Top