Topic awaiting preservation: "Draw"-object in Javascript? (Page 1 of 1)

Does anyone know if there is some kind of "draw" object in javascript. I would like to draw a line graph depending on a datasource. I know there are several ways to generate bar graphs, but I want line graphs. I don't know but it would be nice if such an object exists so I can draw lines, squares, circles and points in all kind of colors. If this isn't possible in javascript, any good alternatives?

You can't actually "draw" with Javascript....

You have four choices depending on what you want to do and where you'll be getting the data from to make these graphs:

SVG - Not very well supported but possibly the best solution for what you want to do.
Flash - Requires a plugin and it's tricky to send data to.
Backend Language - Something like PHP using the GD library or a Perl + ImageMagik combo might work well too, although this would be done creating image files on page request and sending them to the browser. Usualy used for web site stat graphs and the like or for generating graphs from other backend data sources like databases and the like.
Fake Javascript Bar Graphs - You could use CSS+Javascript to construct simple bar graphs but it would be tricky and rather limiting.

[This message has been edited by Dracusis (edited 12-16-2002).]

I am not aware of anyone who has done this in Javascript. The circles would be pretty hard to do but the 90 degree stuff is just possible. One could use divs with appropriate background colors to create boxes and lines. It's a actually a tempting challenge. It might be fun to start writing a basic set of box drawing objects and see where it takes us. Anybody else see potential with this one?

. . : slicePuzzle

The box are piece of cake.
Drawing some lines in javascript is fast and easy. Try to see the lines in a way that wouldn't hurt Javascript You can even make some small 3D objects rotating in realtime.
The circles might give some headache.

Mathieu "POÏ" HENRI

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

shameless begging for help

Not to get off topic or anything, but...uh...Bugs
If you're interested in drawing on the screen, why don't you come over here and give me a hand.
It's not javascript, but drawing on the screen nonetheless.

Thank you
Now back to your regularly scheduled thread.

You can make object and circles etc.. in Js or more to the point in IE, using object and weird things and various shapes. I never bothered with it myself. Its in book I have so Im sure you can find it somewhere on the net.

Whats SVG ? <- Is that what Im talking about ?

It's easy to draw using javascript, http://www.naltabyte.se/space/vectors
It should work nicely in both Mozilla and Netscape6x.
But it's slow.. ;-)

(^-^)b

Oh, and you can add some stuff to this page while you're at it. http://www.naltabyte.se/art
and publish it online while you are at it.
Also using javascript, but only IE I'm afraid.. :-(

(^-^)b

Ooh... nifty.

I was thinking about this myself the other day and was wondering when someone will design a "box" model that will allow bezier curve coordinates to modify the box sides (e.g. like to create an octagon or to make your text follow the outline of an image )...I can think of a slew of great web design things I could do with something like that...

Hey Guys,
http://www.naltabyte.se/space/vectors

Seems like quite an interesting component. I have created something similar recently that works with VML v:lines, but wraps them to acheve a polyline type behaviour, comes with some pretty neat methods out of the box. Check it out @ http://www.developer-x.com/projects/vectors

I need to get around to adding SVG support pretty soon.. I'll try and get some examples up later today.



--
Regards
Tim Scarfe <tim@developer-x.com>
http://www.developer-x.com

What you're talking about, Boudga, is runarounds, and although they've existed for ages in publishing programs, I can't imagine them making an appearance on the web for a while yet. Sure would be nice, though, huh?

edit: ooh, almost forgot... This part of Meyerweb has this technique that can half-assedly simulate runarounds. Plus it works on every CSS-compliant browser! Amaze your friends, confound your enemies.

[This message has been edited by Perfect Thunder (edited 12-30-2002).]

I'm working on this API that uses DHTML to draw lines. No plug ins needed, only modern browsers :P. Probably only works in IE so far. I made functions for circles as well and am working on 3d cubes. Work in progress can be found here.

Hope it helps, Koenie.

P.S. Can anyone give me a start for making 3d cubes?

I took a peek at your code and it's an interesting approach. You are drawing the circles one div at a time using the innerHTML method. That seems to render a large number of divs on one page much faster compared to using the createElement method.

. . : slicePuzzle

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Bugimus: I never use the createElement() method because it takes too much work and lines of code. Altho the innerHTML thing works faster, it still works really slow, when more shapes are drawn, because every pixel takes a lot of code (e.g. <div style=blabla></div> for only 1 pixel). Does anyone have an idea of making this work faster?

Koenie

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Maybe that helps.

Joschmi.



[This message has been edited by joschmi (edited 02-21-2003).]

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Wow, that one is really good! It covers pixel optimization and filled ovals! I'm gonna hack the code for that and see what I can learn from it.

Koenie

Hey, that's really nice. I wouldn't recommend using JavaScript for such things, but in the rare cases that it's necessary, that looks like a good library to use.