I am new to css. I need to draw a graph using css with no libraries and frameworks . Can anyone please help me to draw a linear graph with this html table. Thanks in advance.
<html>
<head> TABLE TO GRAPH </head>
<body>
<table id ="graph" border="1">
<tr>
<th> WEEK </th>
<th> VISITORS </th>
</tr>
<tr>
<td> 1 </td>
<td> 20 </td>
</tr>
<tr>
<td> 2 </td>
<td> 40 </td>
</tr>
<tr>
<td> 3 </td>
<td> 60 </td>
</tr><tr>
<td> 4 </td>
<td> 80 </td>
</tr>
</table></body>
</html>It would be harder to draw a line-graph with HTML and CSS, but drawing a bar chart with HTML and CSS is relatively straightforward.
Working Example:
.bar-chart {
display: table;
margin-top: 20px;
}
.row {
display: table-row;
}
.row div {
display: table-cell;
width: 60px;
height: 44px;
border-right: 2px solid rgb(255, 255, 255);
}
.row .axis-y {
width: 96px;
border-right: 1px solid #000;
vertical-align: top;
}
.axis-x div {
border-top: 1px solid #000;
}
.axis-x .axis-y {
border: none;
}
.axis-x div, .axis-y {
text-align: center;
font-weight: bold;
}
.row1 div:nth-of-type(n+2) {
background-color: rgb(255, 0, 0);
}
.row2 div:nth-of-type(n+3) {
background-color: rgb(255, 0, 0);
}
.row3 div:nth-of-type(n+4) {
background-color: rgb(255, 0, 0);
}
.row4 div:nth-of-type(n+5) {
background-color: rgb(255, 0, 0);
}<div class="bar-chart">
<div class="row row4">
<div class="axis-y">80 Visitors</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row row3">
<div class="axis-y">60 Visitors</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row row2">
<div class="axis-y">40 Visitors</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row row1">
<div class="axis-y">20 Visitors</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row axis-x">
<div class="axis-y"></div>
<div>Week 1</div>
<div>Week 2</div>
<div>Week 3</div>
<div>Week 4</div>
</div>
</div>