3 Replies - 232 Views - Last Post: 29 January 2014 - 01:46 AM

#1 Vasquez21  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 10-January 14

[php/ajax] "map" Visualizations

Posted 28 January 2014 - 04:08 AM

Hello,

Ok so I have database with some kind of map.
I would like to visualisate something like this:


Posted Image

There is no problem with squares, but I also need conections (lines) between them. And those conections are just two short lines which color is red/blue depends on data. Also because I need to interact with them later I can't just show them as one img.
The simplest idea which comes to my mind is to put all into big table, and there put lines into table. But when I am looking at this:

    <TABLE>
    <tr><td>0,1</TD><TD>line 1</TD><TD>line 2</TD><td>0,2</TD><TD>line 1</TD><TD>line 2</TD></TR>
    <tr><td>linia 1</TD><TD>---</TD><TD>---</TD><td>linia 1</TD><TD>---</TD><TD>---</TD></TR>
    <tr><td>linia 2</TD><TD>---</TD><TD>---</TD><td>linia 2</TD><TD>---</TD><TD>---</TD></TR>
    <tr><td>1,1</TD><TD>line 1</TD><TD>line 2</TD><td>1,2</TD><TD>line 1</TD><TD>line 2</TD></TR>
    <table>


I am sure there is better way :D/>/>
Also I want my "map" to be interactiv so I want to call some events after clicking locations/conection.

So any ideas? Or maybe someone saw something similar?

Is This A Good Question/Topic? 0
  • +

Replies To: [php/ajax] "map" Visualizations

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: [php/ajax] "map" Visualizations

Posted 28 January 2014 - 05:34 AM

Hey.

Have you considered using a <canvas> element and actually drawing the whole thing instead? It would be far more flexible then trying to set this up using the DOM. You'd have to set it up so that the location of each "element" on the canvas is stored, and when the element is clicked you use the mouse position to figure out which element it was over when the click was made.
Was This Post Helpful? 0
  • +
  • -

#3 Vasquez21  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 10-January 14

Re: [php/ajax] "map" Visualizations

Posted 28 January 2014 - 11:29 PM

I am not sure about <canvas>.
Someone give me advice to make it in div's, and I guess I will try this one for now.
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: [php/ajax] "map" Visualizations

Posted 29 January 2014 - 01:46 AM

Well, if you want to draw a straight line between two points using a div, you'll need to absolutely position it so that it stretches between those two points on the page, and then either set it's dimensions so that you can use it's background colour to represent the line, or make it a zero width or height (depending on the orientation) and use a border to draw the line.

It's essentially the same thing you'd be doing with a canvas, just using different technique to actually display the elements.

If you are new to this kind of HTML styling, you should read up on CSS positioning. This is a pretty good article on that topic:
- CSS Positioning 101 (A List Apart)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1