11,806,350 members (60,697 online)
Article

# Creating graphs using JavaScript

, 26 Jun 2002 75.3K 26
 Rate this:
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.

A list of licenses authors might use can be found here

## Share

 United States
No Biography provided