html table with backgound image plotting points

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
Matt PinkstonEnterprise ArchitectAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
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+.
0
Matt PinkstonEnterprise ArchitectAuthor Commented:
sorry file attached
dhc.docx
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Matt PinkstonEnterprise ArchitectAuthor 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?
0
Alexandre SimõesManager / Technology SpecialistCommented:
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!
0
Matt PinkstonEnterprise ArchitectAuthor 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
0
Alexandre SimõesManager / Technology SpecialistCommented:
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?
0
Matt PinkstonEnterprise ArchitectAuthor 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.
0
Matt PinkstonEnterprise ArchitectAuthor Commented:
need someone that is familiar with HTM and background images to chime in.... I have scratched my head long enough
0
Matt PinkstonEnterprise ArchitectAuthor 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
0
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
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?
0
Matt PinkstonEnterprise ArchitectAuthor Commented:
I don't think there is a border on the image, plus in edit SPD the table boxes line up?
0
Alexandre SimõesManager / Technology SpecialistCommented:
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!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.