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>