Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

html table with backgound image plotting points

Posted on 2014-08-06
14
Medium Priority
?
142 Views
Last Modified: 2014-09-03
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
0
Comment
Question by:Matt Pinkston
  • 7
  • 7
14 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40243665
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40243677
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
 

Author Comment

by:Matt Pinkston
ID: 40243845
sorry file attached
dhc.docx
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Matt Pinkston
ID: 40245727
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40245733
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
 

Author Comment

by:Matt Pinkston
ID: 40245950
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40246013
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
 

Author Comment

by:Matt Pinkston
ID: 40246247
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
 

Author Comment

by:Matt Pinkston
ID: 40247857
need someone that is familiar with HTM and background images to chime in.... I have scratched my head long enough
0
 

Author Comment

by:Matt Pinkston
ID: 40248462
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40248483
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40248544
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
 

Author Comment

by:Matt Pinkston
ID: 40255906
I don't think there is a border on the image, plus in edit SPD the table boxes line up?
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 40256756
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question