PHP ve Veri Grafikleri

Web tabanlı uygulamaların çoğunda veri grafik kartları yapılırken js veya ajax kullanılır.Bu yazıda js yada ajax kullanmadan nasıl basit bir grafik şeması hazırlayabileceğimizi göreceksiniz.

Bu şekilde basit bir grafik uygulaması için tarasarımı çok fazla düşünmenize gerek yok.Netice itibariyle algoritmayı iyi anlar ve modüler şekilde tasarlayabilirseniz bu durumda istediğiniz an istediğiniz uygulamaya entegre edebilirsiniz.Benim kullanacağım örnekte herhangi bir txt dosyasında mevcut olan aylara ve haftalara ayrılmış firma satış değerlerini grafik haliyle gösteren bir uygulama mevcut.

Öncelikle sınırlarımızı belirlemek adın stil dosyamızı oluşturmamız gerekiyor :

#grafik {
 font-family: Tahoma;
 font-size: 10px;
 text-align: center;
 margin-top: 10px;
 padding: 0px;
 border-width: 0px;
}

#grafik p {
 margin-top: -20px;
 background-image: url('images/cizgi.jpg');
}

#grafik td {
 width: 40px;
 bottom: 0px;
}

#tasiyici {
 height: 200px;
 width : 40px;
}

<P> etiketimiz için atadığımız değer -20.Bunun sebebi üzerine gelecek olan imaj ile arasında boşluk olmasını istemiyor olmamız.Grafik çubuklarının oluşturulmasında kullanacağımız cizgi.jpg dosyamızın büyüklüğü yaklaşık olarak 20 px * 2 px olursa yeterlidir.Zaten direkt ekranda göstermek yerine <p> etiketi arka planı olarak kullanacağız.

Model konusu olarak yukarıda da bahsettiğim gibi sene bazında aylık satış raporu tasarımı yapacağız.Bu aşamada kodu elimizdeki veri dosyasına göz atalım :

Yıl, Ay, Hafta, Tarih, Alıcı,Toplam Tutar

2009,8,51,07-05-2009,xyz@gmail.com,33028.2
2009,8,51,08-01-2009,xyz@gmail.com,31845.25
2009,8,51,12-02-2009,xyz@hotmail.com,69205.23

Virgülle ayrılmış değerlerin her biri yine yukarıda göreceğiniz etiketleri ifade ediyor.Özellikle txt dosyası işlemini seçmemin sebebi biraz daha zordan başlayarak geriye dönük tecrübe kazanmanız.Dosyamızın ismi ise musterirapor.txt.

Şimdi sırada bu verilerin işlenmesi var :

function grafikGoster ()
{  
 $zaman = 0;
 echo "<table><tr><td>AYLIK BAYİ SATIŞ RAPORU GRAFİĞİ</td></tr></table><table><tr>";
 for($i=0; $i<12; $i++)
 {
 $zaman++;
 echo "<td><div id='tasiyici'><table id='graph'><tr><td>";
 $satirlar = file("rapor/musterirapor.txt");
   foreach($satirlar as $_satir)
    {
     list ( $yil, $ay, $hafta, $tarih, $bayi, $toplam) = explode (',',$_satir);
     if ($tarih > 0)
     { 
      if ( $ay == $zaman )
       {
        $toplamTutar = $toplam + $toplamTutar;

       }
     }
    }
 for( $k = sutun($toplamTutar); $k > 0; $k--)
 {
 echo "<p>&nsbp;</p>";
 }
 echo "</td></tr><tr><td>"; echo number_format("$toplamTutar",".");
echo "</td></tr></table></div></td>";
 }
 echo "</tr></table>";
}

Yukarıdan aşağı doğru kısaca açıklayalım.$zaman değişkenimiz raporumuz aylık olduğu için sıfır değeriyle başlıyor ve for döngüsü içerisinde daha ilk adımda 1 değerini alarak rapor için çıktı üretmeye başlıyor.Daha sonra bir önceki adımda oluşturulan tablonun içerisine <div> etiketi ile birlikte başka bir tablo oluşturuluyor :

Neden ayrıca <div> kullandığımıza gelince.Eğer div etiketi kullanmasaydık bu durumda sütünlarımızın hizası konusunda sorun yaşacaktık ve görüntüsü aşağıdaki resim gibi olacaktı.

Tablo oluşturulduktan sonra grafik sutunlarının altına gelecek olan değerler tarih aralığına göre $ay == $zaman eşitliği takip edilerek toplanıyor.İşin hesaplama kısmı bitinceyse sutun() isimli fonksiyonumuza $toplamTutar değişkenimizi for döngüsü içerisinde gönderiyoruz ve fonksiyonumuz kaç adet <p></p> etiketi çalıştırılacağını ve sütunumuzun yüksekliğinin ne kadar olacağını gösteren bir değer döndürüyor.

function sutun ($birim)
{
 if ( $birim > 1000000 )
 {
  $birim = substr($birim, 0, 4);
  $birim = $birim / 20;
  return $birim;
 }
 else
 {
  $birim = substr($birim, 0, 4);
  $birim = $birim / 200;
  return $birim;
 }
}

Bu arada sutun() fonksiyonunda biraz kurnazlık yapmamız gerekiyor.Döndürülecek değeri nasıl bulacağımız sorusunun çözümüde bu zaten.Önce sutun () fonksiyonuna gelen değeri inceleyelim ve 100.000 ile 15.000 arasında bir değer aldığını varsayalım.Şayet substr kullanarak ilk 2 rakamı ( 650,000 için 650, anlamına gelir ) alırsak bu sefer daha büyük değer için sorun yaşayacağız anlamına gelir ( 1,650,00 için yine 165, değeri elde edilir) .substr ile benim örneğimde ilk 4 haneyi aldıktan sonra yine örnektede göreceğiniz gibi 1,000,000 üzeri değeri daha alt değerden ayırmam için yapmam gereken aslında bölüm katsayısını düşürmek.Ayrıca değerlerden gelen bir virgül problemide mevcut.Bu iki sorunun çözmenin yolu sadece bu.

Böylece 650,000 değeri için 650, alınırken 1,500,000 değeri için sadece 1500 değerini elde edebiliyoruz.Sonuç itibariyle zaten ilk adımda büyüklük kontrolü yaptığımız verimiz bize 650,000 için  32.5,  1,500,000 için ise 75 birim döndürecektir.

Bu aşamadan sonra ekrana, gelen değer kadar paragraf <p> gösteriyor ve satırlar ile tabloyu kapatıyoruz.( <p> etiketinin arka planı bizim çizgi resmimizdi )

Dikkat etmeniz gereken nokta satır ve tabloların başlayıp bittiği alanlar.Örneğin :

<table><tr> ( Bir satır açıldı ) <td> ( Artık bir hücre var ) <p></p> * sutun(toplamTutar)  ( dönen adet kadar <p> etiketi ) </td></tr></table>

İlk for döngümüz 12 ay için çalıştı.Sonuç olarak yanyana 12 adet sütun elde etmiş olduk ve bu etiketlerin yüksekliğini sutun() fonksiyonumuzu kullanarak ayarlayıp altınada değerleri yazdırmış olduk.Grafiğimiz yukarıdan sarkan grafik çubukları şeklinde görüntülenecektir.

Beyin jimnastiği yapmak isterseniz çubukların tavana hizalı değilde tabana hizalı nasıl olabileceği konusunda çalışma yapabilirsiniz.

Kolay gelsin.