Senin, 22 Juli 2013

Menampilkan Grafik Pie Chart dengan Google Charts pada Web atau Blog

Menampilkan Grafik Pie Chart dengan Google Charts pada Web atau Blog caranya seperti yang pernah kita bahas pada artikel sebelumnya yaitu Menampilkan Grafik (Bar Chart) dengan Google Charts pada Web atau Blog. Seperti yang telah diterangkan sebelumnya, Google Charts memungkinkan kita membuat Charts dengan Javascript pada Halaman Web atau Blog, tentu saja dengan syarat Web atau Blog tersebut harus ada di Hosting atau komputer yang sedang online.

Kali ini kita coba gunakan Google Charts untuk membuat Grafik Roti (Pie Chart), kita buat pie-chart-google-charts.html dengan isi kode program berikut ini :


<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart2);
      function drawChart2() {
        var data2 = google.visualization.arrayToDataTable([
          ['Kegiatan', 'Waktu(Jam)'],
          ['Bekerja',     11],
          ['Makan',      2],
          ['Perjalanan',  2],
          ['Hiburan / TV', 2],
          ['Tidur',    7]
        ]);

        var options2 = {
          title: 'Kegiatan Sehari-Hari'
        };

        var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
        chart2.draw(data2, options2);
      }
    </script>
  </head>
  <body>
    <div id="chart_div2" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Hasilnya seperti ini :





Grafik Pie yang sangat bagus.

Project selengkapnya silakan didownload. Jika kesulitan,  caranya mendownloadnya seperti ini.

File HTML tersebut siap disimpan, kemudian klik dua kali dan dijalankan langsung pada Browser dengan syarat komputer dalam keadaan online ke Internet dan menggunakan Web Browser yang populer dan versi terbaru. Misalnya Chrome, Firefox atau Opera.

Semoga bermanfaat.

1 komentar: