Menggambar Diagram 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

Langkah terakhir adalah menggambar diagram. Pertama, Anda harus membuat instance class diagram yang ingin digunakan, lalu Anda harus memanggil draw() di instance tersebut.

Membuat instance diagram

Setiap jenis diagram didasarkan pada class yang berbeda, yang tercantum dalam dokumentasi diagram. Misalnya, diagram lingkaran didasarkan pada class google.visualization.PieChart, diagram batang didasarkan pada class google.visualization.BarChart, dan seterusnya. Baik diagram lingkaran maupun diagram batang disertakan dalam paket corechart yang Anda muat di awal tutorial ini. Namun, jika Anda menginginkan peta hierarki atau diagram geografis di halaman Anda, Anda harus memuat paket 'treemap' atau 'geomap' juga.

Konstruktor diagram Google mengambil satu parameter: referensi ke elemen DOM yang akan digunakan untuk menggambar visualisasi.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

Menggambar diagram

Setelah Anda menyiapkan data dan opsi, Anda siap untuk menggambar diagram.

Halaman Anda harus memiliki elemen HTML (biasanya <div>) untuk menyimpan diagram. Anda harus meneruskan diagram Anda referensi ke elemen ini, jadi tetapkan ID yang bisa Anda gunakan untuk mengambil referensi menggunakan document.getElementById(). Apa pun di dalam elemen ini akan diganti oleh diagram saat digambar. Pertimbangkan apakah Anda harus mengukur elemen <div> ini secara eksplisit, tetapi untuk saat ini, tentukan ukuran diagram di HTML <div>.

Setiap diagram mendukung metode draw() yang menggunakan dua nilai: objek DataTable (atau DataView) yang menyimpan data Anda, dan objek opsi diagram opsional. Objek opsi tidak diperlukan, dan Anda dapat mengabaikannya atau meneruskan null untuk menggunakan opsi default diagram.

Setelah Anda memanggil draw(), diagram Anda akan digambar di halaman. Anda harus memanggil metode draw() setiap kali mengubah data atau opsi dan ingin memperbarui diagram.

Metode draw() bersifat asinkron: yaitu, metode ini langsung ditampilkan, tetapi instance yang ditampilkannya mungkin tidak langsung tersedia. Dalam banyak kasus, hal ini tidak masalah; diagram pada akhirnya akan digambar. Namun, jika ingin menetapkan atau mengambil nilai pada diagram setelah memanggil draw(), Anda harus menunggunya menampilkan peristiwa ready, yang menunjukkan bahwa diagram telah diisi. Kita akan membahas mendengarkan peristiwa di halaman berikutnya.

Pemecahan masalah

Jika diagram Anda tidak terlihat pada halaman, berikut beberapa pendekatan yang mungkin dapat membantu memecahkan masalah Anda:

  • Cari kesalahan ketik. Ingatlah, JavaScript adalah bahasa yang membedakan huruf besar dan kecil.
    • Menggunakan debugger JavaScript. Di Firefox, Anda dapat menggunakan konsol JavaScript, Venkman Debugger, atau add-on Firebug. Di Chrome, Anda dapat menggunakan alat developer (Shift + Ctl + J).
  • Telusuri grup diskusi Google Visualization API. Jika tidak dapat menemukan postingan yang menjawab pertanyaan Anda, posting pertanyaan ke grup bersama dengan link ke halaman web yang menunjukkan masalah tersebut.

 

 

 

Informasi Selengkapnya