Categories
Mastering Development

Create bar graph without in JavaScript

I’m trying to implement this graph with data given below using JavaScript without using <canvas>. I got one bar can’t see the rest. I want at least 4 bars with x-axis and y-axis numbers (not necessary to be true).

const g = document.getElementById("graph");

const graphData = {
  title: "Wild Animals in Istanbul",
  yAxis: "population",
  data: [{
      name: "pigeon",
      value: 30,
      color: "red"
    },
    {
      name: "wolf",
      value: 20,
      color: "blue"
    }
  ]
}

function createGraphIn(g, graphData) {
  const numOfBars = graphData.data.length;


  var bar = document.createElement("div");
  bar.style.backgroundColor = graphData.data[0].color;
  bar.style.border = "1px solid black";
  bar.style.position = "absolute";
  bar.style.left = "20px";
  bar.style.top = "100px";
  bar.style.width = "30px";
  bar.style.height = graphData.data[0].value + "px";

  g.appendChild(bar);


}
createGraphIn(g, graphData);
div#graph {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  position: relative;
}
<div id="graph">

</div>

Leave a Reply

Your email address will not be published. Required fields are marked *