Flot Chart Legend

To make Flot chart shows legend, you must specify data label
//this chart will show legend
$.plot($("#flotcontainer"), 
       [
         {label: "data1", data: dataset1},
         {label: "data2", data: dataset2},
         {label: "data3", data: dataset3}
       ]);  

//this chart will NOT show legend, because lack of label attributes
$.plot($("#flotcontainer"), 
       [
         {data: dataset1},
         {data: dataset2},
         {data: dataset3}
       ]);

Line chart with legend
ExampleChart legend
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: left;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(function () { 
    function GenerateSeries(added){
        var data = [];
        var start = 100 + added;
        var end = 500 + added;

        for(i=1;i<=20;i++){        
            var d = Math.floor(Math.random() * (end - start + 1) + start);        
            data.push([i, d]);
            start++;
            end++;
        }

        return data;
    }

    var data1 = GenerateSeries(0);
    var data2 = GenerateSeries(10);
    var data3 = GenerateSeries(20);

    $.plot($("#flotcontainer"),
        [
            {label:"data1", data:data1},
            {label:"data2", data:data2},
            {label:"data3", data:data3}
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            }      
        }
    );
});
</script>

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



Bar chart with legend
ExampleBar chart with legend
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>
<script src="http://static.pureexample.com/js/flot/jquery.flot.stack.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: left;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(function () { 
    function GenerateSeries(added){
        var data = [];
        var start = 100 + added;
        var end = 500 + added;

        for(i=1;i<=20;i++){        
            var d = Math.floor(Math.random() * (end - start + 1) + start);        
            data.push([i, d]);
            start++;
            end++;
        }

        return data;
    }

    var data1 = GenerateSeries(0);
    var data2 = GenerateSeries(10);
    var data3 = GenerateSeries(20);

    var options = {
        series: {
            stack:true,
            bars: {
                show: true
            }
        }
    };

    $.plot($("#flotcontainer"),     
        [
            {label:"data1", data:data1},
            {label:"data2", data:data2},
            {label:"data3", data:data3}
        ]
        , options);
});
</script>

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



Pie chart with legend
ExamplePie chart with legend
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>
<script src="http://static.pureexample.com/js/flot/jquery.flot.stack.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: left;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(function () { 
    function GenerateSeries(added){
        var data = [];
        var start = 100 + added;
        var end = 500 + added;

        for(i=1;i<=20;i++){        
            var d = Math.floor(Math.random() * (end - start + 1) + start);        
            data.push([i, d]);
            start++;
            end++;
        }

        return data;
    }

    var options = {
            series: {
                pie: {
                    show: true,
                    
                    tilt: 0.5
                }
		    }
         };
    
    var data = [
        {label: "data1", data:GenerateSeries(0)},
        {label: "data2", data:GenerateSeries(0)},
        {label: "data3", data:GenerateSeries(0)},
        {label: "data4", data:GenerateSeries(0)},
        {label: "data5", data:GenerateSeries(0)},
        {label: "data6", data:GenerateSeries(0)}
    ];

    $.plot($("#flotcontainer"), data, options);  
});
</script>

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


comments powered by Disqus