Click here to Skip to main content
15,502,221 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I've created a graph using html , CSS and jQuery . I want to show the given percentage in a graph view !! can anyone check why this graph is not moving up?

What I have tried:

HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    
    <meta charset="utf-8">
    <title>Bar Chart</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    </head>
    
    
    <body>
    
    <div class="chart">
        
        <ul class="numbers">
        <li><span>100%</span></li>
        <li><span>50%</span></li>
        <li><span>0%</span></li>
        </ul>
        
        
        <ul class="bars">
        <li><div class ="bar" data-percentage="50"></div><span>Option 01</span></li>
        <li><div class ="bar" data-percentage="30"></div><span>Option 02</span></li>
        <li><div class ="bar" data-percentage="60"></div><span>Option 03</span></li>    
        <li><div class ="bar" data-percentage="80"></div><span>Option 04</span></li>   
        </ul>
        
        </div>
    
    
    
        <script type="text/javascript">
        $(function(){
            $('.bars li .bar').each(function(key, bar){
            var percentage = $(this).data ('percentage');
            $(this).animate({
                'height': percentage +'%'
            },1000);
        });
        });
            
        });
            
        </script>
        
    
    </body>




</html>





CSS
body{
    
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto " , sans-serif;
    background: #333;
    
    
}


.chart{
    
    width: 600px;
    height: 300px;
    display: block;
    
}

.numbers{
    
    color: #fff;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 100%;
    display: inline-block;
    float: left;
    
    
}

.numbers li{
    
    list-style: none;
    height: 150px;
    position: relative;
    bottom: 145px;
    
    
}


.numbers span{
    
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    bottom: 0;
    right: 10px;
    
}


.bars{
    
    
    
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    background: #555;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 500px;
    height: 300px;
    box-shadow: 0 0 10px 0 #555;
    border-radius: 5px;
}

.bars li{
    display: table-cell;
    width: 100px;
    height: 300px;
    position: relative;
    
}

.bars span{
    
    width :100%;
    position: absolute;
    bottom: -30px;
    text-align: center;
    
    
}

.bars .bar{
    
    display: block;
    background: #17C0EB;
    width: 50px;
   
    position: absolute;
    bottom: 0;
    margin-left: 25px;
    text-align: center;
    box-shadow:0 0 10px 0 rgba(23,192,235,0.5); 
    transition: 0.5s; 
    transition-property: background , box-shadow;
    
    
}

.bars .bar:hover{
    
    background: #55EFC4;
    box-shadow: 0 0 10px 0 rgba (85 , 239 , 196,0.5);
    cursor: pointer;
    
    
}


.bars .bar:before{
    color: #fff;
    content: attr(data-percentage) '%';
    position: relative;
    bottom: 20px;
    
    
    
}
Posted
Comments
Richard Deeming 26-Sep-22 9:34am    
You've got an extra }); in your script. Once that's removed, the code you've posted works fine for me: Demo[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900