Welcome to WebmasterWorld Guest from 50.19.190.144

Forum Moderators: open

Message Too Old, No Replies

Graphing

Making Graphs With Javascript

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

Junior Member

10+ Year Member

joined:July 25, 2003
posts:61
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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)

Junior Member

10+ Year Member

joined:July 25, 2003
posts:61
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


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

Junior Member

10+ Year Member

joined:July 25, 2003
posts:61
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members