Displaying a lot of numbers in a table

Loads of data to display

[Frank_Rizzo]

How can I display a lot of numbers neatly in a table? I need to display four different figures for each item but also display this for 20 different regions!

A simple report would show the name of the widget and four bits of data:

Widget Name, Quantity, Cost, Weight, Cost per Weight Unit
---------------------------------------------------------

Blue Widget, 100, $1.23, 3lb, $0.41
Green Widget, 50, $8.57, 12lb, $0.71

That's easy enough but I need to produce a huge table showing that info for 20 different regions.

Widget Name, FLA, MA, NY....., OH

So in each State would be the four figures of Qty, Cost, Weight, CpWU

Widget....¦...........FLA.......................¦................MA..................¦
.............¦.Qty...Cos...Weight...CpWU..¦.Qty...Cost...Weight...CpWU..¦
Blue........¦ 100 $1.23 3lb $0.41 ..........¦ 125 $2.24 1lb $2.24 .........¦
Green......¦ 123 $1.34 4lb $0.41 ..........¦ 331 $9.11 7lb $14.18 .........¦

I don't have a visually creative flair and this is driving me nuts. If I had some design skills I'm sure it would be easy to produce a good looking report but it's just a mass of numbers.

I guess I need to use alternating background colours to make data stand out. But how do you do that?

One other problem is screen width. Some users will only need info on 10 states whilst some will require all 20 on one page.

That won't fit on a standard screen so there will have to be scroll bars.

So do I go for fixed width columns, or x%?

One idea I have is to not show all 4 data items but two and to give the option to switch between reports.

e.g. Report 1 show Qty and Cost, Report 2 show Weight and CpWU.

The reports are all previously compiled into static includes so there is no generation on the fly.

[edited by: Frank_Rizzo at 12:34 pm (utc) on Aug. 22, 2006]

[rocknbil]

It's a little too complex to show at the moment, but you could do something that displays a onMouseOver or onClick "pop-up":

Widget....¦.....FLA.....¦.......MA........¦ 
..........¦....Blue.....¦.......Green ....¦ 

And the words Blue and Green would have

<a href="dynamic_details.cgi?id=some_row_and_col_id" onClick="some_function('thisID','100', '1.23','3','0.41'); return false;">Blue</a>

Where some_function would cause a small hidden menu to pop up showing details:

<div id="thisID">
Qty:100<br>
Cost:$1.23<br>
Weight:3lb<br>
CpWU: $0.41
</div>

I'd have to think it through but that's probably how I'd do it. Think mini-suckerfish menu. :-)

Note the actual href and return false, alwas keep JS functioned working if JS is not enabled.

Edit: ooops missed that it's not dynamic output. Man that's a lot of manual coding to make alternate colored rows . . . and if you have to insert a row ugh . . . you're better off learning to program so you can do row switches!

[henry0]

Why not keeping it simple since we are not speaking server side scripting.
It might be a good time to use target="_blanck"

Only show the States
Clicking on a State will open a new browser with its related data.

Be sure to offer on the first row of each State page a large "Click here to close that page!"
if not your users might end with 10 browsers opened :)

[Frank_Rizzo]

Keeping it simple is what happens now but users want their cake and eat it.

Info has to be displayed all on one page because they have to see info on each state really quickly to make decisions. Currently they have to click each widget name in turn to see the info and that's why all widgets need to be on one page.

It's difficult to describe. I've scoured a few financial sites hoping to see how others do it but most are just charts and small tables.

I've tried splitting the 4 data items into a 2 x 2 table so that each Widget Name is double spaced and each State column has the 4 items on two rows

....................NY......MA...
Blue Widget... A ¦ B.. A ¦ B
....................C ¦ D.. C ¦ D
Green Widget. A ¦ B.. A ¦ B
....................C ¦ D.. C ¦ D

That's a bit better but I still can't make it all look 'pretty'.

I guess the way to do it is to have two switchable reports which users can toggle instantly

[click here for Weight Info]

....................NY......MA...
Blue Widget... A ¦ B.. A ¦ B
Green Widget. A ¦ B.. A ¦ B

[click here for Cost Info]

....................NY......MA...
Blue Widget... C ¦ D.. C ¦ D
Green Widget. C ¦ D.. C ¦ D

[Frank_Rizzo]

I have another idea. One possible solution is to use frames, fixed width and scroll bars or some fancy alternative.

e.g.

In the left hand column list the widget name, in the right hand column have a scrollable list of states. Users can then see the widget and scroll left or right quickly to see the info for each state.

Widget....II<----...........FLA.......................¦................MA..................¦---->
.............II<----.Qty...Cos...Weight...CpWU..¦.Qty...Cost...Weight...CpWU..¦---->
Blue........II<---- 100 $1.23 3lb $0.41 ..........¦ 125 $2.24 1lb $2.24 .........¦---->
Green......II<---- 123 $1.34 4lb $0.41 ..........¦ 331 $9.11 7lb $14.18 .........¦---->

How would I set the table? Would I force it to say 1600 pixels wide and let the browser handle the scrolling?

Are there any fancy solutions using dhtml rather than clunky scroll bars?

[edited by: Frank_Rizzo at 10:21 am (utc) on Sep. 6, 2006]