Welcome to WebmasterWorld Guest from 54.224.57.95

Forum Moderators: open

Message Too Old, No Replies

Graphing

Making Graphs With Javascript

     
12:20 am on Aug 12, 2003 (gmt 0)

10+ Year Member



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.
1:47 am on Aug 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

6:22 am on Aug 12, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



How about a small bit of sample code and maybe a description of how it fails?
9:25 pm on Aug 12, 2003 (gmt 0)

10+ Year Member



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>

2:32 am on Aug 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>")
}

2:46 am on Aug 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



NM...
9:32 pm on Aug 13, 2003 (gmt 0)

10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month