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 class yang ingin digunakan, lalu Anda harus memanggil draw() di dalamnya.

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. Diagram lingkaran dan diagram lingkaran disertakan dalam paket corechart yang Anda muat di awal tutorial ini. Namun, jika Anda ingin treemap atau diagram geografis di halaman, Anda juga harus memuat paket 'treemap' atau 'geomap'.

Konstruktor diagram Google menggunakan satu parameter: referensi ke elemen DOM untuk menggambar visualisasi.

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

Menggambar diagram

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

Halaman Anda harus memiliki elemen HTML (biasanya <div>) untuk menyimpan diagram. Anda harus meneruskan referensi ke diagram ini ke elemen ini, jadi tetapkan ID yang dapat Anda gunakan untuk mengambil referensi menggunakan document.getElementById(). Semua yang ada di dalam elemen ini akan diganti dengan diagram saat digambar. Pertimbangkan apakah Anda harus mengukur ukuran 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 memanggil draw(), diagram Anda akan digambar pada halaman. Anda harus memanggil metode draw() setiap kali mengubah data atau opsi dan ingin memperbarui diagram.

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

Pemecahan masalah

Jika diagram tidak muncul di halaman, berikut beberapa pendekatan yang dapat membantu Anda menyelesaikan masalah:

  • 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 ExoPlayer. Di Chrome, Anda dapat menggunakan alat developer (Shift + Ctl + J).
  • Telusuri grup diskusi Google Visualization API. Jika Anda tidak dapat menemukan postingan yang menjawab pertanyaan Anda, posting pertanyaan Anda ke grup bersama dengan link ke halaman web yang menunjukkan masalah tersebut.

 

 

 

Info Selengkapnya