Graphing

Making Graphs With Javascript

[rahmuss]

I've been trying to write CSS inside a "document.write()" command to create a dynamic absolute position for objects, so that I can use this to create graphs. There are other purposes I would want to use it for as well. Any thoughts on how to do this? All my attempts don't work correctly.

[Purple Martin]

An easy way to make a graph with JavaScript is to start with a 1 pixel coloured gif, and then use JavaScript to change it's dimensions to make a bar in a bar graph.

You can change just about anything on your page dynamically with JavaScript.

There are lots of free JavaScript graphs available, search Google for them and have a look at how they work to get ideas for your own.

[tedster]

How about a small bit of sample code and maybe a description of how it fails?

[rahmuss]

Here's what I'm working on... I want it to print a period from position: x = 160 and y = 140, to position: x = 0 and y = 140. This should just make a straight line of periods... unfortunately... it only puts one period. Am I doing something wrong in the CSS?

<script type="text/javascript">
var x = 160
var y = 140
while (x>0) {
document.write("<style type='text/css'> div { position: absolute; top:"+y+"px; left:"+x+"px; }</style>")
document.write("<div>.</div>")
x=x-1
}
</script>

[Purple Martin]

The div style is getting redefined each time the loop executes, and only the last style definition is used by the browser. This means all your divs are in the same place.

Try making it write an in-line style for each div, so that each gets it's own position:

while (x>0) {
document.write("<div style='position: absolute; top:"+y+"px; left:"+x+"px;'>.</div>")
}

[MonkeeSage]

NM...

[rahmuss]

I see what you're saying... I've still got a lot to learn. It works great now, thanks Purple Martian!