Teknik Menggambar Diagram

Halaman ini mencantumkan berbagai cara yang dapat Anda lakukan untuk membuat instance dan menggambar diagram pada halaman. Setiap metode memiliki kelebihan dan kekurangan, yang tercantum di bawah ini.

Daftar Isi

  1. diagram.gambar()
  2. ChartWrapper
  3. DrawChart()
  4. Informasi Selengkapnya

chart.draw()

Ini adalah metode dasar yang tercakup dalam contoh Hello Chart! dalam dokumentasi ini. Berikut langkah-langkah dasarnya:

  1. Memuat loader library gstatic, Visualisasi Google, dan library diagram
  2. Menyiapkan data
  3. Mempersiapkan opsi diagram
  4. Buat instance class diagram, dengan meneruskan tuas ke elemen penampung halaman.
  5. Jika mau, Anda dapat mendaftar untuk menerima peristiwa diagram. Jika ingin memanggil metode pada diagram, Anda harus memproses peristiwa "siap".
  6. Panggil chart.draw(), yang meneruskan data dan opsi.

Kelebihan:

  • Anda memiliki kontrol penuh atas setiap langkah proses tersebut.
  • Anda dapat mendaftar untuk memproses semua peristiwa yang ditampilkan oleh diagram.

Kekurangan:

  • Verbose
  • Anda harus secara eksplisit memuat semua library diagram yang diperlukan.
  • Jika mengirim kueri, Anda harus mengimplementasikan callback secara manual, memeriksa keberhasilan, mengekstrak DataTable yang ditampilkan, dan meneruskannya ke diagram.

Contoh:

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

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

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

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

ChartWrapper

ChartWrapper adalah class praktis yang menangani pemuatan semua library diagram yang sesuai untuk Anda dan juga menyederhanakan pengiriman kueri ke Sumber Data Chart Chart.

Kelebihan:

  • Kode jauh lebih sedikit
  • Memuat semua library diagram yang diperlukan untuk Anda
  • Membuat kueri Sumber data jauh lebih mudah dengan membuat objek Query dan menangani callback untuk Anda
  • Teruskan ID elemen penampung, dan ID ini akan memanggil getElementByID untuk Anda.
  • Data dapat dikirimkan dalam berbagai format: sebagai array nilai, sebagai string literal JSON, atau sebagai handle DataTable

Kekurangan:

  • ChartWrapper saat ini hanya menyebarkan peristiwa pilihan, siap, dan error. Untuk mendapatkan peristiwa lain, Anda harus mendapatkan handle untuk diagram gabungan dan berlangganan peristiwa di sana. Lihat dokumentasi ChartWrapper untuk mengetahui contohnya.

Contoh:

Berikut adalah contoh diagram kolom dengan data yang dibuat secara lokal yang ditentukan sebagai array. Anda tidak dapat menentukan label diagram atau nilai tanggal/waktu menggunakan sintaksis array, tetapi Anda dapat membuat objek DataTable dengan nilai tersebut secara manual dan meneruskannya ke properti dataTable.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Berikut adalah contoh diagram garis yang mendapatkan datanya dengan membuat kueri Google Spreadsheet. Perhatikan bahwa kode tidak perlu menangani callback.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Dikombinasikan dengan pemuatan otomatis, hal ini dapat menghasilkan kode yang sangat ringkas:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Menggunakan Chart Editor dengan ChartWrapper

Anda dapat menggunakan dialog Chart Editor yang disertakan dalam Google Spreadsheet untuk mendesain diagram, lalu meminta string ChartWrapper serial yang mewakili diagram. Selanjutnya, Anda dapat menyalin dan menempelkan string ini, serta menggunakannya seperti yang dijelaskan di atas dalam ChartWrapper.

Anda dapat menyematkan editor diagram pada halaman Anda sendiri dan menampilkan metode bagi pengguna untuk terhubung ke sumber data lain dan menampilkan string ChartWrapper. Lihat dokumentasi referensi ChartEditor untuk informasi selengkapnya.

 

DrawChart()

DrawChart adalah metode statis global yang menggabungkan ChartWrapper.

Kelebihan:

  • Sama seperti ChartWrapper, tetapi sedikit lebih pendek untuk digunakan.

Kekurangan:

  • Tidak menampilkan handle ke wrapper, sehingga Anda tidak dapat menangani peristiwa apa pun.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Info Selengkapnya