homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Making Graphs With Javascript

 12:20 am on Aug 12, 2003 (gmt 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.


Purple Martin

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

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)

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

Purple Martin

 2:32 am on Aug 13, 2003 (gmt 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)



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

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved