make real Time charts with Flot

10:30 PM Unknown 0 Comments


1.Introduction

In this post we will be talking about how to to make real time progressing chart , to be frank i had been searching for a selections for a quit a while ,now and the best solution ,i have came up with so far is to use flot , flot framework  is a good way to do plotting , its ,fast,free and open source.

2.Flot VS Google charts !?

Flot :

  1. jQuery plugin : if you are familiar with jQuery (or if your apps is integrated with jQuery), it seems natural to use Flot
  2. Offline visualization : you can test or have it installed into an internal website. Google Visu can only work if you have acces to the google website !!
  3. Customization : this is basically a JavaScript file so if you are good at JS coding, you can customize your charts as your convenience. Also the Flot plugin system allows you better modularity
Google charts :
  1. Documentation : awesome ! Examples for each type of graphs are available in the Google site
  2. Easy to use : Really. Easier than Flot (that requires to somehow customize the div container)
  3. Powerful : you have many sorts of graphs and features (zooming, interactivity,...)

3.Requirement


  • Flot library Flot_library
  • Sublime edit Text
  • Wamp server/EasyPHP or other ...
  • Jquery CDN

4.Files

start your Wamp server and then create this files in WWW folder (C:/wamp/www)


5.index.php


<!-- NodeME{2016} @iheb_b3N_Sal3m  !-->
<script src="flot/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="flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="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 get_feeds_from_the_db()//ajax request to get the finale data from backend
{


return $.ajax({
      url: "Get_feeds.php"
  });

}



function GetData(i) {
    data.shift();

    while (data.length < totalPoints) {   
        var y=i;//axe_y
        var temp = [now += updateInterval, y];//axe_x
        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: "temperature", data: data }
    ];

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

    function update() {
        var promise = get_feeds_from_the_db();
  promise.success(function (data) {
  console.log(data);//console output to check the function
        GetData(data);
        $.plot($("#flotcontainer"), dataset, options)
        setTimeout(update, updateInterval);
       

});

    }

    update();
});



</script>

<!-- HTML -->
<!-- Your app starts here!!   -->
<div id="flotcontainer"></div>

6.Get_feeds.php

This this is the logic page of our application .If you need to fetch data from the data base you w'll just connect to your host server ,get the feeds ,then echo the out put .
<?php
/*--------------------------------------
write your code here,if u need to get feeds from
mySQL data base


-----------------------------------------*/


echo rand(0,100); //generate random number between 0<y<100

?>

7.Screenshot


8.Download demo



9.Watch the live demo here :



Unknown