Graph dengan options

Silakan baca artikel sebelumnya.. Pertama buatlah dahulu graph pie/lingkarannya.. kemudian kita lanjutkan menambahkan perintah tambahan. Perintah tambahan disini adalah memberi tulisan berbeda pada keterangan

mari balik pada format datanya yaitu:

data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);

kita ambil pada bagian

['Mushrooms', 3],

Disini kita bisa melihat bahwa data terdiri dari

1. nama data yang dipake sebagai label
2. nilai datanya
   

Kita bisa menambahkan hingga jadi seperti ini

data.addRows([
['Mushrooms', 3,'tiga'],
['Onions', 1,'satu'],
['Olives', 1,'satu'],
['Zucchini', 1,'satu'],
['Pepperoni', 2,'dua']
]);

terbilang itu yang akan muncul saat kursor berada di grafik. Hal pertama (kedua) yang harus dilakukan adalah membuat fungsi untuk mengeluarkan keterangan tersebut..

berikut adalah fungsinya (dari blognya)

function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            var topping = data.getValue(selectedItem.row, 1);
            alert('The user selected ' + topping);
          }
}

Dimana kita harus meletakkan ini? menyesuaikan dari contohnya.. didalam fungsi membuat cart.. jadi asumsikan ada fungsi

function chartDraw()
{
//disinilah kita meletakkan fungsi selectHandler
}

setelah menuliskan

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
/*membuat grafik yang diletakkan di div chard_div */

masukkan fungsi yang kita tulis di atas..
dan juga

google.visualization.events.addListener(chart, 'select', selectHandler);

chart.draw(data, options);

dengan script di atas, kita menambahkan fungsi untuk menjalankan tampilan berbeda.. tapi kenapa yang di tunjukkan posisi 1?

var topping = data.getValue(selectedItem.row, 1);

sebenarnya yang dibaca oleh script adalah posisi ke 2 yaitu terbilang.. Tapi perhatikan juyga ukuran window yang dipake

nb: secara langsung belum di coba.. namun secara teori sudah benar