"drawing" with JavaScript

badai

i have this data in my db:

rvec

fisrt you should find out how many different nodes there are and what their names are. I'd suggest using an array and a loop for that.

So first loop through the mysql results and store the nodes in an array if they are not already in there.
Thist should make an array like this:

$array = array('A', 'B', 'E', 'D', 'C');
Also keep the output of the mysql query in an array for later use.

Then count the values in that array and depending on how many results choose which positions you want the nodes to take on the image. Here you'll also need the array from the mysql query to make an if statement. Loop through all the possible connections and if the connection is in the mysql output draw the line.

Now use imagearc and the other image functions to make the image and output it.

You're probably gonna need a lot of trying out to find out the exact positions of the lines and circles, but it should be possible this way.

badai

how you draw the node?

the way i do it, using layer, put a black border on the layer, and the node name inside the layer.

if i use imagearc, or anything to draw arc, line, zig-zag, etc; how do i use it to connect those layers? i use html + javascript to draw the node.

i have no problem at all getting how many nodes and links, which node connect to which node with which connection, and which connection connect which node to which node. that is how I managed to get the proper position of those nodes and minimize link to cross each other.

the problem is, how do i draw the link. and it not necessarily an arc, i prefer straight line.

maybe there is a script for this out there somewhere.....

badai

i knew those layer coordinate, this might work

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

cahdecah

you CANT draw that using PHP

rvec

badai

actually you can "get" info with AJAX without refresh or redirect.

i always use zero PHP in my application and use AJAX only when I need anything back from server. this way i can separate UI, design and process. and all the application is just in "one" html file, where I include all the js in the file.

the good thing is, once user access it, the whole thing is already there in browsers, and even if you pull out the network cable and AJAX fail to connect, my javascript will just alert there is network error and keep looping the AJAX command until it get connected, real foolproof. (not a simple loop, use setTimeout or your browser will crash). the index html file should have window.onerror function to make sure everything is loaded in the first place.

this is one of the easiest ajax tool around:

http://www.hemmady.com/ajaxagent

just download and copy to your web server and include it in your file. you can even pass array to your php. to pass object you need to serialize it first.

but if you are using any javascript framework, usually they always include ajax function with it.

ya, yo can move this thread to any where appropriate. thanks.

rvec

renamed topic and moved it

badai

told ya. there IS a script to do this out there somewhere. yay!

http://www.graphviz.org

but it's perl, not php.

quasar

I think it is easier use java applets. Idea

badai

java will slow down the browser, and on old computer it will hang the OS.

if you can just use pure text, why you want to use java?

which one is faster?

maybe you are damn good at java, but that doesn't justify loading java on your browser is much, much better than loading text on your browser. it's all come down to old common sense. if we loose our common sense, we will stop being human, and use apple product.

you want to start using apple, no?

badai

this is what Graphvis have to say about their java support:

http://www.graphviz.org/Download..php

jmraker

You could draw it on a <canvas> and not have it work in IE
https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes

or a Scalable Vector Graphic (SVG)
http://www.w3.org/Graphics/SVG/

or you could use PHP's built in graphics functions to create an image
http://us2.php.net/image
http://us2.php.net/manual/en/book.imagick.php

MM357

The work of Walter Zorn appears to be the best .. till HTML 5 introduced <canvas> .. if it is supported by all popular browsers .. then it is a revolution Smile

(HTML5 is full of revolutions)

but it is not yet supported in IE .. AFAIK .. I didn't try this myself yet.

As for the chart in the first post .. If you are not going to use <canvas> tag, I think that this can be drawn using a chart solution (like Google chart) rather than tiring yourself with some PHP coding ..

But The most important point IMO .. is that you need to evaluate whether it deserves this effort or you can simply replace the whole idea with a more simple one.

badai

since the problem was long solved long before you guys joined frihost, it's better to come up with better, easy *working* solution. please understand what is the problem first, and how your suggestion will be better or at least on par with graphviz. and the most important thing, will it even work? see the very first post, and post your code and screen caps here.

thank you.

Drag images (Javascript)
PB PHP, Iframe and Javascript
Clock-javascript
javascript: needed script for displaying window
Handling Css using Javascript

Navigation Script (javascript) Help Please!
resolution detection with javascript
A Useful Javascript
Tutorial: Image Rollovers w/ Javascript
My first drawing using only photoshop

Save webpage source into javascript variable
Professional JavaScript For Web Developers
Nice site for Javascript
Language
javascript free code

Javascript Free Code