CODEWITHSUNDEEP
htmltabular
Jan-Willem
Jan-Willem

Reputation: 187

How to (programmatically) draw arrows between HTML table-entries?

table with arrow

Given a standard static HTML-table, what is the most simple way to, programmatically, to draw an arrow between any two HTML-table entries? See above picture for an example.

I know that the HTML5-canvas can be used to draw graphics, but I am hoping for a simpler/easier way to achieve this.

UPDATE: I am not bound to HTML-tables. If needed, the tables can be generated in any format that can read by a web-browser.

Upvotes: 2

Views: 2849

Answers (2)

Miki Habryn
Miki Habryn

Reputation: 150

I have a similar problem, in that I want to draw arrows between cells in different tables, but I think the answer I'm resigned to will likely work for you: SVG. If you're auto-generating this from a data structure that has the column/row layout configured, and you can determine the row heights and column widths that you need, you should be able to generate the co-ordinates for the lines to do whatever you want over the text.

<svg width="300" height="100">
    <text x='100' y='0' font-size='18px' text-anchor='end'>
      <tspan x='100' dy='1em'>foo1</tspan>
      <tspan x='100' dy='1em'>foo2</tspan>
      <tspan x='100' dy='1em'>foo3</tspan>
    </text>

    <text x='200 y='0' font-size='18px'>
      <tspan x='200' dy='1em'>foo4</tspan>
      <tspan x='200' dy='1em'>foo5</tspan>
      <tspan x='200' dy='1em'>foo6</tspan>
    </text>

    <line x1='100' y1='0.8em' x2='200' y2='2.8em' style="stroke:#999999"/>
    <line x1='100' y1='1.8em' x2='200' y2='1.8em' style="stroke:#999999"/>
    <line x1='100' y1='1.8em' x2='200' y2='0.8em' style="stroke:#ff0000"/>
    <line x1='100' y1='0.8em' x2='200' y2='1.8em' style="stroke:#ff0000"/>
    <line x1='100' y1='2.8em' x2='200' y2='2.8em' style="stroke:#00ff00"/>
  </svg>

Upvotes: 1

arkascha
arkascha

Reputation: 42925

Prepare an image of an arrow. You include it into the page into the same container (typically div or span tag) that holds the table itself. That container is marked as using an absolute positioning inside the css definitions. For your array image you specify a relative positioning. Now you can adjust the position to get the array flowt exactly where you want it to. you might have to specify a z-index for the array too.

This however has some issues with the angle of the arrow. Obviously you can strech and bend it using css width and height attributes, but you cannot turn it. At least not as far as I know. If you need an array you can turn freely, for example if you visualize the arrow dynamically by a script code, then you might prefer one of these approaches:

  1. there are jquery extensions that offer to draw on a canvas

  2. create the arrow image as a vector graphic (SVG format). That format can embed scripts for interactivity. That way you can turn and otherwise interact with the array on a script level.

Upvotes: 0

Related Questions