Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DHTML Line graph

Status
Not open for further replies.
Badgers

Badgers

Programmer
Nov 20, 2001
187
US
Help,

I need to build a line-graph in DHTL and Javascript does anyone know of somewhere where I could get a template - this would save me time programming it myself ?

Thanks

Tim.
 
Sort by date Sort by votes
The nearest thing to graphics support I've seen (and considered) in JavaScript has been to use preformed image files (such as circle.gif, Line01.gif, Line02.gif, etc.) and to use JavaScript to change the display attributes. There was a very clever JavaScript function-plotting calculator online somewhere that had a couple of generic curves stored as files and would position and stretch the images in accordance with the math function's needs.

I guess if you want to get really gross you could build ASCII graphics! [smile]

But a line graph...

Wait, wait, I'm suddenly becoming brilliant...

You'll need two 1x1 pixel images. One white and one black ("White.gif" and "Black.gif"). Now, a line graph is a line that moves from left to right (usually the Time axis), varying in height in accordance with the values along the Y axis. The height thing is the key. Height can be specified when you do the document.write...

Use your JavaScript to produce your graphing array. Then use that array and document.writes to produce code similar in function to the following:

Code: 
<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <p>Look at the graph below</p>
    <table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
      <tr>
        <td>
          <img src=&quot;Black.gif&quot; height=&quot;100&quot; width=&quot;1&quot;></img>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;100&quot; width=&quot;1&quot;></img>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;50&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;48&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;48&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;50&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;46&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;52&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;46&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;52&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;47&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;51&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;50&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;48&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;55&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;43&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;63&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;35&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
        <td>
          <img src=&quot;White.gif&quot; height=&quot;71&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;></img><br /><img src=&quot;White.gif&quot; height=&quot;27&quot; width=&quot;1&quot;></img><br /><img src=&quot;Black.gif&quot; height=&quot;1&quot; width=&quot;1&quot;>
        </td>
      </tr>
    </table>
  </body>
</html>

If you change the border attribute to &quot;1&quot;, you can see how I'm stacking the graphics, but if you keep it at &quot;0&quot;, no one will have any idea that you aren't just creating some supercool graphic application on-the-fly.

I just pulled these values outta my butt, but your JavaScript application will produce curves that look better. You can also see how I used the same building blocks and stretches to create a &quot;Y&quot; axis and an &quot;X&quot; axis. You can do all that pretty easy, now that you have the basic building blocks. Just think like an old computer!

Another way of doing this, if you really are feeling code-frisky, is to build a 2D array in JavaScript (I know, not technically possible...) that represents your drawing surface. Then, write a generic display routine that takes that 2D array and transforms it into a graphic display. If you have, say, 255 different 1x1 pixels, each color-coded, and the contents of each cell of the array is a value 0-254, then you can create full-color graphics using JavaScript.

Man, I can't believe I thought of this. I can go home now, strip down to my underpants and spend the rest of the day watching South Park...

Or, I could start building a JavaScript Graphics Program...

Cheers,

Edward &quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
Upvote 0 Downvote
Thanks mate, I'll give it a try. I appriciate your effort.

Tim.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
219
ChrisHirst
ChrisHirst
pendle666
  • Locked
  • Question
Using CSS for the pre tag. white-space: pre-line not working in Chrome
Replies
4
Views
542
pendle666
pendle666
PCHomepage
  • Locked
  • Question
CSS Forcing Multiple Selects to One Line
Replies
3
Views
123
vacunita
vacunita
tyutghf
  • Locked
  • Question
Making blocks of different heights line up
Replies
6
Views
118
vacunita
vacunita
rrmcguire
  • Locked
  • Question
image going to next line
Replies
5
Views
49
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top