Flot Basic Area Chart

To draw area chart is relatively easy, just draw line chart and set fill lines attribute to true
series:{
    lines: { fill: true }
}

Area chart
ExampleBasic area 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: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var data11_1 = [
    [1354586000000, 153], [1364587000000, 658], [1374588000000, 198],
    [1384589000000, 663], [1394590000000, 801], [1404591000000, 1080],
    [1414592000000, 353], [1424593000000, 749], [1434594000000, 523],
    [1444595000000, 258], [1454596000000, 688], [1464597000000, 364]
];

var data11_2 = [
    [1354586000000, 53], [1364587000000, 65], [1374588000000, 98],
    [1384589000000, 83], [1394590000000, 980], [1404591000000, 808],
    [1414592000000, 720], [1424593000000, 674], [1434594000000, 23],
    [1444595000000, 79], [1454596000000, 88], [1464597000000, 36]
];

$(function () {    
    var options = {
            series:{
                lines: {                         
                    fill: true
                }
            },
            xaxis: {
                mode: "time"
            },
            grid:{
                backgroundColor: { colors: ["#969696", "#5C5C5C"] }
            }
    };

    var plot = $.plot($("#flotcontainer"), [data11_1, data11_2], options);  
});
</script>

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



More examples
comments powered by Disqus