Flot Chart Custom Legend

Flot chart provides servial attribues that you can use to customize chart legend. 
legend: {
    show: boolean  
    //show or hide legend
    labelFormatter: null or (fn: string, series object -> string)
    //formatting your legend label by using custom functions
    labelBoxBorderColor: color
    //label border color
    noColumns: number
    //number of legend columns
    position: "ne" or "nw" or "se" or "sw"    
    //legend position (north east, north west, south east, south west)
    margin: number of pixels or [x margin, y margin]
    backgroundColor: null or color
    backgroundOpacity: number between 0 and 1
    container: null or jQuery object/DOM element/jQuery expression        
}

Chart legend with specified position and number of columns
ExampleChart legend with specified position
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);
    var pos = "ne";

    var options = {
        legend:{         
            backgroundOpacity: 0.5,
            noColumns: 0,
            backgroundColor: "green",   
            position: pos
        }
    };

    $("input").change(function(){
        $(this).changeposition();
    });

    $.fn.changeposition = function(){        
        pos = $(this).val();

        options = {
            legend:{         
                noColumns: 0,
                backgroundColor: "green",   
                position: pos
            }
        };

        makeChart();       
    };
    
    function makeChart(){
        $.plot($("#flotcontainer"),
            [
                {label:"data1", data:data1},
                {label:"data2", data:data2},
                {label:"data3", data:data3}
            ],
            options
        );
    }

    makeChart();
});
</script>

<!-- HTML -->
<div>    
    <div id="flotcontainer"></div>    
    <br>
        Legend Position : <input id="r1" checked name="R1" type="radio" value="ne" />North East&nbsp;
        <input id="r2" name="R1" type="radio" value="nw" />North West&nbsp;
        <input id="r3" name="R1" type="radio" value="se" />South East&nbsp;
        <input id="r4" name="R1" type="radio" value="sw" />South West
    
</div>
Try this in tester

Chart legend using container to put legend in your designated place
ExampleChart legend using container
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">
#legendContainer {
    background-color: #fff;
    padding: 2px;
    margin-bottom: 8px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #E6E6E6;
    display: inline-block;
    margin: 0 auto;
}

#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 = {
        legend:{         
            container:$("#legendContainer"),            
            noColumns: 0
        },
        grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
        }    
    };
    
    $.plot($("#example-section24 #flotcontainer"),
        [
            {label:"data1", data:data1},
            {label:"data2", data:data2},
            {label:"data3", data:data3}
        ],
        options
    );
    
});
</script>

<!-- HTML -->
<div id="example-section24">        
    <div id="legendContainer"></div>    
    <div id="flotcontainer"></div>    
</div>
Try this in tester
More examples
comments powered by Disqus