Google PieChart Kullanımı ve Dinamik Veri Eklenmesi

Bugün yine bir projede lazım olan ve internette hatta google'ın kendi sitesinde bile çok fazla dokümanı olmayan bir konudan bahsetmek istiyorum. Mevcutda çalışmakta olduğum bir projede ihtiyaç dolayısıyla chartlar ve grafiklere ihtiyaç duydum. İnternette yaptığım araştırmalar sonucunda google'ın böyle bir jquery kütüphanesi olduğunu gördüm (google kendi mi yazdı yoksa başkalarından mı topladı o konuda tam emin değilim.). Neyse konuyu hemen toparlayalım.




Sonuç olarak bana gerekli olan bu piechartları karşılayan kütüphanenin kullanımı şu şekilde :

NOT: Ben MVC razorda kodladım.

İlk olarak sayfamızda  kullanacağımız kütüphaneyi referans veriyoruz.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Ben ayrıca jquery kütüphanesi kullanıyorum. Onu da sayfama ekledim.

<script src="~/Scripts/jquery-2.1.4.js"></script>

Benim projemde veriler butona basılınca Json döndüren bir metot tarafından gönderiliyor.

 function getir() {

        $.ajax({

            url: '/Statistic/GetJsonData',

            dataType: "json",

            type: "GET",

            contentType: 'application/json; charset=utf-8',

            async: true,

            processData: false,

            cache: false,

            success: function (data) {

                drawChart(data);

            },

            error: function (xhr) {

                alert('error');

            }

        });

Burada dikkat ettiyseniz işlem success'e gidiyor ve drowChart metoduna verilerimi gönderiyor. İşte olay burada başlıyor. Artık pieChart oluşturuyoruz. 

 function drawChart(data) {

        var table = new google.visualization.DataTable();

        table.addColumn('string', 'Name');

        table.addColumn('number', 'Score');

        table.addRows(data.length);

        for (var i = 0; i < 2; i++) {

            for (var j = 0; j < data.length; j++) {

                if (i == 0) {

                    table.setCell(j, i, data[j].UserName);

                }

                if (i == 1) {

                    table.setCell(j, i, data[j].UserScore);

                }

            }

        }

        var options = {

            title: 'Sınav Sonuçları'

        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(table, options);

Burada google baba bizden bir table istiyor. Ben bu table'ın kolonlarını kendim oluşturuyorum. Oluşacak satır sayısını da belirtmemiz gerekiyor. Ben gelen verimin sayısını verdim. Yani Json olarak dönen veriyi.

var table = new google.visualization.DataTable();

        table.addColumn('string', 'Name');

        table.addColumn('number', 'Score');

        table.addRows(data.length);

Şimdi geldi sıra verileri table'a eklemeye.Burada mecburen kolon ve satır bilgilerini kendimiz veriyoruz. O yüzden iç içe 2 for loop'um var.

 for (var i = 0; i < 2; i++) {

            for (var j = 0; j < data.length; j++) {

                if (i == 0) {

                    table.setCell(j, i, data[j].UserName);

                }

                if (i == 1) {

                    table.setCell(j, i, data[j].UserScore);

                }

            }

        }

PieChart'ımızın başlığını da ekleyelim.

var options = {

            title: 'Sınav Sonuçları'

        };

Ve artık gerisini google metotlarına bırakıyoruz.

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(table, options);

Tabi bu pieChart'ı ekleyeceğimiz bir div'e ihtiyaç var. Bu da yukarıdaki kodda belirttiğimiz piechart id'li div.

Kodun tamamını da son olarak paylaşıyorum.

<script src="~/Scripts/jquery-2.1.4.js"></script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>

    google.load("visualization", "1", { packages: ["corechart"] });

    google.setOnLoadCallback(drawChart);

    function getir() {

        $.ajax({

            url: '/Statistic/GetJsonData',

            dataType: "json",

            type: "GET",

            contentType: 'application/json; charset=utf-8',

            async: true,

            processData: false,

            cache: false,

            success: function (data) {

                drawChart(data);

            },

            error: function (xhr) {

                alert('error');

            }

        });

    }

    function drawChart(data) {

        var table = new google.visualization.DataTable();

        table.addColumn('string', 'Name');

        table.addColumn('number', 'Score');

        table.addRows(data.length);

        for (var i = 0; i < 2; i++) {

            for (var j = 0; j < data.length; j++) {

                if (i == 0) {

                    table.setCell(j, i, data[j].UserName);

                }

                if (i == 1) {

                    table.setCell(j, i, data[j].UserScore);

                }

            }

        }

        var options = {

            title: 'Sınav Sonuçları'

        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(table, options);

</script>

<body>

    <div><input type="button" id="btnGetJson" value="Anket Sonuçlarını Getir" onclick="getir()" style="margin-top:100px; " /></div>

    <div id="piechart" style="width: 900px; height: 500px;margin-top:0px; "></div>

</body>

Örnek Görüntü :

Artık kullanırken beni hatırlarsınız :)