Flot Markings

X axis markings
ExampleX axis markings example
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://static.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- 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 markings = [
        { xaxis: { from: 1, to: 2 }, color: "#E8E8E8" },
        { xaxis: { from: 4, to: 5 }, color: "#E8E8E8" },
        { xaxis: { from: 7, to: 8 }, color: "#E8E8E8" },
        { xaxis: { from: 10, to: 11 }, color: "#E8E8E8" },
        { xaxis: { from: 13, to: 14 }, color: "#E8E8E8" },
        { xaxis: { from: 16, to: 17 }, color: "#E8E8E8" },
        { xaxis: { from: 19, to: 20 }, color: "#E8E8E8" }

    ];

    var options = {            
             series: {
                lines: { show: true, lineWidth: 3 },
                shadowSize: 0
            },
            grid: {
                markings: markings,
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            }      
    };

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

<!-- HTML -->
<div id="flotcontainer" style="width: 680px;height:200px;margin-top:10px; text-align: left;"></div>



Y axis markings
ExampleY axis markings example
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>

<!-- 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 markings = [
        { yaxis: { from: 0, to: 50 }, color: "#E8E8E8" },
        { yaxis: { from: 100, to: 150 }, color: "#E8E8E8" },
        { yaxis: { from: 200, to: 250 }, color: "#E8E8E8" },
        { yaxis: { from: 300, to: 350 }, color: "#E8E8E8" },
        { yaxis: { from: 400, to: 450 }, color: "#E8E8E8" },
        { yaxis: { from: 500, to: 550 }, color: "#E8E8E8" }
    ];

    var options = {            
             series: {
                lines: { show: true, lineWidth: 3 },
                shadowSize: 0
            },
            grid: {
                markings: markings,
                backgroundColor: { colors: ["#96CBFF", "#75BAFF"] }
            },
            yaxis:{
                color:"#8400FF",
                min:0
            },
            xaxis:{
                color:"#8400FF"
            }
    };

    $.plot($("#example-section31 #flotcontainer"),
        [
            {data:data1, color:"#FF7575"},
            {data:data2, color:"#75FF95"}
        ], options
    );
});
</script>

<!-- HTML -->
<div id="example-section31">    
    <div id="flotcontainer" style="width: 680px;height:200px;margin-top:10px; text-align: left;"></div>    
</div>


comments powered by Disqus