How To Create Simple Barchart 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>

1 comment: