Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree1Likes
  • 1 Post By Webzarus

Thread: Making a Bar Graph in HTML / CSS

  1. #1
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times

    Lightbulb Making a Bar Graph in HTML / CSS

    Hello, new & re-vamped WDF.net ! It's been a minute since I've participated around here.

    The question I have is about the tables on my landing pages. I want to add in a bar graph or two sporadically... when I want to display a rating of a product or service in a scale of 1-10. The following are some details about my objectives in this task:

    • If you observe that table on my link above, you will notice that I have added in a bar graphic that has a gradient starting with red and ending with green. I want to use color to indicate how good I think something is.
    • I was inspired to create something similar to the tutorial I read here.



    • The bar.gif image will receive its width through inline styles that I'll use to simply change its width.
    • On top of the table cell that contains the bar image, I want to add columns that are numbered 1-10 (for the measurement of how good something is- the integral).
    • In the above-linked tutorial, they used a 2nd image for the integral measurements. I don't believe this will put me in a good position as far as how responsive the graph size is to different-sized browser windows, so it may be better to just go with doing the columns inside the one cell like I described in the previous point.


    That's basically my idea that I'm going to roll with.

    Here are a couple of hang-ups:

    1. The columns are being placed on the top-leftmost corner of the table.

    2. If I use an image inside the table, the image takes on the border assigned to the .floatLeft and .floatRight images unless I assign a class to the image. Weird. Should I be using a float on the graph image & the columns to get them directly on top of each other?

    My current markup contains the following:
    HTML Code:
    <!-- lines 38-63 -->
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>Overall</td>
                                    <td><img src="../style/bar.gif"  width="116" height="24" title="Overall Rating" alt="" class="noborder"  /><col>1</col><col /><col /><col  />7.9&frasl;10</td>
                                </tr>
                                <tr>
                                    <td>Number of Profiles</td>
                                    <td class="bold green">2,000,000+</td>
                                </tr>
                                <tr>
                                    <td>Maximum Number of Picture Uploads</td>
                                    <td class="bold green">24</td>
                                </tr>
                                <tr>
                                    <td>Chat Feature</td>
                                    <td class="bold green">Fully Categorized Chat Rooms</td>
                                </tr>
                                <tr>
                                    <td>Response Rate from Members</td>
                                    <td class="bold orange">3.4 &frasl; 5</td>
                                </tr>
                                <tr>
                                    <td>Webcam Functionality?</td>
                                    <td class="bold orange">Gold Profiles Only</td>
                                </tr>
                            </table>
    the mere styles right now:
    Code:
    table{margin:0;}
    table tr td{border:2px inset #757575; padding:0 3px;}
    img.noborder{border:none;}
    col{border:1px solid #000;}
    Thanks for any suggestions.

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Personally, I'be never done one with a graphic gradient, but I have done some with a solid background, so its should be much different.

    I set the height of the bar from a value in a calculation based on values in a DB query.

    I guess a graphic would work by just using the image as a background image, do an overflow:hidden so it only shows the amount defined in the div.

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Webzarus View Post
    I set the height of the bar from a value in a calculation based on values in a DB query.
    Probably wouldn't take much to do it here without a DB. He already has the rating a couple rows below the bar. Convert that into a px or % size and set the width on that. Could be done server or client side.

  5. #4
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times

    Arrow

    Yes, this is completely DB-independent. It shouldn't be too difficult to figure out. None of the tutorials really get down to what I'm trying to accomplish, since they are a bit straightforward and not situational specific.. I want to make these little meter graphs happen inside the table.

    In order to get the rating dividers 1-10, I added in ten divs with a new class, .ratingticks. They are numbered 1 to 10 successively.

    Here is the current markup on the updated page:
    HTML Code:
    <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>Overall</td>
                                    <td>
                                        <div class="ratingticks">1</div>
                                        <div class="ratingticks">2</div>
                                        <div class="ratingticks">3</div>
                                        <div class="ratingticks">4</div>
                                        <div class="ratingticks">5</div>
                                        <div class="ratingticks">6</div>
                                        <div class="ratingticks">7</div>
                                        <div class="ratingticks">8</div>
                                        <div class="ratingticks">9</div>
                                        <div class="ratingticks">10</div>
                                        <img src="../style/bar.gif" width="91.64" height="24" title="Overall Rating" alt="" class="noborder" />7.9&frasl;10
                                    </td>
                                </tr>
    The styles I have now are:
    Code:
    table{margin:0;}
    table tr td{border:2px inset #757575; padding:0 3px;}
    img.noborder{border:none; position:absolute;}
    div.ratingticks{float:left; border-right:1px solid #000; width:6%; padding:0; z-index:7;}


    • The bar image is still covering up the div tick marks completely, even though I raised the z-index considerably. They are not able to be seen now.
    • The bar image and the 7.9 / 10 I just threw in there are altering the width of the tick marks, I believe.
    • The bar is not changing in width when I changed it from 116 to 91.64 within the HTML.


    That's where I am as of now.

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Why not just let JS or some kind of server side script determine the width? Much easier to deal with.

  7. #6
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Well, I don't want to become dependent on scripting languages as some users may have scripting turned off.

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Quote Originally Posted by Tyler Smith View Post
    Well, I don't want to become dependent on scripting languages as some users may have scripting turned off.
    The only thing a user can do is turn off JS ... They cannot turn off any server side scripting since its done before the results are sent to the users browser.

    But 99% of PEOPLE don't turn it off as much interaction for many sites rely on JS... If they go to a handful of sites and can't use some features or access something they want, they are going to turn JS back on.

    the ONLY time I turn JS off is to test a site to make sure that a sites content is still accessible, if some of the visual features or ... Doesn't work without JS, that is the visitors choice and not much we can do about it... About the only thing I WILL NOT use JS for is site navigation ...search engines do not parse or try to execute JS, so building site navigation using JS is really not a good choice.
    Tyler Smith likes this.

  9. #8
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times

    Post Solution for the Width of the Bars

    Okay, cool. That sounds like a good lesson on JS.

    Now, if I were to use JS to adjust the width... What am I going to do? Add in an i.d. to every rating bar image every time?
    It just seems like it adds a whole new level of complexity to the scheme.

    This is really all I can think of right now...
    HTML Code:
    <img src="../style/bar.gif" id="firstdateswedenoverall" title="Overall Rating" alt=""><p class="rating">7.9</p>
    Code:
    $("#firstdateswedenoverall").css("width", "91.64px");
    Here we are discussing scripting in the CSS forum...

    Never mind that this is easy to figure out. I've been trying for nearly a week to put a solution together for this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

making a graph in a web page not using css

,

making graph in html

,

scaling css bargraphs

Click on a term to search for related topics.

Tags for this Thread

All times are GMT -6. The time now is 08:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com