Creating a Barchart?

[PhilOfAndalucia]

OK guys - I give up!

I have tried every which way of solving this (probably very simple) problem, without success.

What I am trying to do is to produce a 'bookings diagram' - months of the year across the top, properties down the left hand side, and a kind of bar chart to show when certain properties are occupied.

Having thought about this for a while - and as this has to be produced dynamically several times a day - I decided the best way would be to use a table, and to show the occupancy as 365 '|' characters, in different colours. eg if the first week in January was occupied, the first seven ||||||| would be, say, red, and the next 24 would be white to show that the rest of the month was unoccupied.

This all seemed to fit nicely when I was working in an HTML editor, but I have two major problems.

The first is that, however I try to do it, using Styles or just in-line HTML, I cannot get the table columns to be the widths I want. It doesn't matter whether I specify them in pixels or percentages, they just don't come to the right size.

The second is that, whatever font I try to use, the display is TOTALLY different in IE and Mozilla! To the extent that, if I try to fine-tune it for one, it's so far out in the other as to be useless.

So, first question - am I barking up the wrong tree altogether, and missing a much easier way of doing this? And second, why won't my table columns obey the rules? And third, why does the same font space out quite differently in the two browsers?

To give you an idea of what I mean, you can have a look at:

http://www.tptp.co.uk/TestDoc/FairwayTrial.html

All suggestions gratefully received!

Phil

 

[johnwm]

You could specify your table fontsize to be in pixels, rather tha x-small which will be interpreted according to the vagaries of the specific browser. You also need to use a constant width font (like Courier) if your want character widths to line up.

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

For tsunami relief donations

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts

 

[PhilOfAndalucia]

Thanks for responding, johnwm.

I take your point about specifying fontsize. As far as using a constant width font, since every cell in the second column will contain exactly 365 of the same character (|) I don't think this should matter, and the fixed-pitch fonts space the characters apart far too widely.

As a new poster to this forum I am naturally conacerned to follow etiquete, and have reviewed the FAQ you mention. I thought I'd complied with it! Could you be a bit more specific about where I may have failed?

 

[johnwm]

Don't worry, you haven't failed - it's just part of my sig

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

For tsunami relief donations

'If we're supposed to work in Hex, why have we only got A fingers?'

http://www.essexsteam.co.uk

for steam enthusiasts

 

[ChrisHunt]

I suggest you use a cell for each month, rather than trying to line the whole lot up. That way it won't matter whether the characters are exactly the same. eg (listing 3 months for simplicity):

<table>
<tr>
<td>&nbsp;</td>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
</tr>
<th>Las Golondrinas</th>
<tr>
<td>||||||||||<span class="booked">|||||||</span>||||||||||||||</td>
<td>|||||<span class="booked">|||</span>||||||||||||||||||||</td>
<td>||||||<span class="booked">|||||||</span>|||||||||||||||||</td>
</tr>

Give the [tt]td[/tt]s a style of [tt]white-space: nowrap[/tt] and you should be on your way.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[PhilOfAndalucia]

This is an interesting idea, Chris.

I'll give it a whirl and see where I get to! Thanks.

Phil

 

[pgaec]

I thought you might be interested in having a look at this page:

http://www.jjwdesign.com/booking_calendar/month_view.php

]

 

[PhilOfAndalucia]

Thanks for the reference - phew! This is going to take a little time to work through!

Phil

 

[ChrisHunt]

Just noticed that the [tt]<tr>[/tt] in my example should have been before the [tt]<th>Las Golondrinas</th>[/tt].

Note that anybody viewing your pages via a screen reader is going to have terrible trouble with them. If you use solid bars of colour, instead of vertical marks, you could use images that can be backed up with [tt]alt[/tt] text.

Make two (or more) narrow images of the height that you want, and lay out your tds like this:

<td><img src="empty.gif" height="15" width="16" alt="" /><img src="booked.gif" height="15" width="14" alt="Booked: 9-15 Jan" title="" /><img src="empty.gif" height="15" width="32" alt="" /></td>

Note that there's no spaces or carriage returns between the images , to be sure that they butt up together. You can see such stretched images used in graphs on my

http://www.mcgonagall-online.org.uk/cgi-bin/mcstats

page.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[PhilOfAndalucia]

Ah, now this looks to be JUST what I need, Chris!

Thanks to all who have responded to this enquiry - if I crack it I'll let you have a look!

Phil

 

[theEclipse]

Phil-

To offer a bit of a different soloution to your problem, I once created a bar graph system that used an images width attribute to create the desired effect.

I dont have the code on me at the moment, but it was a simple php script that calculated percent of money raised versus goal and then applied that percentage to 1024. Example, if one team had 25% of the funds raised, the image tag printed out would have a width of 256. (imgWidth = (currentFunds/fundsGoal)*1024). Then set the table width to be 1024.

Oh and your image is best created to be something that has a horizontal repeat.

Robert



Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net

 

[PhilOfAndalucia]

Thanks Robert. This is a similar concept to the one Chris proposed, and I thought I had it cracked. However, although it looks beautiful in HomeSite 5, in both Mozilla and IE6 the tables don't line up!

More work needed - will let you know when I have cracked it!

Phil

 

[ChrisHunt]

It should still line up if you put each month in it's own cell.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[PhilOfAndalucia]

Well, I'm nearly there in IE6 - just a bit of tweaking - but Mozilla doesn't like it at all! The graphics don't display and the first table - that sets the headings - is too long even though its width is explicity defined.

You can see the latest result at

http://www.tptp.co.uk/TestDoc/FairwayTrial.html

as before.

Hope this isn't getting too boring for all you experts!

Phil

 

[theEclipse]

Phil-

try putting &nbsp; in the blank cells. that might make the table render correctly.

Also, I notice that you have the header cells (Jan, Feb, Mar...) in a different table than the rest of the graph. Try putting them in the same table as a row above, that way the browser does alittle bit more work for you.

I am also curious as to why some of the images are "visibility:hidden".

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net

 

[PhilOfAndalucia]

I'll certainly give thought to what you say, Robert.

As to your specific points: there are no empty cells! The first table has 13 columns with the caption and the twelve months in, the second has two columns with the property name and a number of graphic images in.

That's why I used two tables, but perhaps it would be better to use a COLSPAN for the images across columns 2-13?

The reason for the "visibility: hidden" is that this way I can create each row by appending images of different lengths corresponding to the period booked. Where the property is not booked, I just assign an image of length equal to the non-booked period, but hide it so that I get a gap of the correct length. Does that make sense?

Phil

 

[ChrisHunt]

Does that make sense?

It should do according to the spec, but I wouldn't trust all browsers to treat [tt]visibility: hidden[/tt] properly. It may be safer to use a transparent gif that you can stretch to size.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[theEclipse]

Phil -

I agree with Chris about the images. As you have noticed, browser support for standards and such is lacky.

I have another thought for you though.....and I may be misunderstanding your solution to the problem, or even the problem in itself. could you not just have the one image that is the graph and then set the align="left" property of the table cell? You would have to add an extra row onto the top or bottom that would give you a specific size for each column (by putting a transparent gif of what would be 100% sales). I guess I dont even know if I am being clear.

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net

 

[PhilOfAndalucia]

Cracked it! Thanks to all the advice and suggestions received here, I now seem to have a working model of what I wanted.

If you want to see roughly what it looks like (with data just for the first couple of months and only a few properties - and the alt= tags not properly set up!) you can find it at

http://www.tptp.co.uk/TestDoc/FairwayTrial.html

as before.

Thanks again.

Phil