Membuat Chart Doughnut

Chart Doughnut adalah salah satu tampilan Chart yang dapat kita gunakan untuk menampilkan data laporan berbentuk chart dengan bentuk yang bagus.

Untuk membuat data laporan berbentuk Chart ini kita harus mempersiapkan kode Js, Css dan Script penululisan data.

Sebagai percontohan, di sini kita akan memaparkan data prosentase tingkat pendidikan masyarakat.

Proses Pembuatan Chart Doughnut

Tahap Pertama

Kita tentukan terlebih dahulu data yang akan kita kemas dalam bentuk Chart Doughnut.
Total jumlah penduduk Desa Gabung Makmur pada tahun 2000 sebanyak 1000 kepala keluarga dan di ketahui taraf pendidikan penduduk (%) sebagai berikut :

Sekolah Dasar : 40%
Sekolah Lanjutan Tingkat Pertama : 20%
Sekolah Lanjutan Tingkat Atas : 15%
Perguruan Tinggi : 10%
Tidak dan Belum Sekolah : 15%

Tahap Kedua
Kita siapkan kode Js Chart Doughnut dan kita letakkan di laman postingan dengan format sebagai berikut :

<script src="http://www.pemdesgm.com/Tabel/ChartMaster/Chart.js"></script>

Tahap Ketiga
Kita siapkan kode Css untuk tampilan Chart Doughnut dan kita letakkan di laman postingan dengan format sebagai berikut :

<div id="canvas-holder" style="width: 30%;"><canvas height="500px" id="chart-area" width="500px">
</canvas></div>

Kode "Style" berfungsi untuk menentukan besarnya tampilan Chart dengan cara merubah nilai persentasinya (10%, 20% - 100%). Pada kode canvas yang di tunjukkan dengan kode "height" dan "width" berfungsi untuk menentukan ukuran dari besarnya tampilan chart yang akan di tampilkan berdasarkan penentuan angka pada "Style".

Tahap Keempat
Kode penulisan Chart Doughnut harus di mulai dengan kode pembuka "<script> dan diakhiri dengan kode "</script>" dengan ulasan sebagai berikut :

<script> var doughnutData = [ ........input data chart..... ]; window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
};</script>

Dan untuk input data chart-nya kita gunakan script sebagai berikut :

{
value: 40,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Sekolah Dasar"
},

Untuk "Value" di isi dengan angka data Chart, "Color" untuk menentukan warna tampilan awal chart berdasarkan value, "highlight" untuk menentukan warna tampilan chart ketika di sorot dengan mouse dan "label" untuk menentukan label/nama dari value chart.

Untuk lebih jelasnya, silahkan copy kode di bawah ini dan pastekan di laman web sahabat Indonesia.