2014-11-30

Google Chart bar pt 1

Karena kebutuhan untuk mendapatkan tampilan yang dinamik dan langsung terlihat. Jadi saya putuskan memakai milik google. Ditambah menghindari hal yang tak di inginkan, jadi kuputuskan memakai google bukan kendo ui


pertama bukalah ini dan pelajari.. kamu bisa dapat dari google chart
http://jsfiddle.net/1eLqa3va/

source : https://developers.google.com/

pertama arahkan pandangan ke

var options = {
        title: 'Company Performance',
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                color: 'red'
            }
        }
    };

yang saya beri huruf tebal akan mengubah tulisan di atas. Untuk contoh, ubah menjadi
judul : Pooling Program Grafik
bawah: orang

berikutnya kita lihat ke
var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
    ]);

penjelasan formatnya adalah
data pertama
 ['Year', 'Sales', 'Expenses'],
akan dibaca sebagai title (hover)

data 2 dan berikutnya akan jadi nilai.. perhatikan format pada data 2 dan seterusnya.

2004, 1000, 400
2004 = tahun akan muncul dibawah
1000 = nilai untuk sales (lihat atas)
400 = nilai untuk expense

disini kita akan ganti jadi seperti tampilan ini
http://jsfiddle.net/1eLqa3va/1/

silakan fahami ini dahulu karena konsep di graph berikutnya (dalam graph google akan memakai hal yg sama). berikutnya kita akan membuat versi tarik data dari DB..


Tidak ada komentar: