Membuat Grafik Area

Mungkin anda bertanya-tanya apa itu grafik area. Pada dasarnya grafik ini menunjukkan warna dan garis. Bisa dibilang perpaduan antara line (garis) dan bar (batang). Pada gambar di atas ditunjukkan bentuknya. Klik untuk melihat lebih jelas.

Untuk membuat saya memakai tutorial sebelumnya yaitu tutorial PIE, disini saya akan beri html sederhana, jadi anda harus melengkapi dengan tag-tag lainnya. Sebenarnya ini berangkat dari pertanyaan sederhana kita ingin membuat grafik, tetapi grafiknya dinamis. Apa yang kita bisa diberikan saat ini hanyalah data (angka) dan nama datanya (kota). Lalu kita butuh grafiknya dinamis.


Tutorial ini tidak akan membuat tampilannya jadi benar-benar dinamis, tetapi setidaknya data yang di bisa berbeda-beda sehingga grafiknya sendiri akan mengikuti dari si data. Saat ini kita akan main data yang statis dimana data itu sudah ada di HMTL yang kita buat. Perlahan kita akan pake data dinamis dimana data diletakkan di file json atau xml. Walau saya lebih fokus ke json karena dari kendo nya memberikan json.

Pertama jangan lupa buatlah script demikian

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css" rel=”stylesheet”>
<link href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.blueopal.min.css" rel=”stylesheet”>

Berikutnya kita buat tempat menaruh grafiknya

<div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart"
        style="background: center no-repeat url('../content/shared/styles/world-map.png');">
        </div>
    </div>
</div>

saya menyarankan untuk membuat css id example memiliki tempat yang tepat. Jadi bentuknya tidak berantakan saat dijalankan. Berikutnya tentu fungsi-fungsi yang akan kita jalani.

FUNGSI MEMBUAT CHART

Ini adalah fungsi utamanya. Kita harus memasukkan data-data yang diperlukan seperti judul (title), posisi keterangan data (legend), data (series), nilai, nilai posisi axis / horizontal dan tooltips. Untuk letak menaruhnya, kita menentukannya di id chart (#chart).

function createChart() {
            $("#chart").kendoChart({
                theme: $(document).data("kendoSkin") || "default",
                title: {
                    text: "Internet Users"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "area"
                },
                series: [{
                    name: "World",
                    data: [15.7, 16.7, 20, 23.5, 26.6]
                }, {
                    name: "United States",
                    data: [67.96, 68.93, 75, 74, 78]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    }
                },
                categoryAxis: {
                    categories: [2005, 2006, 2007, 2008, 2009]
                },
                tooltip: {
                    visible: true,
                    format: "{0}%"
                }
            });
        }

Berikutnya kita akan memperhatikan datanya

                series: [{
                    name: "World",
                    data: [15.7, 16.7, 20, 23.5, 26.6]
                }, {
                    name: "United States",
                    data: [67.96, 68.93, 75, 74, 78]
                }],

 Disini kita memiliki 2 data yaitu dunia dan juga US. Atau untuk mudahnya membaca, mari lihat seperti ini saja

{
   name: "United States",
   data: [67.96, 68.93, 75, 74, 78]
}

Seperti yang kita lihat, namanya "United States" dan datanya secara berurutan 67.96, 68.93 dan seterusnya. Perhatikan bahwa masing-masing angka itu memiliki keterkaitan dengan

categoryAxis: {
      categories: [2005, 2006, 2007, 2008, 2009]
}

Jadi bisa ditarik kesimpulan data Amerika Serikat:

• 2005 = 67.98
• 2006 = 68.93
• dan seterusnya

Karena kita mencoba-coba, mari tambahkan data setelah unites states yaitu Japan

 {
   name: "JAPAN",
   data: [77.9, 78.93, 85, 84, 88]
}

Ketika nanti dijalankan maka kita akan mendapatkan

 FUNGSI UTAMA

Bisa dibilang ini adalah fungsi yang akan menjalankan perintah di atasnya

$(document).ready(function() {
            setTimeout(function() {
                createChart();

                // Memberikan waktu delay
            }, 500);

            $(document).bind("kendo:skinChange", function(e) {
                createChart();
            });
});

Fungsinya sendiri akan memperlambat hadirnya data (5 detik). Untuk scriptnya kamu bisa mengambilnya di codepaste.net