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

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 ke sana.)

Pada diagram di bawah, Anda dapat melihat garis tren linear pada diagram sebar yang membandingkan usia gula maple 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 seri data 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 linier adalah jenis garis tren yang paling umum. Namun, terkadang kurva adalah cara terbaik untuk mendeskripsikan data, dan untuk itu, kita memerlukan jenis garis tren lain.

Garis tren eksponensial

Jika penjelasan data terbaik adalah dengan eksponensial dalam 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 untuk menghitung garis tren eksponensial. Saat ini, kami hanya menyediakan satu metode, tetapi akan mendukung lebih banyak metode di masa mendatang, sehingga mungkin nama atau perilaku garis tren eksponensial saat ini akan berubah.

Untuk diagram ini, kami juga menggunakan visibleInLegend: true untuk menampilkan kurva eksponensial dalam 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 rangkaian data, tetapi lebih terang. Anda dapat menggantinya dengan atribut color. Di sini, kami membuat diagram jumlah digit yang telah dihitung menurut tahun selama periode komputasi yang bermanfaat, yang mewarnai garis tren eksponensial hijau.

Berikut 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 menyebabkan hasil yang menyesatkan. Pada contoh di bawah, dengan set data kurang lebih linear dipetakan dengan garis tren kubik (derajat 3):

Perhatikan bahwa penurunan setelah titik data terakhir hanya terlihat karena kita memalsukan sumbu horizontal menjadi 15. Tanpa menetapkan hAxis.maxValue ke 15, tampilannya 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 akan cukup untuk sebagian besar penggunaan, tetapi jika Anda menyukai tampilan, 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 sekaligus sekumpulan titik. Yang dilihat pengguna bergantung pada cara mereka berinteraksi dengannya: biasanya garis, tetapi saat mereka mengarahkan kursor ke atas garis tren, titik tertentu akan ditandai. Titik tersebut akan memiliki diameter yang sama dengan:

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

Namun, jika Anda menetapkan opsi pointSize global atau trendline, semua titik yang dapat dipilih akan ditampilkan, terlepas dari lineWidth 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 tanda 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 Anda, tetapkan trendlines.0.pointsVisible: false.

Diagram di bawah ini menunjukkan kontrol visibilitas titik per 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 setiap dua rangkaian, dengan menetapkan label di legenal ke "Bug line" (untuk seri 0) dan "Test line" (seri 1).

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

Korelasi

Koefisien penetapan, yang disebut R2 dalam statistik, mengidentifikasi seberapa dekat garis tren dengan data. Korelasi yang sempurna adalah 1,0, dan antikorelasi yang 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>