Click here to Skip to main content
15,570,131 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)



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