Attractive Plotting Plugin with jQuery - Flot

Attractive Plotting Plugin with jQuery - Flot

Flot is a JavaScript plotting library works with jQuery for creating attractive looks and interactive Charts or Graphs using HTML5 canvas tag. 

You might also like jQuery Flot Animator plugin to animate your flot charts.

Basic Usage:

1. Include jQuery Library and Flot.js

<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->

2. Markup

<div id="placeholder" style="width:600px;height:300px;"></div>

3. Call the function

<script type="text/javascript">
$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>

Changelog:

v2.1.6 (2019-02-12)

  • update to the latest version.

This awesome jQuery plugin is developed by flot. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 12.02.2019
  • Source