Flot is a great plugin for JQuery! I decided to make a simple tutorial in this part and then try to have something more complex (ajax request pulling out data from the database).
Let’s make things first: let’s invoke the scripts.
<script src="../jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="../js/jquery/flot/jquery.flot.js" type="text/javascript"></script> <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
Then, let’s place a div that will contain the chart.
<div id="placeholder" style="width:600px;height:300px"></div>
Now, let’s put our script to initialize the chart:
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
$j(function () {
var dataArray = [];
for (var i=1; i<13; i++) {
dataArray.push([2000+i,Math.random()*11]);
}
//console.log(dataArray);
var data = [
{
label: "Yearly increase",
data: dataArray
}
];
var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 3
},
lines: {
show: true
},
grid: {
borderWidth:0
},
xaxis: {
tickSize:1
},
yaxis: {
tickSize:1,
tickDecimals: 0
}
};
var plotarea = $j("#placeholder");
$j.plot( plotarea , data, options );
});
</script>
Let me explain: as I am using other js libraries, I did put the first line to avoid conflict
var $j = jQuery.noConflict();
then i specified an array that will be my data store. Math.random()*11 will generate a number randomly between 0 and 10.
var dataArray = [];
for (var i=1; i<13; i++) {
dataArray.push([2000+i,Math.random()*11]);
}
As I would like to have a label on my chart, I can specify that in the data format and pass my dataArray (If I have multiple dataset, that is there I should set them)
var data = [
{
label: "Yearly increase",
data: dataArray
}
];
And I set the options for my grid, x and y axes, the legend and so on…
var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 3
},
lines: {
show: true
},
grid: {
borderWidth:0
},
xaxis: {
tickSize:1
},
yaxis: {
tickSize:1,
tickDecimals: 0
}
};
in more details:
- legend will let you customize the … legend
- points & lines are the type I chose for my series (you could choose bars or the newly pie type)
- the grid is the background of your chart
- xaxis is the “horizontal” line and the yaxis, the … vertical one (you’re maybe not that newbie, sorry!)
for more details, you can check the api text document.
Finally get the placeholder and call flot to draw the chart by passing the variables to the plot function:
var plotarea = $j("#placeholder");
$j.plot( plotarea , data, options );
Here is the final code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery/flot/jquery.flot.js"></script>
</head>
<body>
<h2>Chart</h2>
<div id="placeholder" style="width:600px;height:300px"></div>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
$j(function () {
var dataArray = [];
for (var i=1; i<13; i++) {
dataArray.push([2000+i,Math.random()*11]);
}
//console.log(dataArray);
var data = [
{
label: "Yearly increase",
data: dataArray
}
];
var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 3
},
lines: {
show: true
},
grid: {
borderWidth:0
},
xaxis: {
tickSize:1
},
yaxis: {
tickSize:1,
tickDecimals: 0
}
};
var plotarea = $j("#placeholder");
$j.plot( plotarea , data, options );
});
</script>
</body>
</html>
And here is the final result in your browser:
What if now, we want to pull the data from the database using cf… “I’ll be back”!
By newbies for newbies! Sharing some thoughts about RIA techniques and more!
Very Interesting post! Thank you for such interesting resource!PS: Sorry for my bad english, I’v just started to learn this language
eremiya.net – cool!!!!
Hi,
Thanks for the tutorial. When will you be creating the next part discussing how to gather data from a database?
Thanks!
Thanks for the review! I want to say – thank you for this!
Thanks for writing, I very much liked your newest post. I think you should post more frequently, you evidently have natural ability for blogging!
Nice post — this really hits home for me.
I love these stories! Keep making them!
Great tutorial.
Does this plugin provides the functionality to show the y-axis values on the graph beside the tick.
Very nice! I hope by “What if now, we want to pull the data from the database using cf…”, you mean you intend to follow-up by integrating Flot and ColdFusion.
Sorry but I don’t share most of these ideas.
The article is ver good. Write please more
Skilful dispatch! Straight wanted to disenchant you recognize you be undergoing a fresh subscriber- me!
Thanks for alluring the heyday to write in. We pointing to update manifest blog at least on a weekly basis.
Thanks for the great intro to Flot. Flot is pretty awesome. I’m trying to get a better understanding of it for a network monitoring project I’m working on.
I was able to get this little demo rolling locally in just a few minutes.
FYI : For anyone wanting to cut and paste from the “Here is the final code:” section above, just paste into a decent text editor with Regex capable find and replace. Then :
Find : ^[0-9]+.$
Replace : don’t put anything in replace.
That regex will get rid of all those pesky line numbers and periods.
Nice tutorial, i had made my first chart from table data but was struggling a little bit with customization and then i found your tutorial and it helped greatly. So i studied it with a little leftover turkey and my chart is pretty now. Very good job, Thanks.