DevilMcRayn
- 20 Kas 2017
- 665 Mesaj
Merhabalar bu yazımızda Lojistik grup adına AJAX ile Gerçek Zamanlı Veri Analizi JSON Verisinin Grafikleştirilmesi Hakkında bilgileri siz değerli Turkhacks üyelerimize Anlatmaya çalışacaz.
AJAX ile Gerçek Zamanlı Veri Analizi: JSON Verisinin Grafikleştirilmesi
Web uygulamaları, kullanıcılarına dinamik ve interaktif deneyimler sunmak için sürekli gelişmektedir. Bu gelişmelerin önemli bir parçası da gerçek zamanlı veri analizi ve görselleştirmedir. AJAX (Asynchronous JavaScript and XML) teknolojisi sayesinde, sayfanın tamamını yenilemeye gerek kalmadan sunucudan veri çekebilir ve bu veriyi anında işleyerek kullanıcıya sunabiliriz. Bu makalede, AJAX kullanarak JSON formatındaki veriyi nasıl çekeceğimizi ve bu veriyi popüler grafik kütüphaneleri aracılığıyla nasıl görselleştireceğimizi adım adım ele alacağız.Neden Gerçek Zamanlı Veri Analizi ve Görselleştirme?
Gerçek zamanlı veri analizi, anlık olarak üretilen verilerin toplanması, işlenmesi ve analiz edilmesidir. Bu yaklaşım, işletmelerin ve uygulamaların değişen koşullara hızla adapte olmasını sağlar. Örneğin, bir hisse senedi takip uygulaması, döviz kurları, hava durumu güncellemeleri veya sunucu performans metrikleri gibi birçok alanda gerçek zamanlı veriye ihtiyaç duyulur. Bu verinin görselleştirilmesi ise karmaşık veri setlerinin anlaşılmasını kolaylaştırır ve hızlı kararlar alınmasına yardımcı olur.AJAX ile Veri Çekme Temelleri
AJAX, sunucu ile asenkron iletişim kurmak için kullanılan bir web geliştirme tekniğidir. JavaScript'in XMLHttpRequest nesnesi veya daha modern Fetch API'si aracılığıyla sunucuya istek gönderilir ve yanıt sayfa yenilenmeden işlenir.Örnek 1: Temel AJAX (XMLHttpRequest)
Kod:
[/COLOR][/COLOR][/COLOR][/COLOR]
[COLOR=rgb(65, 168, 95)][COLOR=rgb(247, 218, 100)][COLOR=rgb(65, 168, 95)][COLOR=rgb(247, 218, 100)]JavaScript
function loadDataWithXHR() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/realtime-data', true); // Gerçek bir API adresiyle değiştirin
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
const data = JSON.parse(xhr.responseText);
console.log("XHR ile gelen veri:", data);
// Veriyi işleme ve görselleştirme fonksiyonlarını burada çağırın
} else {
console.error('Veri yüklenirken hata oluştu:', xhr.statusText);
}
};
xhr.onerror = function() {
console.error('Ağ hatası oluştu.');
};
xhr.send();
}
// Belirli aralıklarla veri çekmek için
// setInterval(loadDataWithXHR, 5000); // Her 5 saniyede bir
Örnek 2: Modern AJAX (Fetch API)
Fetch API, XMLHttpRequest'e göre daha modern ve kullanımı kolay bir arayüz sunar. Promise tabanlı yapısı sayesinde asenkron işlemleri daha okunabilir hale getirir.
JavaScript
function loadDataWithFetch() {
fetch('https://api.example.com/realtime-data') // Gerçek bir API adresiyle değiştirin
.then(response => {
if (!response.ok) {
throw new Error('HTTP hatası! Durum: ' + response.status);
}
return response.json();
})
.then(data => {
console.log("Fetch ile gelen veri:", data);
// Veriyi işleme ve görselleştirme fonksiyonlarını burada çağırın
})
.catch(error => {
console.error('Veri yüklenirken hata oluştu:', error);
});
}
// Belirli aralıklarla veri çekmek için
// setInterval(loadDataWithFetch, 5000); // Her 5 saniyede birJSON Verisinin Yapısı
Gerçek zamanlı veri genellikle JSON (JavaScript Object Notation) formatında gelir. JSON, hafif, okunabilir ve kolayca ayrıştırılabilir bir veri değişim formatıdır. Örnek bir JSON veri yapısı aşağıdaki gibi olabilir:[COLOR=rgb(247, 218, 100)]JSON[/COLOR][ {"zaman": "2025-06-30T10:00:00Z","deger": 25.5 }, {"zaman": "2025-06-30T10:01:00Z","deger": 25.7 }, {"zaman": "2025-06-30T10:02:00Z","deger": 26.1 }[COLOR=rgb(247, 218, 100)]][/COLOR]Bu örnekte, her bir obje bir zaman noktası ve o zamana ait bir değeri temsil etmektedir. Grafikleştirme için bu zaman ve deger alanlarını kullanacağız.
Grafik Kütüphaneleri ile Görselleştirme
JSON verisini görselleştirmek için çeşitli JavaScript grafik kütüphaneleri bulunmaktadır. En popüler olanlardan bazıları Chart.js, D3.js ve Google Charts'tır. Bu makalede, kullanım kolaylığı ve esnekliği nedeniyle Chart.js'i kullanarak bir örnek yapacağız.Chart.js ile Grafik Oluşturma Adımları:
- Chart.js Kütüphanesini Dahil Etme: HTML dosyanızın <head> veya <body> etiketleri arasına Chart.js CDN bağlantısını ekleyin.
HTML
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
- Canvas Öğesi Oluşturma: Grafiğin çizileceği bir <canvas> öğesi tanımlayın.
HTML
<canvas id="realtimeChart"></canvas>
- Grafiği Çizme ve Güncelleme: JavaScript kodunuzda, AJAX ile gelen veriyi kullanarak grafiği oluşturun ve güncelleyin.
Aşağıdaki kod, AJAX ile belirli aralıklarla veri çeker ve bu veriyi bir çizgi grafikte günceller.
HTML
Kod:
<!DOCTYPE html>[/COLOR][/COLOR]
[COLOR=rgb(65, 168, 95)][COLOR=rgb(247, 218, 100)]
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerçek Zamanlı Veri Analizi ve Grafikleştirme</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f4; }
.chart-container { width: 80%; max-width: 900px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<div class="chart-container">
<h2>Gerçek Zamanlı Veri Değişimi</h2>
<canvas id="realtimeChart"></canvas>
</div>
<script>
const ctx = document.getElementById('realtimeChart').getContext('2d');
let realtimeChart; // Grafiği bir kez tanımlayıp sonra güncelleyeceğiz
// İlk grafik oluşturma fonksiyonu
function initializeChart(labels, data) {
if (realtimeChart) {
realtimeChart.destroy(); // Eğer daha önce bir grafik varsa yok et
}
realtimeChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Değer',
data: data,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
fill: false
}]
},
options: {
responsive: true,
animation: false, // Gerçek zamanlı güncellemelerde animasyonu kapatmak performansı artırabilir
scales: {
x: {
type: 'time', // Zaman ekseni için
time: {
unit: 'minute',
displayFormats: {
minute: 'HH:mm:ss'
}
},
title: {
display: true,
text: 'Zaman'
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: 'Değer'
}
}
}
}
});
}
// Veri çekme ve grafiği güncelleme fonksiyonu
function fetchDataAndUpdateChart() {
// Gerçek bir API olmadığı için sahte veri üretiyoruz
// Gerçek bir senaryoda burası fetch() veya XMLHttpRequest() ile API çağrısı olacaktır.
const generateRandomData = () => {
const now = new Date();
const dataPoints = [];
for (let i = 0; i < 10; i++) { // Son 10 dakikanın verisi
const time = new Date(now.getTime() - (9 - i) * 60 * 1000);
const value = parseFloat((Math.random() * 50 + 20).toFixed(2)); // 20 ile 70 arasında rastgele değer
dataPoints.push({ zaman: time.toISOString(), deger: value });
}
return dataPoints;
};
const jsonData = generateRandomData(); // Sahte JSON verisi
const labels = jsonData.map(item => new Date(item.zaman));
const values = jsonData.map(item => item.deger);
if (!realtimeChart) {
initializeChart(labels, values); // İlk kez grafiği oluştur
} else {
// Mevcut grafiği güncelle
realtimeChart.data.labels = labels;
realtimeChart.data.datasets[0].data = values;
realtimeChart.update();
}
}
// Sayfa yüklendiğinde ve sonra her 3 saniyede bir veriyi çekip güncelleyin
document.addEventListener('DOMContentLoaded', () => {
fetchDataAndUpdateChart(); // İlk yüklemede veriyi çek
setInterval(fetchDataAndUpdateChart, 3000); // Her 3 saniyede bir güncelle
});
</script>
</body>
</html>Bu örnekte, fetchDataAndUpdateChart fonksiyonu sahte JSON verisi üretmektedir. Gerçek bir uygulamada, bu fonksiyonun içindeki generateRandomData() kısmını kaldırıp, yukarıda gösterilen fetch() veya XMLHttpRequest() ile gerçek bir API'den veri çeken kodu entegre etmeniz gerekmektedir.
Grafik güncelleme mekanizması şu şekildedir:
- İlk kez sayfa yüklendiğinde initializeChart fonksiyonu çağrılarak grafik oluşturulur.
- Daha sonraki çağrılarda, realtimeChart objesi zaten var olduğu için realtimeChart.data.labels ve realtimeChart.data.datasets[0].data doğrudan güncellenir ve realtimeChart.update() çağrılır. Bu, grafiği yeniden çizmeden sadece verileri günceller, bu da performans açısından daha verimlidir.
- type: 'time' eksen tipi sayesinde, Chart.js zaman verilerini otomatik olarak işleyebilir ve uygun etiketleri gösterebilir.
Performans ve Optimizasyon İpuçları
Gerçek zamanlı veri analizi ve görselleştirme yaparken performans kritik öneme sahiptir. İşte dikkat etmeniz gereken bazı ipuçları:- Veri Boyutu: Sunucudan çekilen veri miktarını minimumda tutun. Yalnızca gerekli verileri gönderin.
- Güncelleme Sıklığı: Veri çekme sıklığını uygulamanızın ihtiyaçlarına göre ayarlayın. Her saniye güncelleme gerekmeyen durumlar için daha uzun aralıklar kullanın.
- Tarayıcı Performansı: Çok fazla veri noktası veya karmaşık grafikler tarayıcı performansını etkileyebilir. Büyük veri setleri için veri toplama (aggregation) veya örnekleme (sampling) tekniklerini kullanmayı düşünün.
- WebSockets: Eğer gerçekten anlık ve çift yönlü iletişim gerekiyorsa, AJAX polling yerine WebSockets gibi teknolojileri değerlendirin. WebSockets, sunucu tarafından bir olay tetiklendiğinde veriyi doğrudan istemciye gönderebilir.
- Grafik Animasyonları: Gerçek zamanlı grafiklerde animasyonları kapatmak (animation: false), performans artışı sağlayabilir.
Sonuç
AJAX, web uygulamalarında gerçek zamanlı veri analizi ve görselleştirme için güçlü bir araçtır. JSON formatındaki veriyi çekip Chart.js gibi kütüphanelerle görselleştirerek kullanıcılarınıza dinamik ve bilgilendirici deneyimler sunabilirsiniz. Bu makaledeki örnek kodlar ve ipuçları, kendi gerçek zamanlı veri görselleştirme projeleriniz için sağlam bir temel oluşturacaktır. Uygulamanızın özel ihtiyaçlarına göre bu teknikleri özelleştirebilir ve geliştirebilirsiniz.LOJİSTİK TİM SUNDU
