Microsoft’un ücretsiz olarak sunduğu Office Web Components (OWC) sayesinde profesyonel görünümlü dinamik grafikler oluşturabilirsiniz.
İçerik Başlıkları
Giriş
Bir web sayfası için olmazsa olmaz öğelerden biri grafiklerdir. Tasarım ne kadar iyiyse siteye geleceklerin sayısı da o kadar fazla oluyor. Çekici grafikler hem göze hoş gelmesi hem de okunurluğu kolaylaştırması açısında 21. yüzyılın tarzını yansıtıyor. Sitenin tasarımı, grafiklerin yerleşimi, bunların optimizasyonu ve hatta bunların animasyon halinde gösterimiyle ilgili birçok makale yazılıp-çiziliyor. Bizse bu ay grafiklere faklı bir açıdan bakarak dinamik olarak ASP aracılıyla oluşturulmasını inceleyeceğiz.
Grafiksel gösterimin yazı ile veri listelemekten daha etkin olduğu yadsınamaz bir gerçek. Borsayla uzaktan-yakından ilgilenenlerin de bileceği gibi, borsa verilerinden oluşturulan grafikler gidişatın ne yönde olduğunu, kağıdı almanın karlı mı zararlı mı olduğunu bir çırpıda gösterir. Aynı şekilde işyeri ortamında Excel’de oluşturulan grafikler sayfalar dolusu rakamdan daha akılda kalıcı ve çarpıcı.
Web programcılarının büyük bir bölümü artık veritabanı programcılığı konusunda da bilgi sahibi. Verinin girilmesi, güncellenmesi, silinmesi web sitelerinin ve intranetlerin standart işlemleri arasında. Fakat bunların sunumunda sorunlar yaşanıyor. Bu konuyu isterseniz bir örnek üstünde açalım. Siteye gelen ziyaretçilerin kaydını veritabanında tutulduğunu farz edelim. Ay bazında aldığımız rapor Ocak-200, Şubat-230, Mart-180... şeklinde bir sunumla karşımıza gelirse hangi aylarda site ziyaretçilerinin arttığı, hangi ayda kaç kişi geldiği, bunların genel ortalamaya oranları gibi aslında istediğimiz bilgiler hakkında bakar-bakmaz fikir vermesi oldukça güç. Fakat bunlar basit bir grafikle gösterilmiş olsalardı, raporu anlamak ve sonuçlar çıkartmak çok daha kolay olacaktı! Bunu basit bir bar grafiği ile göstermek bir web programcısı için oldukça kolay bir uygulama olacaktır.
Veri yığınlarından yorum yapacak şekilde grafikler ziyaretçi sayısı gibi tek parametreye sahip olacak kadar basit olmuyor. Borsa verilerini düşündüğümüzde veya kişi-satış rakamlarını düşündüğümüzde işler daha da karmaşıklaşır ve gereksinim duyulan grafik şekilleri de değişir.
HTML Sağ Olsun
Bar halinde kullanılan grafikleri oluşturmak için HTML’in nimetlerinden yararlanmak, çok web programcısının ilk aklına gelecek seçenektir. Tabloları, bir piksellik .gif resimleri ve katmanları (layer) harmanlayarak güzel grafikler oluşturmak mümkün. Geçen ay yaptığımız site yoğunluğunu gösteren uygulamayı da bu kategoriye katabiliriz.
Geçen ay yaptığımız uygulamada sitenin doluluk oranını göstermiştik. Bunun için tam boyda bir .gif dosyasını hücrenin arka planı olarak döşemiş, genişliğini blank.gif ile belirlemiştik.
Bir diğer yöntem ise, hücreleri uygun genişlikte açmak ve yine bir piksellik renkli .gif dosyalarını hücre boyutunda açmaktır.
Bar_tablo.asp
 |  |  |  |  |  |
Hangi yöntem size daha uygunsa veritabanından veya dosyadan çekeceğiniz verilerle ASP yardımıyla bu tabloları oluşturmak oldukça kolay olacaktır. İstediğiniz gibi de bu grafikleri özelleştirmek kolay. İsterseniz yatay isterseniz de dikey olarak grafikleri yapabilir, grafik başlığı renklerin ne anlama geldiğini anlatan tabloyla profesyonel görünüşlü bar grafikler yapabilirsiniz.
Ofis Web Bileşenleri
Grafiksel gösterimin özellikle web uygulamalarına ayrı bir çekicilik katacağı kesin. Tabloları kullanarak bar grafiklerini HTML ile oluşturmanın ne kadar kolay olduğunu biraz önce inceledik. Fakat dinamik oluşturulan grafiklerde daha fazlasına ihtiyaç duyduğunuzda (ki genellikle duyulur) 3. parti araçlara yönelmek zorundasınız. 3. parti üreticilerin sunduğu bu araçları edinmek ve web sunucusuna yüklemek ayrı bir sorundur. Çoğu web barındırma hizmeti satan şirket güvenlik gerekçesiyle size kendi yükledikleri bileşenlerin dışında başka bir araç yüklettirmezler. Bu yüzdende eliniz kolunuz bağlı kalır. Tabii bu araçları satın almak için gözden çıkartacağınız paradan hiç bahsetmiyorum. Küçücük uygulamalarını işletim sistemi fiyatına satıyorlar.
Peki, çözüm yok mu? Var tabii. Ailemizin yazılım firması Microsoft, web uygulamalarımızda dinamik grafikler oluşturmamız için bizlere Office Web Components’i (OWC) sunuyor. OWC ile Excel’de grafik oluşturur gibi (hatta Excel sayfalarında da veri çekebiliriz) grafikler oluşturmamıza yardımcı oluyor. Allahtan barındırma şirketleri bu seçeneği göz ardı etmiyorlar da sunucuya Office paketini yada en azından OWC’yi yüklüyorlar.
Microsoft’un ücretsiz olarak sunduğu bu kullanışlı COM bileşenler seti sayesinde çörek (pie) tadında grafikler oluşturmak mümkün oluyor. Grafiğin dışında, Excel bileşeni, pivot tablo bileşeni gibi başka işlemler için de kullanılabiliyor. OWC ile yapılabilecek bir sürü işlem var. Fakat bu ay sadece OWC ile grafik oluşturmaya odaklanacağız.
Web uygulamaları diğer GUI uygulamalardan farklı olarak grafiklerin dosya olarak bulunmasını istemekte. GUI uygulamalarında ise ister dosya olarak istersek de bellekte olan bir grafiği ekranda görüntüleyebiliriz. Bu yüzden işin temelinde içinde grafiğimizi barındıran bir gif dosyası oluşturmak var. Oluşturduğumuz dosyayı yer kaplamaması için hem sunucudan silebilir veya sadece belli bir adda dosya kullanarak devamlı olarak üzerine yazılmasını sağlayabiliriz. Oluşturduğumuz grafiklere gif, png veya jpg dosya formatlarından istediğimizi verebiliriz. Bu tarz grafikler için benim tercihim gif. Zaten Microsoft’ta varsayılan olarak da gif dosya formatını tanımlamış.
OWC ile yapabileceğimiz 60’ın üzerinde grafik türü var. Bazı grafiklerin gösterimden dolayı kendilerine has ayrıca özellikleri de bulunuyor.
Grafik oluşturmak için ilk önce ChartSpace (grafik alanı) oluşturmanız gerekiyor. Bu grafik alanı bir veya daha fazla grafiği barındıracak olan alan tanımlaması. Grafik alanını grafikleri çizeceğimiz bir tuval yüzeyi gibi de düşünebiliriz. Bu tuvale tek bir grafik oluşturmak ve kullanıcıya göstermek genel yaklaşım. Fakat istenirse bu yüzeyde birden fazla da grafik gösterilebilir. Grafikleri tek tek oluşturmak ve bunları tek bir sayfada alt alta göstermek daha mantıklı bir iş olacaktır. Yine de tercih sizin!
Microsoft Office 2000 ve XP’den farklı olarak Office 2003’de tanımlama daha değişik yapılıyor. Sunucunuzda veya bilgisayarınızdaki Office versiyonuna göre tanımlama yapmanız gerekiyor. Kullanımları arasında fazla farklılık olmasa da nesneyi oluşturma (tanımlama) sırasında küçük bir fark var.
set GRAFİK_NESNESİ = CreateObject("OWC.Chart") 'Office 2000 ve XP için
set GRAFİK_NESNESİ = CreateObject("OWC11.Chartspace") 'Office 2003 için
Görünümü istediğiniz gibi özelleştirebilmeniz için oluşturduğunuz grafik nesnesine ait çok fazla sayıda özellik ve metot bulunmakta. Grafiğin arkaplan rengi, ızgara gösterimi, boyutu gibi bir çok özelleştirilebilir parametre. Bir kere grafiğinizi ayarladıktan sonra, istediğiniz sayıda veri kümesini grafiğe yönlendirebilirsiniz.
Veri kümeleri dizi veya string tipinde olabilir. Dizilerin anlaşılması ve uygulaması daha kolay olduğu için stringlere göre daha çok tercih edilir. String tipinde bir veri ile uğraşmak istiyorsanız (veya elinizdeki veri bu tipteyse) veriler arasında virgül veya tab gibi ayırıcı bir özellik bulunmalı. Ben hiç biriyle uğraşmak istemiyorum veriler bulunması gereken yerde: “veritabanında” diyorsanız ne ala. Veritabanından veri çekmeye geçmeden önce basit bir dizi örneği üzerinde ilk grafiğimizi oluşturulalım.
Diziden Grafiğe
Yapacağımız örnek uygulamada, 2005 yılı içinde sitenize gelen ziyaretçilerin aylara göre dağılımının grafiksel olarak göstereceğiz. İşe ilk önce değişkenleri tanımlamakla başlıyoruz, daha sonra ilk değerlerini verip grafik yüzeyini oluşturacağız. Grafiğimiz için gerekli verileri ayarlayıp, grafiğin tipini seçerek özelleştireceğiz. Son adımda ise grafiğimizi bir gif dosyasına yazıp sayfada görüntüleyeceğiz.
1. Adım Tanımlama
Grafiğin dışında sayfada gerekli olan ay ve ziyaretçi dizileriyle (ay, ziyaretci), gif dosyasının adını tutacak olan değişkeni (DosyaAdi) tanımlıyoruz.
Dim oGrafik ' Grafik Nesnesi
Dim oSabitler ' Sabitler Nesnesi
Dim Grafik ' Grafiğimiz
Dim SC, SCA ' Sıra koleksiyonu
Dim ay(11), ziyaretci(11) ' Veriler
Dim DosyaAdi ' Oluşturduğumuz grafik dosyasının adı
2. Adım İlk Değerler
Grafik nesnesini OWC’nin sürümüne göre daha önce belirttiğim gibi tanımlıyoruz. Her iki tanımlamayı da yapmam mümkün değil. Bu yüzden sunucunuzun OWC sürümünü öğrenmenizde fayda var. Bilgisayarınızdaki sürüm ile sunucudaki sürüm farklıysa mutlaka sunucuya göndermeden önce gerekli değişikliği yapmanız gerekir.
'set oGrafik = CreateObject("OWC.Chart") 'Office 2000 ve XP için
set oGrafik = CreateObject("OWC11.Chartspace") 'Office 2003 için oGrafik.Clear()
oGrafik.Refresh()
set oSabitler = oGrafik.Constants 'Önceden tanımlanmış sabitlere erişiyoruz
set Grafik = oGrafik.Charts.Add 'Yeni bir grafik tanımlıyoruz
set SC = Grafik.SeriesCollection 'Seri koleksiyonuna ait tanımlamalar
set SCA = Grafik.SeriesCollection.Add
3. Adım Veriler
Dizi olarak tanımladığımız değişkenleri kendimize göre dolduruyoruz. Ay dizisini Ocak ayından başlayarak Aralığa kadar, ziyaretçi dizisini ise değişimi görebileceğimiz şekilde istediğimiz sayılarla dolduruyoruz.
Oluşturduğumuz verileri grafiğe bağlamamız gerekiyor. Bu yüzden grafik nesnesine eklediğimiz grafiğin seri koleksiyonuna verileri tanımlayacağız. Gerekli parametreler için daha önceden yine grafik nesnesinden türettiğimiz sabitler nesnesini kullanıyoruz.
ay(0) = "Ocak"
...
ziyaretci(0) = "140"
...
SCA.setData oSabitler.chDimCategories, oSabitler.chDataLiteral, ay
SCA.setData oSabitler.chDimValues, oSabitler.chDataLiteral, ziyaretci
SCA.setData oSabitler.chDimSeriesNames, oSabitler.chDataLiteral, "Ziyaretçi Sayısı"
4. Adım Grafik Türü
OWC’de önceden tanımlanmış atmışın üzerinde grafik türü var. Fakat bunları kabaca 13 gruba indirebiliriz. Bu 13 grup birbirinden tamamen farklı. Grup içindeki grafikler ise birbirleri arasında küçük değişiklikler gösteriyor. Ben örneğimizde chChartTypeArea3D tipini kullanacağım.
Grafik.Type = oSabitler. chChartTypeArea3D
5. Adım Özelleştirme
İstenilen etkiyi oluşturabilmek için grafiğimizi özelleştirmemiz (süslememiz) gerekir. Ayları gösterecek bir açıklama tablosu, başlık, değerler gibi öğeleri grafiğimize ekliyoruz. Arena3D tipinde bir grafik için aslında açıklama tablosuna gerek yok. Zaten gösterilmeyecekte. Fakat pie tarzında bir grafik yapsaydık ihtiyaç olacaktı. Bu yüzden çalışmak istediğiniz grafiği belirleyerek ona uyun olarak özelleştirme yapmanız gerekiyor. Arena3D için örneğin boyutlandırmada grafiğin duracağı eksen veya derinlik gibi özellikleri de kullanılabilir.
Grafik.HasLegend = TRUE 'Açıklama tablosu var
Grafik.HasTitle = TRUE 'Başlık var
Grafik.title.caption = "www.sitem.com Ziyaretçi Sayısı"
Grafik.title.font.name = "Tahoma"
Grafik.title.font.size = 10
Grafik.title.font.bold = TRUE
SC(0).DataLabelsCollection.Add.Interior.Color = RGB(255, 255, 255)
SC(0).DataLabelsCollection.Add.Font.Size = 8
6. Adım Gif Dosyası
Sondan bir önceki adımda gif dosyasını oluşturacağız. Gif yerine istenirse JPG veya PNG de kullanılabilir. Dosya sistemini kullanarak istenirse farklı isimlerde dosyalar oluşturulabilir, kopyalanabilir veya silinebilir. Biz örneğimizi basitleştirmek için bunları kullanmayacağız. Tek bir dosya üzerine her defasında yazacağız ve sadece ilgili dosyayı okuyacağız. Yazma işlemi gerçekleştireceğimiz için sistem tarafımdan hem yazma hem de okuma izinleri olan bir dizinde çalışmanız gerekiyor.
DosyaAdi = Server.MapPath(".") & "\" & "byte.gif"
oGrafik.ExportPicture DosyaAdi, "gif", 600, 400
7. Adım Gösterim
Gif dosyası olarak oluşturduğumuz grafiğimizi HTML’de basit bir resim gösterir gibi ekranda görüntüleyeceğiz. Burada dikkat edilmesi gerek husus, oluşturulan resmin tam yolunun, adının ve boyutlarının verilmesi gerektiği.
Grafiğimizi üzerine yerleştireceğimiz bir grafik nesnesi (oGrafik) tanımlamamız gerekiyor. Bu grafik nesnesinin üzerinde istediğimiz sayıda grafik tanımlayabileceğimizden bahsetmiştim. Biz sadece bir tane grafik oluşturacağımız için bir adet grafik değişkeni (Grafik) tanımlıyoruz. Grafik nesnesine ait sabit değerlerini almak için bir de sabitler nesnesi (oSabitler) nesnesi tanımlamamız gerekir. Son olarak da sıra koleksiyonuna ait değişkenleri (SC, SCA) tanımlıyoruz. Bu değişkenler sayesinde grafiğimizi özelleştirme şansına sahip olacağız. Sadece bu tanımlama adımından da anlaşılacağı gibi nesneye dayalı programcılık (OOP) yapacağız.
Veritabanını Bağlama
OWC grafiğine veritabanını da bağlayabilirsiniz. OWC’ye dizi değişkenlerini bağlamaktan çok da farklı değil. Sadece kayıt setinizi grafik nesnesinin DataSource özelliği ile ilişkilendirmeniz ve veri atamada işleminde veritabanının gerekli alanını vermeniz gerekiyor. Tanımlamalarda farklığa dikkat edin!
set oSabitler = oGrafik.Constants
set Grafik = oGrafik.Charts.Add
Dim strSQL, rst, strConnectionString
strConnectionString = "provider=microsoft.jet.oledb.4.0; data source=" & Server.MapPath(".") & "\data.mdb"
set rst = Server.CreateObject("ADODB.Recordset")
strSQL = "SELECT * FROM tblZiyaretci"
rst.open strSQL, strConnectionString, 3, 3
set oGrafik.DataSource = rst
Grafik.Type = oSabitler.chChartTypeArea3D
Grafik.SetData oSabitler.chDimCategories, 0, "ay"
Grafik.SetData oSabitler.chDimValues, 0, "ziyaretci"
Değerlendirme
Web dahil bütün uygulamalarda grafiklerin konu anlatış biçimi ve akılda kalırlığı yadsınamaz bir gerçek. Başta Intranet olmak üzere pek çok alanda web uygulamasıyla alınan raporda grafiksel anlatıma da yer verilmesi uygulamanın başarısını arttıracaktır.
Grafikleri oluşturmak için birkaç yöntem var. Bunlarda ilk akla geleni (ve çok karşılaşılanı) tablolar yardımıyla yapılan grafiklerdir. Bir diğer olası yöntem ise, 3. parti yazılım satın alarak kısıtlı grafik imkanlarından yararlanmak. Buradaki en büyük sorun ise uzak sunucuya 3. parti yazılımın (bileşenin) yüklenmesi. Bunlar dışında Adobe’nin Scalable Vector Graphics (SVG) ve MacroMedia’nın Flash teknolojileri de dinamik grafikler oluşturabileceğiniz ortamlar.
OWC ise Microsoft tarafından sunulan ücretsiz geniş bir bileşen kütüphanesi. Farklı işlemler için de kolaylıkla kullanılabilen OWC profesyonel görünümlü çekici grafikler oluşturmak için biçilmiş kaftan. Üzerinde biraz çalışarak Excel’de çıkarttığınız grafikleri rahatlıkla web ortamına da aktarabilirsiniz.
Çeşitli grafik uygulamalarını www.anilsezer.com/byte/asp adresinde bulabilirsiniz.
Hiç yorum yok:
Yorum Gönder