Jquery ve ChartJs ile Gerçek Zamanlı Grafik Çizdirmek

Bu yazıda Jquery ve ChartJs 2.5.0 kullanarak bir web sitesi üzerinde dinamik grafik çizdireceğiz. CharJs ücretsiz bir grafik çizdirme kütüphanesi olup HTML kanvas  üzerine çizim yapmaktadır. Bu kütüphane pasta, çubuk ve çizgi gibi birçok grafik türüne destek vermektedir. Blog üzerinde hazırlanan grafik rastgele verileri çizecek olup bu uygulama dinamik döviz oranlarının gösterimi gibi amaçlarla kullanılabilir.  Grafiği çizdirebilmemiz için gerekli kanvas öğesini aşağıdaki gibi eklememiz gerekiyor:

<div style="width:400px;height:400px">

  <canvas id="myChart"></canvas>
    
</div>

Yukarıda boyutlar gelişigüzel seçilmiştir.  Sonraki aşamada gerekli javascript kodlarını aşağıdaki gibi ekleyelim.

var myChart;

var options = {

   maintainAspectRatio: false,
   responsive: true
};

var data = {

    labels: ["January", "February", "March", "April", "May", "June", "July"],

    datasets: [
        {
            label: "Buraya başlık gelecek",
            fill: true,
            lineTension: 0,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 1,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false                   
         }]              
};


$(document).ready(function () {

    var ctx = document.getElementById("myChart");

    myChart = new Chart(ctx, { type: 'line', data: data, options: options });
    var i = 0;

    startAnim(i);

});

function startAnim(i)
{
    setTimeout(function () {
        changeGrap(i);
    }, 500);
}

function changeGrap(i)
{
    myChart.config.data.datasets[0].data.shift();
    myChart.config.data.datasets[0].data.push(Math.random() * 100);
    myChart.update(100);

    startAnim(++i);
}

Burada data nesnesi verilerin gösterimi için gerekli değişkenleri içermektedir. Bu yazıda bunlar anlatılmayacak olup detaylı bilgiye buradan ulaşabilirsiniz. Yukarıda kodlarda options nesnesi içinde genel şekillendirme özellikleriyle ilgili bilgiler tanımlanmıştır. Bu nesne içindeki "maintainAspectRatio"  ile grafiğin görüntü oranına "aspect ratio" bağlı kalmadan taşıyıcı elementin boyutlarına genişlemesi sağlanmıştır. "responsive" özelliği taşıyıcı elementin boyunutun değişmesi drumunda grafiğin de yeniden boyutlanması amacıyla kullanılmaktadır.

"data" nesnesi içindeki "labels" dizisi ile grafiğin alt kısmının hangi etiketlerle kaç parça olacak şekilde bölümleneceği belirtilmektedir.

"datasets" dizisi içindeki ilk nesne ile grafiğimizin çizimi ile ilgili özellikler belirtilmektedir. Bu nesne içindeki "label" özelliği ile grafiğin başlığı tanımlanmaktadır. "fill" özelliği ile çizgi grafiğin çizgi altında kalan kısmın boyanması sağlanmaktadır. "data" dizisi içinde grafiğin başlangıç verisi tanımlanmaktadır (Grafiği dinamik kullanmayacaksanız grafiğin verisini tanımlamaktadır").

Jquery "ready" fonksiyonu içinde grafiğin oluşturma kodu çizgi grafik olarak (type:line) tanımlanmıştır.

"startAnim" fonksiyonu dinamik grafik güncellemesinin yapılması için kullanılmaktadır. Buradaki önemli nokta "changeGrap" fonksiyonu içindeki javascript "shift" fonksiyonu ile dizinin ilk elemanı diziden çıkarılmakta ve "push" fonksiyonu ile son eleman olarak rastgele oluşturulan yeni sayı atanmaktadır. Son olarak grafik nesnesinin (myChart) update fonksiyonu ile grafik güncellenmektedir.

Yukarıdaki kodların çalıştırılması sonucunda grafik aşağıdaki gibi oluşmaktadır: