Membuat PIE memakai Kendo-UI

Berangkat dari keinginan bikin grafik.. Saya menemukan ini di kendoUI, membuat grafik pie.. Awalnya saya bingung kenapa kok ngak bisa (dan ternyata gara-gara ngak di panggil js yang benar). Lalu saya download deh (save kendo.all.js nya) lalu baru saya kerjakan. Akhirnya.. saya bisa bikin tampilan grafik yang saya inginkan.

pilgub putaran 1

bila kurang jelas dapat di klik agar kelihatan jelas. sebelumnya saya mendapatkan datanya sebagai berikut:

Saiful Mujani Research and Consulting:
1. Foke-Nara: 33,54 persen
2. Hendardji-Riza: 2,02 persen
3. Jokowi-Ahok: 43,14 persen
4. Hidayat-Didik: 11,24 persen
5. Faisal-Biem: 5,08 persen
6. Alex-Nono: 4,98 persen

sumber: http://metro.news.viva.co.id/news/read/334909-ini-tahapan-pilkada-dki-putaran-dua

Untuk mempersingkat, saya akan menulis yang pentingnya saja. Untuk script sudah jadi bisa download di akhir. Berikutnya saya buat bagian atasnya seperti ini

<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">

untuk sumbernya memang dari luar agar hemat waktu. Berikutnya kita buat area chartnya

 <div id="example" class="k-content">
     <div class="chart-wrapper">
         <div id="chart"></div>
     </div>
<!--taro script disini-->
</div>

Disini adalah tempat chart muncul. Scriptnya lebih baik diletakkan dibagian bawah setelah tulisan di atas. Tetapi bisa juga di tempat yang ku tulis di atas. Fungsi yang dimasukkan terdiri dari 2 yaitu fungsi utama dan fungsi proses datanya.

FUNGSI CHART=GRAFIK

Fungsi ini yang akan mengubah data yang di input menjadi data / gambar yang kita lihat

function createChart() {
   $("#chart").kendoChart({
          theme: $(document).data("kendoSkin") || "default",
          title: {
                   text: "PILGUB JAKARTA PUTARAN 1"
                  },
          legend: {
                   position: "bottom",
                   labels: {
                      template: "#= text # (#= value #%)"
                            }
                        },
          seriesDefaults: {
            labels: {
                                visible: true,
                                format: "{0}%"
              }
          },

           series: [{
                            type: "pie",
                            data: [ {
                                category: "Foke-Nara",
                                value: 33.54
                          }, {
                                category: "Hendardji-Riza",
                                value: 2.02
                         }, {
                                category: "Jokowi-Ahok",
                                value: 43.14
                         }, {
                                category: "Hidayat-Didik",
                                value: 11.24
                          }, {
                                category: "Faisal-Biem",
                                value: 5.08
                         }, {
                                category: "Alex-Nono",
                                value: 4.98
                            } ]
                    }],
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
}

 Isi dengan tulisan yang sesuai seperti tulisan di atas untuk textnya. Berikutnya menuju ke data. Masukkan sesuai dengan listnya. Anggap saja value pada Hendardji-Riza tidak tepat
mari kita perbaiki angkat tersebut!! Ganti saja angkanya dengan angka yang lain.

FUNGSI UTAMA

      $(document).ready(function() {
          setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
                        createChart();
            $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
             });
           }, 500);
       });

fungsi disin hanya memanggil fungsi di atas, dan memberi delay agar tampilannya tidak langsung terlihat. Jalankan scriptnya dan kita akan lihat hasilnya

Berikutnya saya berfikir untuk membuat generatornya. Tapi sebelum ke generator.. silakan ambil scriptnya
script: codepaste.net