Javascript ile BarChart oluşturma

Bu dersimizde BarChart'ın nasıl oluşturulacağına göz atacağız.

Bu dersimizde BarChart'ın nasıl oluşturulacağına göz atacağız.

Öncelikle Char.aspx adında bir web sayfası oluşturalım.


<%@ 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>



Kolay gelsin.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Hatayı vermesi normal. Anlaşılan sayfa adını yanlış vermişsin. Sen http://localhost/Char.aspx dosyasını çağırıyorsun ama Chart.aspx ve Chart.aspx.cs dosyasını kullanıyorsun. Yani harf hatası. Yeniden düzenlersen hatayı gidermiş olursun.

Yukarı Git