Flot Realtime Update Line Chart

Realtime update chart comes in handy when you showing data like CPU loading, disk usage or online users counter, even the stock charts, in order to make chart perform realtime updaing, you need to call some of Flot methods
plot.setData(data) //to reset data
plot.draw()        //to redraw chart

We use an array to store data, every time before you redraw the chart, you need to remove the first item of array, and insert a new item into array, then use plot.setData(data) to reset data and finally call plot.draw() to redraw the chart.
//orginal data
var data = [
    [1, 50], [2, 100], [3, 150], [4, 200], [5, 250]
];

//remove the first item of data array
data.shift();

//insert a new data into array
data.push([5, 999]);

//reset data and redraw
plot.setData([data]);
plot.draw();


Realtime update chart
ExampleRealtime update line chart
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>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.time.js"></script>    
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.axislabels.js"></script>

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


<!-- Javascript -->
<script>
var data = [];
var dataset;
var totalPoints = 50;
var updateInterval = 1000;
var now = new Date().getTime();


function GetData() {
    data.shift();

    while (data.length < totalPoints) {     
        var y = Math.random() * 100;
        var temp = [now += updateInterval, y];

        data.push(temp);
    }
}

var options = {
    series: {
        lines: {
            show: true,
            lineWidth: 1.2,
            fill: true
        }
    },
    xaxis: {
        mode: "time",
        tickSize: [2, "second"],
        tickFormatter: function (v, axis) {
            var date = new Date(v);

            if (date.getSeconds() % 20 == 0) {
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                return hours + ":" + minutes + ":" + seconds;
            } else {
                return "";
            }
        },
        axisLabel: "Time",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    },
    yaxis: {
        min: 0,
        max: 100,        
        tickSize: 5,
        tickFormatter: function (v, axis) {
            if (v % 10 == 0) {
                return v + "%";
            } else {
                return "";
            }
        },
        axisLabel: "CPU loading",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 6
    },
    legend: {        
        labelBoxBorderColor: "#fff"
    }
};

$(document).ready(function () {
    GetData();

    dataset = [
        { label: "CPU", data: data }
    ];

    $.plot($("#flotcontainer"), dataset, options);

    function update() {
        GetData();

        $.plot($("#flotcontainer"), dataset, options)
        setTimeout(update, updateInterval);
    }

    update();
});



</script>

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


comments powered by Disqus