JQuery programmers can create charts with the Flot Plug-In.
JQuery offers JavaScript programmers a library that allows them to create dynamic web pages that can quickly fetch data from servers and simplifies how JavaScript handles HTML and server requests. Through JQuery, you can install other scripts, such as graph and chart libraries, that handle the complicated business of creating images and drawing lines in order to make creating charts simple and straightforward.
Instructions
- 1
Create a JavaScript script with JQuery included:
<script type="text/javascript" src="jquery.js"></script>
- 2
Download the "Flot" Charting libraries from code.google.com/p/flot.
-
- 3
Include the Flot libraries in the JavaScript code:
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
- 4
Write a simple graph with two simple data lines. The plot points in variable "d1" signifiy x-y pairs:
<script id="source" language="javascript" type="text/javascript">
$(function () {
// a null signifies separate line segments
var d1 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1]);
});
</script>
