Bu yazımızda Asp. Net ile tablo kullanarak html çubuk grafik oluşturma örneği yapacağız. Basitçe html grafik hazırlamak için aslında bir tablonun içerisinde 2 alt tablo oluşturuyoruz. Tabiki bu işlemleri dinamik olarak yapıyoruz ki her seferinde grafiğimiz değerlerine göre farklı oluşsun.
Öncelikle projemize BarGrafik.aspx isimli bir web form ekliyoruz.
BarGrafik.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BarGrafik.aspx.cs" Inherits="BarGrafik.BarGrafik" %>
<!
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>Bar Grafik Denemesi</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="ltBarGrafik" runat="server"></asp:Literal>
</div>
</form>
</body>
</html>
Formumuzda bir adet Literal kontrolü bulunuyor. Literal kontrolünün Text özelliğine Page_Load olayında HTMLGrafikOlustur fonksiyonu ile oluşturduğumuz tabloyu atayacağız. Formumuzun kod sayfasını aşağıda bulabilirsiniz.
BarGrafik.aspx.cs
using System;
public partial class BarGrafik : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// X axisi için etiketlerimizi tutan diziyi tanımlıyoruz.
string[] EtiketDizisi = { "1999", "2000", "2001", "2002", "2003", "2004" };
// X axisi için değerlerimizi tutan diziyi tanımlıyoruz.
int[] DegerDizisi = { 35000, 42000, 57000, 43000, 59000, 28000 };
// Web formumuzda bulunan Literal kontrolümüze fonksiyonumuz tarafından oluşturulan HTML'i atıyoruz.
ltBarGrafik.Text = HTMLGrafikOlustur(EtiketDizisi, DegerDizisi, "Yıllara Göre Satış", "Yıllar", "Satış (USD)");
}
private string HTMLGrafikOlustur(string[] pEtiketDizisi, int[] pDegerDizisi,string strGrafikBasligi,string strXEtiketi,string strYEtiketi)
{
// Grafiğimizin yükseklik ve genişliğini tutan değişkenler
int iGrafikGenisligi = 350;
int iGrafikYuksekligi = 200;
int iKenarlikGenisligi = 4; // X ve Y axislerinin kalınlığı
int iSutunBoslugu = 3; //Sütunlar arasında bırakılacak olan boşluk değeri
int iMaksimum = 0; // Grafikte yer alacak en yüksek değeri tutan değişken
int iSutunYuksekligi = 0; //Sütunların yüksekliğini tutan değişken
int iSutunGenisligi = 0; //Sütunların genişliğini tutan değişken
string strHTML = ""; // Oluşturacağımız html kodunu tutan değişken
//Öncelikle fonksiyonumuza gönderilen değerlerden en büyüğünü buluyoruz.
foreach (int i in pDegerDizisi)
{
if (iMaksimum<i)
{
iMaksimum = i;
}
}
// Her sütunun genişliğini hesaplıyoruz.
iSutunGenisligi = (iGrafikGenisligi / (pDegerDizisi.GetLength(0) + 1)) - iSutunBoslugu;
// Tablomuzu bulduğumuz değerler yardımı ile oluşturmaya başlıyoruz.
strHTML = strHTML + "<table border=0 cellspacing=0 cellpadding=0>";
strHTML = strHTML + "<tr><td colspan=3 align=center><h2>" + strGrafikBasligi + "</h2></td></tr> ";
strHTML = strHTML + "<tr> ";
strHTML = strHTML + " <td valign=center><b>" + strYEtiketi + "</b></td> ";
strHTML = strHTML + " <td valign=top> ";
strHTML = strHTML + " <table border=0 cellspacing=0 cellpadding=0> ";
strHTML = strHTML + " <tr> ";
strHTML = strHTML + " <td rowspan=2><img src=images/bosluk.gif border=0 width=1 height=" + Convert.ToString(iGrafikYuksekligi) + "></td> ";
strHTML = strHTML + " <td valign=top align=right>" + Convert.ToString(iMaksimum) + " </td> ";
strHTML = strHTML + " </tr> ";
strHTML = strHTML + " <tr> ";
strHTML = strHTML + " <td valign=bottom align=right>0 </td> ";
strHTML = strHTML + " </tr> ";
strHTML = strHTML + " </table> ";
strHTML = strHTML + " </td> ";
strHTML = strHTML + " <td> ";
strHTML = strHTML + " <table border=0 cellspacing=0 cellpadding=0> ";
strHTML = strHTML + " <tr> ";
strHTML = strHTML + " <td valign=bottom><img src=images/siyah.gif border=0 width=" + Convert.ToString(iKenarlikGenisligi) + " height=" + Convert.ToString(iGrafikYuksekligi) + "></td> ";
// Grafiğimizdeki her bir değer için sütun yükseklikerini hesaplayarak çubukları oluşturuyoruz.
foreach (int i in pDegerDizisi)
{
iSutunYuksekligi=Convert.ToInt32((i * iGrafikYuksekligi) / iMaksimum);
if (iSutunYuksekligi==0)
{
iSutunYuksekligi = 1;
}
strHTML = strHTML + " <td valign=bottom><img src=images/bosluk.gif border=0 width=" + Convert.ToString(iSutunBoslugu) + " height=1></td> ";
strHTML = strHTML + " <td valign=bottom><img src=images/kirmizi.gif border=0 width=" + Convert.ToString(iSutunGenisligi) + " height=" + Convert.ToString(iSutunYuksekligi) + " alt=" + Convert.ToString(i) + "></td> ";
}
strHTML = strHTML + " </tr> ";
strHTML = strHTML + " <tr> ";
strHTML = strHTML + " <td colspan=" + Convert.ToString((2 * (pDegerDizisi.GetLength(0) + 1)) + 1) + "><img src=images/siyah.gif border=0 width=" + Convert.ToString(iKenarlikGenisligi + ((pDegerDizisi.GetLength(0) + 1) * (iSutunGenisligi + iSutunBoslugu))) + " height=" + iKenarlikGenisligi + "></td> ";
strHTML = strHTML + " </tr> ";
strHTML = strHTML + " <tr> ";
strHTML = strHTML + " <td></td> ";
// X axisinde yer alacak etiketlerimizi tablo içerisine yazıyoruz.
for (int i = 0; i < pDegerDizisi.GetLength(0); i++)
{
strHTML = strHTML + " <td></td> ";
strHTML = strHTML + " <td align=center><font size=2>" + pEtiketDizisi[i] + "</font></td> ";
}
strHTML = strHTML + " </tr> ";
strHTML = strHTML + " </table> ";
strHTML = strHTML + " </td> ";
strHTML = strHTML + " </tr> ";
strHTML = strHTML + " <tr> ";
strHTML = strHTML + " <td colspan=2></td> ";
strHTML = strHTML + " <td align=center><br /><b>" + strXEtiketi + "</b></td> ";
strHTML = strHTML + " </tr>";
strHTML = strHTML + "</table>";
// Oluşturduğumuz tabloyu geri döndürerek fonksiyondan çıkıyoruz.
return strHTML;
}
}
Ben grafiğin genişliği, yüksekliği ve sütun aralarındaki boşlukları sabit olarak atadım fakat isterseniz siz bu değişkenleri fonksiyondan parametre olarak alıp daha esnek grafikler hazırlayabilirsiniz.
Buradan grafik oluşturan kodlara, grafikte kullandığımız resimlere ve BarGrafik.html dosyasından da tablonun satırlara ayrılmış haline ulaşabilirsiniz. Tablonun kendisini formatlı bir şekilde görmeniz ne yaptığımızı daha iyi anlamanıza yardımcı olacaktır.
Faydalı olması dileğiyle,
Mustafa Altuntaşlar