Flot Basic Line Chart

Simple line chart
ExampleSimple line 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 data1 = [
    [10, 10], [20, 15], [30, 22], [40, 18], [50, 50], [60, 10],
    [70, 10], [80, 15], [90, 22], [100, 18], [110, 50], [120, 10],
    [130, 10], [140, 15], [150, 22], [160, 18], [170, 50], [180, 10],
    [190, 10], [200, 15], [210, 22], [220, 18], [230, 50], [240, 10]
];

$(document).ready(function(){	
    $.plot($("#flotcontainer"), [
        {
            data: data1,
            lines: { show: true}
        }
    ]);

});
</script>

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


Line chart with legend

If you want to add legend on chart, you have to set series label attribute
//if you don`t set label, legend won`t show up
$.plot(placeholder,
     [
      {data: dataLarge1}
     ]
);
//after label set, legend will show up
$.plot(placeholder,
     [
      {label: 'data1', data: dataLarge1}
     ]
);

Multiple series line chart with legend
ExampleMultiple series line 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>

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


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

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

    return data;
}

$(document).ready(function(){	
    var dataLarge1 = generateSeries(0);
    var dataLarge2 = generateSeries(300);  
    
    $.plot($("#flotcontainer"),
        [
            {label: "data1", data: dataLarge1},
            {label: "data2", data: dataLarge2}
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis: {
                ticks: 20
            },
            yaxis: {
                ticks: 10
            }
        }
    );

});
</script>

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


comments powered by Disqus