CODEWITHSUNDEEP
javascriptjqueryhtmlcssvisualization
user5027008
user5027008

Reputation:

Javascript code added in the div section of html code does not show anything.

This is the code I am using to visualize the bar chart I am trying to get from the dataset I am using. But it is not showing anything. 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">



        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <link type="text/css" rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="d3/d3.js"></script>
        <script type="text/javascript" src="d3/d3.layout.js"></script>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style type="text/css">
.chart {
display: block;
margin: auto;
margin-top: 0px;
}

text {
 font-size: 11px;
}

rect {
fill: none;
}

div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;   /* Gets overriden by D3-assigned height below */
            background-color: teal;
            margin-right: 2px;
        }

.axis path,
        .axis line {
          fill: none;
          stroke: black;
          shape-rendering: crispEdges;
        }

        .axis text {
          font-family: sans-serif;
          font-size: 11px;
        }


</style>

</head>



<body>
    <div class="container" >
        <div class="row" >
            <div class="col-md-4 img-responsive"><img src="img/e2.png" alt="Smiley face" height="100" width="100"></div>


            <div class="col-md-4" >
            <div id="body">
              <div id="footer">
                <h3>Course Scheduler TreeMap</h3>
                <div class="hint">click or option-click to descend or ascend</div>
                <div><select>
                  <option value="size">Size</option>
                  <option value="count">Count</option>
                </select></div>
              </div>
            </div>
            </div>

             <div class="col-md-4" >
                <h1 >Plan Your Courses</h1>

            </div>

        </div>



        <div class="row">
            <div class="col-md-12">
                <h2>Implementation of SVG Work</h2>

  <script type="text/javascript"> 
   var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
            14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
            24, 18, 25, 9, 3 ];


       //Width and height
            var w = 500;
            var h = 100;
            var barPadding = 1;   // <-- New!

          /*  var dataset =[] ;
            for (var i =0; i<25; i++) {
                var newNumber = Math.round(Math.random() * 25);
                dataset.push(newNumber);
            }*/

       //Create SVG element
            var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        // GENERATING RECTANGLES AND MAKING BAR CHART

             svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x", function(d, i) {
                return i * (w / dataset.length);
            })
           .attr("y", function(d) {
                return h- (d*5);
           })
           .attr("width", w / dataset.length - barPadding)
           .attr("height", function(d) {
                return d*5;
           })
           .attr("fill", function(d) {
                return "rgb(0, 0, " + (d * 10) + ")";
            });

    // APPENDIND TEXT INTO THE BAR CHART

        svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                return d;
           })
           .attr("x", function(d, i) {
                return i * (w / dataset.length) + 3;
           })
           .attr("y", function(d) {
                return h - (d * 4) + 10;
           })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "white");


    </script>

            </div>
        </div>

    </div>
</body>
</html>

------- However the same code is working when there is no div thing in html used and the whole javascript code is written in the body. Here is the code that is working fine.

--------

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Bar Char Test</title>
            <script type="text/javascript" src="d3/d3.v3.js"></script>

            <style type="text/css">

                div.bar {
                    display: inline-block;
                    width: 20px;
                    height: 75px;   /* Gets overriden by D3-assigned height below */
                    background-color: teal;
                    margin-right: 2px;
                }

            </style>


        </head>


        <body>

            <script type="text/javascript"> 
           var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                    14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
                    24, 18, 25, 9, 28 ];


               //Width and height
                    var w = 500;
                    var h = 120;
                    var barPadding = 1;   // <-- New!


               //Create SVG element
                    var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

                // GENERATING RECTANGLES AND MAKING BAR CHART

                     svg.selectAll("rect")
                   .data(dataset)
                   .enter()
                   .append("rect")
                   .attr("x", function(d, i) {
                        return i * (w / dataset.length);
                    })
                   .attr("y", function(d) {
                        return h- (d*5);
                   })
                   .attr("width", w / dataset.length - barPadding)
                   .attr("height", function(d) {
                        return d*5;
                   })
                   .attr("fill", function(d) {
                        return "rgb(0, 0, " + (d * 10) + ")";
                    });

            // APPENDIND TEXT INTO THE BAR CHART

                svg.selectAll("text")
                   .data(dataset)
                   .enter()
                   .append("text")
                   .text(function(d) {
                        return d;
                   })
                   .attr("x", function(d, i) {
                        return i * (w / dataset.length) + 3;
                   })
                   .attr("y", function(d) {
                        return h - (d * 4) + 10;
                   })
                   .attr("font-family", "sans-serif")
                   .attr("font-size", "11px")
                   .attr("fill", "white");


            </script>
            </body> 
            </html>

Upvotes: 1

Views: 78

Answers (2)

hawkeye
hawkeye

Reputation: 349

I think the "rect" styling you are using will solve your purpose. Try removing the "rect" from styling section of css because you are using the "rect" thing from SVG.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is the below css rule applied to rect element, which is hiding the bar, remove it and it should work fine

rect {
    fill: none;
}

Upvotes: 1

Related Questions