Garis tren

  1. Ringkasan
  2. Garis tren linear
  3. Garis tren eksponensial
  4. Garis tren polinomial
  5. Mengubah warna
  6. Mengubah opasitas dan lebar garis
  7. Menampilkan poin
  8. Mengubah label
  9. Korelasi

Ringkasan

Garis tren adalah garis yang tumpang-tindih pada diagram yang menunjukkan arah data secara keseluruhan. Google Chart dapat otomatis membuat garis tren untuk Diagram Sebar, Diagram Batang, Diagram Kolom, dan Diagram Garis.

Google Chart mendukung tiga jenis garis tren, yaitu linear, polinomial, dan eksponensial.

Garis tren linear

Garis tren linear adalah garis lurus yang paling mendekati perkiraan data dalam diagram. (Tepatnya, ini adalah garis yang meminimalkan jumlah jarak kuadrat dari setiap titik.)

Pada diagram di bawah ini, Anda dapat melihat garis tren linear pada diagram pencar yang membandingkan usia maple gula dengan diameter batangnya. Anda dapat mengarahkan kursor ke garis tren untuk melihat persamaan yang dihitung oleh Google Chart: 4,885 kali diameter + 0,730.

Untuk menggambar garis tren pada diagram, gunakan opsi trendlines dan tentukan deret data mana yang akan digunakan: 

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Diameter', 'Age'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: 'none',
    trendlines: { 0: {} }    // Draw a trendline for data series 0.
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Garis tren linear adalah jenis garis tren yang paling umum. Namun, terkadang kurva paling baik digunakan untuk mendeskripsikan data, dan untuk itu, kita memerlukan jenis garis tren lainnya.

Garis tren eksponensial

Jika penjelasan data terbaik adalah dengan eksponensial dari bentuk eax+b, Anda dapat menggunakan atribut type untuk menentukan garis tren eksponensial, seperti yang ditunjukkan di bawah ini:

Catatan: Tidak seperti garis tren linear, ada beberapa cara berbeda untuk menghitung garis tren eksponensial. Saat ini kami hanya menyediakan satu metode, tetapi akan mendukung metode lainnya di masa mendatang, sehingga nama atau perilaku garis tren eksponensial saat ini mungkin akan berubah.

Untuk diagram ini, kita juga menggunakan visibleInLegend: true untuk menampilkan kurva eksponensial di legenda.

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Generation', 'Descendants'],
    [0, 1], [1, 33], [2, 269], [3, 2013]
 ]);

  var options = {
    title: 'Descendants by Generation',
    hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
    vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
    trendlines: {
      0: {
        type: 'exponential',
        visibleInLegend: true,
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

Mengubah warna

Secara default, garis tren diberi warna yang sama dengan deret data, tetapi lebih terang. Anda dapat menggantinya dengan atribut color. Di sini, kami memetakan berapa banyak digit π yang telah dihitung berdasarkan tahun selama periode yang bermanfaat secara komputasi, yang mewarnai garis tren eksponensial dengan warna hijau.

Berikut adalah spesifikasi garis tren:

    trendlines: {
      0: {
        type: 'exponential',
        color: 'green',
      }
    }

Garis tren polinomial

Untuk membuat garis tren polinomial, tentukan jenis polynomial dan degree. Gunakan dengan hati-hati, karena terkadang dapat memberikan hasil yang menyesatkan. Pada contoh di bawah ini, di mana set data kira-kira linear dipetakan dengan garis tren kubik (derajat 3):

Perhatikan bahwa penurunan setelah titik data terakhir hanya terlihat karena kami memperluas sumbu horizontal secara artifisial ke 15. Tanpa menetapkan hAxis.maxValue ke 15, akan terlihat seperti ini:

Data yang sama, polinomial yang sama, jendela yang berbeda pada data.

Opsi
  var options = {
    title: 'Age vs. Weight comparison',
    legend: 'none',
    crosshair: { trigger: "both", orientation: "both" },
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
      }
    }
  };
HTML Lengkap
<html>
 <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load("current", {packages:["corechart"]});
     google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
       var data = google.visualization.arrayToDataTable([
         ['Age', 'Weight'],
         [ 8,      12],
         [ 4,      5.5],
         [ 11,     14],
         [ 4,      5],
         [ 3,      3.5],
         [ 6.5,    7]
       ]);

       var options = {
         title: 'Age vs. Weight comparison',
         legend: 'none',
         crosshair: { trigger: 'both', orientation: 'both' },
         trendlines: {
           0: {
             type: 'polynomial',
             degree: 3,
             visibleInLegend: true,
           }
         }
       };

       var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
       chart.draw(data, options);
     }
   </script>
 </head>
 <body>
  <div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
 </body>
