jQuery Flot Introduction

Flot is a javascript chartting library for jQuery, it`s fast, small and easy to use, can handle 1,000 data points still very fast.
EXAMPLE
ExampleSimple Flot chart
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 150px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function(){	
    var data = [];

    for (var i = 0; i < 10; i += 0.5){        
        data.push([i, Math.tan(i)]);
    }

    var options = {
        series: {
                   lines: { show: true },
                   points: { show: true }
               }
    };

    $.plot($("#flotcontainer"), 
                [
                    {
                    data:data,points:{symbol: "circle"}
                    }
                ],
                options);

});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>


comments powered by Disqus