Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
    
    </head>
    <body>
        <div id="div1" />
    </body>
    <script type="text/javascript">
    
        var sampleData = [23,45,14,47,24,57,24,35];
        function _div(id){
            return document.getElementById(id);
        }
    
        function drawBarChart(dataset, idOfContainer){
    
            var chartContainer = _div(idOfContainer);
    
            if(typeof(dataset) != "object"){
                return;
            }
    
            var heightOfContainer = chartContainer.scrollWidth;
    
            var widthOfContainer = chartContainer.scrollHeight;
    
            var widthOfBar = parseInt(widthOfContainer / dataset.length) - 2;
    
            for(var i = 0; i < dataset.length; i++){
    
                var divElement = document.createElement("div");
    
                divElement.setAttribute("class", "div2");
                divElement.style.backgroundColor = ( i % 2 ) ? "green" : "yellow";
                divElement.style.marginLeft = parseInt(i * 2 + i * widthOfBar) + "px";
                divElement.style.height = parseInt(dataset[i]) + "px";
                divElement.style.width = parseInt(widthOfBar) + "px";
                divElement.style.top = (heightOfContainer - parseInt(dataset[i]) - 1) + "px";
                chartContainer.appendChild(divElement);
    
            }
            return false;
        }
        
        drawBarChart(sampleData, "div1");
    
    </script>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers