Highcharts ile Server Taraflı Grafik Oluşturma

Standart
Bilgiyi paylaşarak çoğalt !Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Facebook0Pin on Pinterest0

İlk olarak PhantomJS‘in sitesinden phantom’u indirmemiz gerekiyor. İndirilen zip dosyasını çıkarttıktan sonra phantomjs-2.0.0-windows\bin dizinine gelelim. Daha sonrasında Highcharts’ın github hesabı olan highslide-software‘in paylaştığı kütüphanlerden sırasıyla highcharts.com/eporting-server/phantomjs altında bulunan bütün kütüphaneleri indirip, önceden indirmiş olduğumuz phantomjs’in bin dizinine koyuyoruz. Daha önceden Highcharts’ın sitesinden full api indirildiyse oradada Exporting klasörünün altında aynı dizinde bulabilirsiniz.

Şimdi terminal ekranını açalım ve phantomjs’in bin klasörünün bulunduğu dizine terminal ekranı ile gidelim.

zxc1

 

Daha sonra local’de çalışacak bir server oluşturuyoruz. 3003 portunu dinleyen ve 127.0.0.1 adresinde yer alan serverı, terminal ekranına aşağıdaki kodu yazarak PhantomJS ile oluşturuyoruz:

zxc2

“OK, PhantomJS is ready” ile server’ımızın çalıştığı response’unu aldık. Şimdi Java ile yazacağımız uygulama ile bu server’a istekte bulunup. belirttiğimiz javascript kodu ile istediğimiz grafiğin oluşturulmasını sağlayacağız. Bu işlem için ilk olarak Eclipse’i açıp HighchartPhantom adlı bir maven projesi oluşturalım. Projenin içerisinde oluşan App sınıfında işlemlerimizi yapacağız. İlk olarak httpclient kütüphanesini indirmak için pom.xml‘e dependency’imizi ekleyelim:

Bunu ekledikten sonra App sınıfımıza dönelim. İlk olarak yapmamız gereken HTTP isteğinde bulunmak. Bu istek json formatında olacak. Bunun için aşağıdaki kodu ekleyelim:

Şimdi highcharts ile oluşturmak istediğimiz grafiğin javascript kodunu içeren, phantomjs parametleri bulunan ve hardcoded olarak tutulan istek jsondan bahsedeceğim. PhantomJs temelinde highcharts ile grafik oluşturma isteklerinde iki adet parametre ile çalışır:

  1. infile: gönderilecek highchart kodlarının bulunduğu dosya veya hardcoded dizi
  2. outfile: oluşturulacak grafiğin nereye kaydedileceği

Şimdi bunun için kodumuza hazırlamış olduğum string kodunu ekleyelim:

Bu highcharts koduna göre çıktı Tokyo ve New York adlı iki adet serinin bulunduğu bir grafik olmalıdır. Normalde string içerisinde geçen Highcharts kodu aşağıdadır:

Sonrasında http clientin execute metodu çalıştırılır ve json, phantom serverina gönderilir:

Phantom kendisine gelen isteği parse ettikten sonra syntax’a uygun değilse “ERROR” ile başlayan bir response döndürüyor. Burada böyle bir yanlışlık var ise bunu yakalamak için isError değerini sorguladık. Programı çalıştırdığımız da ekran çıktısı olarak:

almalıyız ve terminal ekranında resmin oluşturulduğunu gösteren parsed çıktıları görüntülenecektir:

zxc3

Son olarak phantomun bin klasörünün içerisine baktığımızda deneme.png adında aşağıdaki grafik oluşmuş olacak:

deneme

 

2 Comments

    • server tarafında, highcharts ile oluşturulacak olan grafiklerin kaydedilmesi, numaralandırılması, en-boy oranının belirlenmesi, formatının seçilmesi vb. türden işlemleri gerçekleştirmek demek. Eğer client tarafında gerçekleşmeyecek bir işlemi server yapacak ise bunun tamamlanmasını sağlıyor.

Leave a Reply