</html>

Mengubah opasitas dan lebar garis

Anda dapat mengubah transparansi garis tren dengan menetapkan opacity ke nilai antara 0,0 dan 1,0, serta lebar garis dengan menetapkan opsi lineWidth.

    trendlines: {
      0: {
        color: 'purple',
        lineWidth: 10,
        opacity: 0.2,
        type: 'exponential'
      }
    }

Opsi lineWidth sudah cukup untuk sebagian besar penggunaan, tetapi jika Anda menyukai tampilannya, ada opsi pointSize yang dapat digunakan untuk menyesuaikan ukuran titik yang dapat dipilih di dalam garis tren:

Sama seperti cahaya yang merupakan gelombang dan partikel, garis tren adalah garis dan sekumpulan titik. Yang dilihat pengguna bergantung pada cara mereka berinteraksi dengannya: biasanya garis, tetapi saat mereka mengarahkan kursor ke garis tren, titik tertentu akan disorot. Titik itu akan memiliki diameter sama dengan:

  • garis tren pointSize jika ditentukan, jika tidak...
  • pointSize global jika ditentukan, jika tidak...
  • 7

Namun, jika Anda menetapkan opsi pointSize global atau garis tren, semua titik yang dapat dipilih akan ditampilkan, terlepas dari lineWidth garis tren.

Opsi
  var options = {
    legend: 'none',
    hAxis: { ticks: [] },
    vAxis: { ticks: [] },
    pointShape: 'diamond',
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
        pointSize: 20, // Set the size of the trendline dots.
	opacity: 0.1
      }
    }
  };
HTML Lengkap
<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Y'],
          [0, 4],
          [1, 2],
          [2, 4],
          [3, 6],
          [4, 4]
        ]);

        var options = {
          legend: 'none',
          hAxis: { ticks: [] },
          vAxis: { ticks: [] },
          colors: ['#703583'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'polynomial',
              degree: 3,
              visibleInLegend: true,
              pointSize: 20, // Set the size of the trendline dots.
              opacity: 0.1
            }
          }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Menampilkan poin

Garis tren disusun dengan memberi label pada sekelompok titik pada diagram. Opsi pointsVisible garis tren menentukan apakah titik untuk garis tren tertentu terlihat. Opsi default untuk semua garis tren adalah true, tetapi jika Anda ingin menonaktifkan visibilitas titik untuk garis tren pertama, tetapkan trendlines.0.pointsVisible: false.

Diagram di bawah menunjukkan cara mengontrol visibilitas poin berdasarkan garis tren.

Opsi
        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };
HTML Lengkap
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Y', 'Z'],
          [0, 4, 5],
          [1, 2, 6],
          [2, 4, 8],
          [3, 6, 10],
          [4, 4, 11],
          [5, 8, 13],
          [6, 12, 15],
          [7, 15, 19],
          [8, 25, 21],
          [9, 34, 23],
          [10, 50, 27]
        ]);

        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Mengubah label

Secara default, jika Anda memilih visibleInLegend, label akan mengungkapkan persamaan garis tren. Anda dapat menggunakan labelInLegend untuk menentukan label yang berbeda. Di sini, kita menampilkan garis tren untuk masing-masing seri, dengan menetapkan label dalam legenda ke "Baris bug" (untuk seri 0) dan "Garis pengujian" (seri 1).

    trendlines: {
      0: {
        labelInLegend: 'Bug line',
        visibleInLegend: true,
      },
      1: {
        labelInLegend: 'Test line',
        visibleInLegend: true,
      }
    }

Korelasi

Koefisien determinasi, yang disebut R2 dalam statistik, mengidentifikasi seberapa dekat kecocokan garis tren dengan data. Korelasi sempurna adalah 1,0, dan antiorrelasi sempurna adalah 0,0.

Anda dapat menggambarkan R2 dalam legenda diagram dengan menetapkan opsi showR2 ke true.

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          hAxis: {minValue: 0, maxValue: 15},
          vAxis: {minValue: 0, maxValue: 15},
          chartArea: {width:'50%'},
          trendlines: {
            0: {
              type: 'linear',
              showR2: true,
              visibleInLegend: true
            }
          }
        };

        var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
        chartLinear.draw(data, options);

        options.trendlines[0].type = 'exponential';
        options.colors = ['#6F9654'];

        var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
        chartExponential.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chartLinear" style="height: 350px; width: 800px"></div>
    <div id="chartExponential" style="height: 350px; width: 800px"></div>
  </body>
</html>