Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery code not displaying correct values into my chart

I’m stuck on something and would be very grateful if someone could please help me.

I’m building a simple chart/graph using HTML and JQuery.

I have the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(".graph-box .value").each(function() {
    var num = $(this).html()
    var iNum = parseInt(num);
    var eq= $(this).index(); 
    var finalSum = (iNum/1000);
    alert (finalSum);
    $(".graph-bar").width (finalSum + "%");
    });
    });
</script>

<style>
* {padding:0; margin:0;}
.graph-box {border:1px solid #ccc; box-shadow:3px 3px 3px #ccc;}
.entry {display:flex;}
.name {width:500px; background-color:#ccc;}
.graph-bar {box-sizing:border-box; background-color:#ff0000; color:#fff; border-bottom:1px solid #ccc; border:1px solid blue; height:30px;}
</style>

<body>
    <div class="graph-box">     
        <div class="entry">
            <div class="name">England</div>
            <div class="value">817</div>
            <div class="graph"><div class="graph-bar color-1"></div></div>
        </div>
        <div class="entry">
            <div class="name">Scotland</div>
            <div class="value">500</div>
            <div class="graph"><div class="graph-bar color-1"></div></div>
        </div>
        <div class="entry">
            <div class="name">Wales</div>
            <div class="value">250</div>
            <div class="graph"><div class="graph-bar color-1"></div></div>
        </div>
</div>

As you can probably see, the JQuery checks the .value div and records the content. It then converts it into an integer. I know this part is correct and works as I put an alert in. When run, it gives me the 3 correct values.
What it is then supposed to do is to find the div called ‘graph-bar’ and set the width of that div according to the integer it created. However, when I run the code, all of the bars show the same width.

I’ve had this code running well when all of the integers are in one div, so I suspect this is something to do with the ‘eq’ code?
If someone could let me know how to fix this, and crucially why, I can know for the future and avoid this issue again.

Appreciate any help someone can give me!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ah, I was so close! Thanks so much for taking the time to help me, I really appreciate it.


  2. 0

    Two things are missing from your solution:

    1. You need to specify the width for the .graph class 
      .graph {width: 100%;}
    2. You should update only the .graph-bar of the current parent node: 
      $(document).ready(function() {
    $(".graph-box .value").each(function(i, elem) {
        var num = $(this).html()
        var iNum = parseInt(num);
        var finalSum = (iNum/1000) * 100;
        $(elem).parent().find(".graph-bar").css("width", finalSum + "%");
        // Alternatively use the sibling function
        // $(elem).siblings().find(".graph-bar").css("width", finalSum + "%");
   });
});

    You can find a working example in this JSFiddle.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search