Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

Introduction

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:

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

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:

<script>
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="'+
        graphvalue[i]/100*barlength+
        '" height="15"><br>')
</script>
Jill: 
 
Bob:
 
Tony  
 

The secret here is the code:

width="'+graphvalue[i]/100*barlength+'"

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.

License

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

Share

About the Author

Andy-Scott

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140921.1 | Last Updated 27 Jun 2002
Article Copyright 2002 by Andy-Scott
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid