How produce a graph on an HTML page?

[gazolba]

I have three months data in an array.
How do I produce a graph of the results on my HTML page?
I thought of doing a bar chart using cells of tables filled in but
it gets complicated to know how tall to fill the cells.
Or, I could use rows with width=xx%, but I'd really like the bars to be vertical rather than horizontal. Any ideas?
- David

 

[GIGN]

Instead of cells, I think I would try a span for each bar - and then just set it's height - then position them all with their bottoms in the same place.
[bb]

 

[nickhills]

or just set the height of your bar image to 1px, then put the <img...> in a for loop. If you run through the loop 20 time, you get a 20px high bar, simple!

it can produce large HTML pages though!

good luck

 

[link9]

The best way I've found for doing this is to make a 1px X 1px square gif and resize it in a table cell according to whatever size you need the graph to be.

Problem with nickhills solution is that you would be passing several of your pics over the network, which is unnecessary, as providing a height and width will accomplish the same thing w/o the bandwidth.

Problem w/ not using a picture, and doing it with table cells, or even spans, is that the backgrounds won't print unless the user sets something on their browser to specifically print bg colors. You shouldn't make a user do anything they don't HAVE to do.

So you say you want vertical graphs, right? Let's say, for instance, that you want three vertical graphs. Here's how you might set it up:

First set up a table with 1 row, 3 columns -- make it as wide as the whole page.

Then, inside each of those cells, you nest tables. If you set each cell of the parent table to align=center, then just stick a 1 row, 1 column table inside each of those cells with 0 cellspacing, 0 cellpadding, and 0 border, place the <img> inside each of the child tables and size accordingly.

The graphs come out looking quite nice. You can even put an extra row on top of the graph and put a number if you like. So that the each of the resulting graph tables would have 2 rows, one column, with the bottom row having its height determined by the height you specify for the <img>. The numbers in the top row will come out at varying heights, making for a very Excel-like graph.

Did that make sense? If not, post back, and I can provide an example for you.


paul

 

[Kinl]

an excellent example is at Alex Hanengs site.

http://www.haneng.com/lessons_18.asp

This is exactly what your looking for.

shorty

 

[gazolba]

Hi Everyone,
Thanks for the various proposals, its given me food for thought.

Paul - could you send me some sample code (if you have spome lying around) so I can get a clearer picture of your technique.
- David

 

[link9]

Surely, let's say that you want three bar charts, and you have three corresponding variables with values from 1 to 100 stored in an array called graphValues() (0-2, of course), and you have a .gif image (of any color you like) called graph.gif in the same directory as the page. It might look like this:


<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=center>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>
<%=graphValue(0)%>%
</td>
</tr>
<tr>
<td>
<img src=graph.gif width=15 height=<%=graphValue(0)%>>
</td>
</tr>
</table>
</td>
<td align=center>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>
<%=graphValue(1)%>%
</td>
</tr>
<tr>
<td>
<img src=graph.gif width=15 height=<%=graphValue(1)%>>
</td>
</tr>
</table>
</td>
<td align=center>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>
<%=graphValue(2)%>%
</td>
</tr>
<tr>
<td>
<img src=graph.gif width=15 height=<%=graphValue(2)%>>
</td>
</tr>
</table>
</td>
</tr>
</table>

hope that helps!
paul

 

[gazolba]

Ah-ha, this is the same technique as in the link given by shorty.
I've implemented it, and have a fairly nice set of bar charts.
However, I need each bar to be a different color, so I need several 1x1 pixel GIF files.
How do you create one? All I have is Windows paint and it wont handle GIF files.
I have Corel Photo Paint at home, I guess I could use that.
- David

 

[link9]

paint will do it.... make an image 1X1 and then &quot;Save As&quot; and choose .gif from the &quot;Files of Type&quot; list box at the bottom.