Click here to Skip to main content
12,750,208 members (37,074 online)
Click here to Skip to main content
Add your own
alternative version


26 bookmarked
Posted 26 Jun 2002

Creating graphs using JavaScript

, 26 Jun 2002
Rate this:
Please Sign up or sign in to vote.
JavaScript can be used to dynamically generate a bar graph with user supplied data. This article shows you how.


JavaScript can be used to dynamically generate a bar graph with user supplied data. This is due to the simplicity of bar graphs in general, which consists simply of images of varying lengths. We use JavaScript to dynamically write out each image, each with its length calculated using the data entered.

All we need is a simple 1x15 image to start things off:


If I wanted to stretch this image to 50x15, I do so by generating the image using JavaScript:

document.write(<img src="poll.gif" width="50" height="15">')

And with this forms the basis of a dynamic bar graph! Here's a simple script I wrote that demonstrates a working example of graph creation using JavaScript:

var graphtext=new Array("Jill", "Bob", "Tony") //Graph items
var graphvalue=new Array("60", "45", "95") //Graph values (in percentage, so 70=70%)
var barlength=200
for (i=0;i<graphtext.length;i++)
document.write (graphtext[i]+
        ': <img src="poll.gif" width="'+
        '" height="15"><br>')

The secret here is the code:


This makes the width of the graph dynamic and based on the data supplied by the user. Basically each width is derived by dividing the input value by 100 to get its percentage equivalent, then multiplied by the baseline bar image length.

There you have it! Dynamic graphs made possible using JavaScript. You may want to take a look at a script called JavaScript Graph-It from JavaScript Kit, which is a user friendly and more sophisticated JS graphing script. That's where I got the general idea of this tutorial from.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170215.1 | Last Updated 27 Jun 2002
Article Copyright 2002 by Andy-Scott
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid