## Wednesday, November 04, 2009

### How to Plot Moving Graphs Using Flot Library

Plotting a moving graph is nothing other than plotting an instance of a varying data set at each refresh. However, to get the moving effect you need to change the data set as stated below

1. Discard the leftmost Y value of the previous step
2. Shift the remaining Y values to the left
3. Add the new coming value as the rightmost Y value

Flot is an opensource Javascript plotting library for jQuery. Now let's see how to do this using Flot.

Firs you need to download flot library and add followings to your js folder.
1.jquery.js
2.jquery.flot.js
3.excanvas.js (This is needed if your browser is IE)

Now let's create the html page

```<html>
<head>
<!--Include the css file and flot libs-->
<LINK REL=StyleSheet HREF="css/layout.css" TYPE="text/css">

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/excanvas.js"></script>
....
....
.... ```

Here is the CSS file used

```body {
font-family: sans-serif;
font-size: 16px;
margin: 50px;
max-width: 800px;
background-color:#000000;
}

div.graph {
width:500px;
height:300px;
}
```

Let's include javascript functions inside HEAD

```....
....
<script id="source" language="javascript" type="text/javascript">
var running = false;
var array;
var xscale = 100;

//this function does the plotting
function draw() {
//shift the values to left
for (var i = 0; i < this.xscale - 1; i++) {
this.array[i] = [i,this.array[i + 1][1]];  // (x,y)
}

//add the new coming value to the last postion
this.array[this.xscale - 1] = [this.xscale - 1,Math.random()];

\$.plot(\$("#graphdiv"), [
{
label: "Y vs X",
data: this.array,
lines: { show: true, fill: true, fillColor: "rgba(249, 28, 61,0.3)",lineWidth: 3.5 },
color:"rgba(249, 28, 61,1)"
}
],
{
xaxis: {
ticks: generateTicks(),
min: 0

},
yaxis: {
ticks: [0 , 0.2, 0.4, 0.6, 0.8, 1.0, 1.2],
min: 0
},

//placing a grid
grid: {
show: true,
color: '#474747',
tickColor: '#474747',
borderWidth: 1,
autoHighlight: true,
mouseActiveRadius: 2
}

});
}

//This creates the data array with 0.0 inital Y values at the initialization time
function initialize() {
this.array = new Array();
for (var i = 0; i < xscale; i++) {
this.array[i] = [i, 0.0];
}
}

//This is used to generate ticks for X axis (value 0 will be on the right)
function generateTicks() {
var tickArray = [];
var startTick = 20;
var i = startTick - 1;
var weight = this.xscale / 20;
do {
var t = (startTick - i) * weight - 1;
var v = i * weight;
if (v == 0) {
v = "0";
}
tickArray.push([t, v]);
i--;
} while (i > -1);
return tickArray;
}

//This function is called once per every 1000ms
function refreshStat() {
if (!running) {
running = true;
draw();
running = false;
}
}

\$(document).ready(function () {
initialize();
refreshStat();
setInterval("refreshStat()", 1000);
});

</script>
</head>
```

Now here goes the BODY of the html

```<body>
<table cellspacing="50">
<tr>
<td>
<div id="graphdiv" class="graph"></div>
</td>
</tr>
</table>
</body>
</html>
```

Then you'll get a moving graph. I've posted some still instances of the graph below

You can customize the graphs as your wish. Flot API will help you on that. This is pretty simple and straight. Just give a try.

#### 10 comments:

sunny said...

thank you!!!! your graph really helped me a lot! i thought that you need to refresh the image to get a dynamic graph! hahaha

Seema said...

Thanx a lot ur graph plot article is more helpful.Explores most of the flot lib set properties.

adlawan89 said...

Hi,

Can anyone help me with my project? My plan is to change Math.random into a variable and this variable varies upon the values of mysql table.

I've already managed one, but it only stores the first value and the value is not refreshing. It keeps constant, so all I can see is a horizontal line.

Thanks in advance!,
Felipe

Unknown said...

oyur post is very helpful .
Please help on this :
How to name the X and Y axis on the graph.

Unknown said...

Thank u man.. it was really very helpful for me..

dany said...

I would like to add a few points at a certain value, any ideas?

Guest said...

This post is giving us really very beneficent knowledge about moving graphs and we can get some information from this post for bestessays. We can easily understand what he want to say because he declared his point of view very well.

Vale Co Xenia said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

Unknown said...

What is the significance of "this" keyword ? Will the code work without this ?

Term Paper Writing Services said...

Professional Human Resource Writing Services is very popular for students in search of human resource case study writing services and human resource research paper services.