How to Graph With jQuery
You can use one of several jQuery plug-ins to quickly generate charts and graphs using JavaScript and jQuery. Evaluate the different libraries and select the best match for your needs. Write the HTML "<head>" tag to include the libraries, and the "<body>" tag to include the data and the code to generate the graph. Test the HTML program to make sure it functions properly.
Other People Are Reading
Instructions
-
-
1
Download the plug-in from its host site. Decompress the plug-in in a directory that can be accessed by the JavaScript program that will use it.
-
2
Create a new HTML 5 file using an HTML editor or Notepad. Add the "<head>" tag, specify a window title using the "<title>" tag and add the jQuery and charting plug-in libraries using the "<script>" tag:
<html>
<head>
<title>jQuery Graphs</title>
<script src="https://ajax.googleapis.com/ajax/l;ibs/jquery/1.6.4/jquery.min.js"></script>
<script src="lib/flot/jquery.flot.min.js"></script>
</head> -
-
3
Add a "<body>" tag and an empty "<div>" tag with an "id" where you want the graph to display. Select the "<div>" tag using jQuery with "$('#id')." Insert the JavaScript code to display a chart or graph:
<body>
<div id="mychart" style="width:600px;height:300px"></div>
<script>
$(document).ready(function() {
var dataPoints = [[1,27964], [2,33435], [3,43165], [4,50359], [5,54861], [6,82197], [7,99516], [8,166065], [9,129773]];
$.plot($("#mychart"), [{data:dataPoints, bars:{show:true}}])});
</script>
</body>
</html> -
4
Save the HTML file. Open it in a Web browser to verify that the graph displays properly.
-
1
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
