html table with backgound image plotting points

Matt Pinkston
Matt Pinkston used Ask the Experts™
on
I have and HTML actually a SharePoint aspx but this portion is a HTML table, what I am doing is using a background image in a table of rows and columns and using that to plot points but am having a issues with getting the plots to show up in right location top to bottom. (See Attached)

Not sure why the check mark ends up too low on the chart
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Alexandre SimõesManager / Solutions Architect

Commented:
Hi mate, there's nothing attached.

Anyway, drawing dots with a table doesn't sound good to me... :)
Usually this is done with absolute positioned div's or with the canvas if old-browser compatibility is not an issue.
Alexandre SimõesManager / Solutions Architect

Commented:
You can also consider this javascript library if you really want to work with a powerful drawing tool:
http://raphaeljs.com/
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
Matt PinkstonEnterprise Architect

Author

Commented:
sorry file attached
dhc.docx
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Matt PinkstonEnterprise Architect

Author

Commented:
File is now attached, just wondering as to why my plots seem to be off.  For example something that has a 20 is showing in approx. row 14 on the picture.

Is there a more efficient way to do it?
Alexandre SimõesManager / Solutions Architect

Commented:
Hi mate...
from your code I have no idea of what you want to accomplish.

Is there a way you can show me a working sample with what you have and what you would like to have?
A screenshot and some comments maybe is enough.

cheers!
Matt PinkstonEnterprise Architect

Author

Commented:
Attached is the example picture, the value sales stage 3 16 is plotted in the right column but appears to be in row 14 instead of 16
dhcx.JPG
Alexandre SimõesManager / Solutions Architect

Commented:
Hi mate, thanks for the screenshot but still I don't understand where's the problem.

value sales stage 3 16 is plotted in the right column but appears to be in row 14 instead of 16
I counted the rows and both row 14 and 16 and in the red zone and neither have any dots.
Also I have no clue on what is "the value sales stage 3 16" :)

Sorry mate, can you make it understandable for someone who doesn't know anything about what you're trying to do?
Matt PinkstonEnterprise Architect

Author

Commented:
Okay the Value that is being plotted is a 16 in Sales Stage 3
With my code the plot appears to be in 14 on Sales Stage 3
 
If you look at the code I made the table 20 rows and 5 columns and sized it exactly the same size as the image which is a background to the table....  So by checking the TR/TD combination for row/16 column 3 and if the value does indeed = 16 and plotting the value it should show in that space but it is showing lower.
Matt PinkstonEnterprise Architect

Author

Commented:
need someone that is familiar with HTM and background images to chime in.... I have scratched my head long enough
Matt PinkstonEnterprise Architect

Author

Commented:
Back to the original question..
 
If I build a table with 20 rows and five columns and place a background image in that table and notice that row 16 column 3 plots at a specific point.  How come when I use the attached code would that plot be showing lower on the picture than I would expect?
dhc.docx
Alexandre SimõesManager / Solutions Architect

Commented:
Hi mate, on my side I still have no clue on what you expect.
You sent me an image but I don't see any relation with what you say.

Putting your code in jsfiddle we get this:
http://jsfiddle.net/AlexCode/4qpp5mc2/

The images obviously don't resolve so what am I suppose to do with this? :)

How come when I use the attached code would that plot be showing lower on the picture than I would expect?
I have no way of reproducing your scenario on my side.

Unless you're able to make that fiddle work or show me exactly what you have and tell me what you want I think it's impossible to help you.
Alexandre SimõesManager / Solutions Architect

Commented:
Ok so I think I manages to understand what you want.
I used the first snapshot you gave me and got a black check from the web similar to yours.
What I wnded up with was this:
http://jsfiddle.net/4qpp5mc2/2/

So I see that the checks are not centered in the cells and that's your problem right?

I worked out the css a bit but the problem is that your background images have a white border on top and on the left.
Or at least the one you gave me does.

Can you give me the original background image so that I can align the checks correctly?
Matt PinkstonEnterprise Architect

Author

Commented:
I don't think there is a border on the image, plus in edit SPD the table boxes line up?
Manager / Solutions Architect
Commented:
Ok so if the image is correct then the sample I gave you should give you the result you expect.

It basically falls to this CSS:
img{
    width:16px;
}
td{
    text-align: center;
    vertical-align: middle;
    height: 22px;
}

Open in new window

Make sure the image is 16x16
Make sure each cell has 22px height and its contents are aligned center
I think it's all you need.
The problem is if you let the height of the cells take its size based on the image size.

If you're still not able to make it work just give me the original background image.

Cheers!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial