Create bar chart using javascript - From Scratch

In this blog post, I will show you how to create a bar chart using javascript. There are a lot of libraries available for creating a chart. You can easily create a simple bar chart from scratch using javascript.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Chart" %>
<!DOCTYPE  html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
<title>Untitled Page</title>
<script  type="text/javascript">
function BarChart() {
document.getElementById("Bar1").style.width = document.getElementById("Qty1").value;
document.getElementById("Bar2").style.width = document.getElementById("Qty2").value;
document.getElementById("Bar3").style.width = document.getElementById("Qty3").value;
document.getElementById("Bar4").style.width = document.getElementById("Qty4").value;
document.getElementById("Bar5").style.width = document.getElementById("Qty5").value;
}
</script>
</head>
<body>
<form  id="form1"  runat="server">
<div>
<table  border="0"  cellpadding="0"  cellspacing="0">
<tr>
<td  style="padding-right: 5px">
<input  id="Qty1"  type="text"  style="width: 50px"  value="30"  />
</td>
<td  style="border-left: solid 2 #000000">
<div  id="Bar1"  style="height: 20; background-color: red"></div>
</td>
</tr>
<tr>
<td  style="padding-right: 5px">
<input  id="Qty2"  type="text"  style="width: 50px"  value="55"  />
</td>
<td  style="border-left: solid 2 #000000">
<div  id="Bar2"  style="height: 20; background-color: blue"></div>
</td>
</tr>
<tr>
<td  style="padding-right: 5px">
<input  id="Qty3"  type="text"  style="width: 50px"  value="110"  />
</td>
<td  style="border-left: solid 2 #000000">
<div  id="Bar3"  style="height: 20; background-color: green"></div>
</td>
</tr>
<tr>
<td  style="padding-right: 5px">
<input  id="Qty4"  type="text"  style="width: 50px"  value="75"  />
</td>
<td  style="border-left: solid 2 #000000">
<div  id="Bar4"  style="height: 20; background-color: yellow"></div>
</td>
</tr>
<tr>
<td  style="padding-right: 5px">
<input  id="Qty5"  type="text"  style="width: 50px"  value="35"  />
</td>
<td  style="border-left: solid 2 #000000; border-bottom: solid 2 #000000">
<div  id="Bar5"  style="height: 20; background-color:brown"></div>
</td>
</tr>
</table>
<input  type="button"  value="Chart"  onclick="BarChart()"  />
</div>
</form>
</body>
</html>

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru