flow7.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<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: 900px;
    height: 600px;
    text-align: center;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
}

html
{
  background-color: #e0eeee;
}
div img
{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

button
{
    -moz-box-shadow: 0px 10px 14px -7px #276873;
    -webkit-box-shadow: 0px 10px 14px -7px #276873;
    box-shadow: 0px 10px 14px -7px #276873;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
    background-color:#599bb3;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    text-decoration:none;
    text-shadow:0px 1px 0px #3d768a;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 200;

}

.bottom
{
    bottom: 0;
    width: 100%;
    height: 200px;
}


</style>


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


function GetData()
{

        var y = Math.random() * 100;
        var temp = [now += updateInterval, y];
		    console.log(temp)
        data.push(temp);
}

var options = {

    series:
    {
        lines:
        {
            show: true,
            lineWidth: 2.6,
            fill: true

        }
    },
    xaxis: {
        mode: "time",
        tickSize: [10, "second"],
        tickFormatter: function (v, axis) {
            var date = new Date(v);

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

                return hours + ":" + minutes;
            } else {
                return "";
            }
        },
        axisLabel: "Time",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 18,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 20
    },
    yaxis: {
        min: 0,
        max: 100,
        tickSize: 10,
        tickFormatter: function (v, axis) {
            if (v % 10 == 0) {
                return v;
            } else {
                return "";
            }
        },
        axisLabel: "Flow",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 18,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10,
        axisLabelFillColor: "#6495ed"
    },
    legend: {
        show: false
    },
    grid: {
            show: true,
            borderWidth: 20,
            hoverable: true

        }
};




$(document).ready(function () {

  $("#end").click(function(){
  flag = !flag;
  console.log(flag);
  });

    GetData();

    dataset = [
        { label: "CPU", data: data, color: "#00bfff" }
    ];

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

    function update()
    {
      GetData();

      $.plot($("#flotcontainer"), dataset, options)
      if (flag == true)
      {
        setTimeout(update, updateInterval);
      };



    }


  update();



});




</script>

<!-- HTML -->
<div>
  <img src="logo03.png" style="width:320px; height:180px;">
</div>

<div id="flotcontainer"></div>

<button id = "end">End Flow </button>