Interval

  1. Ringkasan
  2. Interval Garis
  3. Interval Batang
  4. Interval Kotak
  5. Interval Tongkat
  6. Interval Titik
  7. Interval Area
  8. Menggabungkan Gaya Interval

Ringkasan

Google Chart dapat menampilkan interval di sekitar seri. Nilai ini dapat digunakan untuk menggambarkan interval keyakinan, nilai minimum dan maksimum seputar nilai, pengambilan sampel persentil, atau hal lain yang memerlukan margin yang bervariasi di sekitar seri.

Ada enam gaya interval: garis, batang, kotak, batang, titik, dan area. Di bawah ini, Anda akan melihat contoh masing-masing. Dalam setiap contoh, kita akan menggunakan set data yang sama, di sini ditampilkan tanpa interval:

Diagram di atas sederhana: diagram ini memiliki tujuh rangkaian data yang semuanya sama pentingnya. Berikutnya, kita akan mengasumsikan bahwa seri pertama adalah seri utama, dan enam lainnya dibandingkan dengan interval.

Interval Garis

Interval garis terkadang digunakan untuk menggambarkan varian dari beberapa eksperimen. Dalam diagram berikut, kami menggambarkan rangkaian utama dan interval di sekitarnya.

 
<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 = new google.visualization.DataTable();
        data.addColumn('number', 'x');
        data.addColumn('number', 'values');
        data.addColumn({id:'i0', type:'number', role:'interval'});
        data.addColumn({id:'i1', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
  
        data.addRows([
            [1, 100, 90, 110, 85, 96, 104, 120],
            [2, 120, 95, 130, 90, 113, 124, 140],
            [3, 130, 105, 140, 100, 117, 133, 139],
            [4, 90, 85, 95, 85, 88, 92, 95],
            [5, 70, 74, 63, 67, 69, 70, 72],
            [6, 30, 39, 22, 21, 28, 34, 40],
            [7, 80, 77, 83, 70, 77, 85, 90],
            [8, 100, 90, 110, 85, 95, 102, 110]]);
  
        // The intervals data as narrow lines (useful for showing raw source data)
        var options_lines = {
            title: 'Line intervals, default',
            curveType: 'function',
            lineWidth: 4,
            intervals: { 'style':'line' },
            legend: 'none'
        };
  
        var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
        chart_lines.draw(data, options_lines);
      }
    </script>
  </head>
  <body>
    <div id="chart_lines" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Pada data di atas, Anda dapat melihat bahwa kami melampirkan tiga ID yang berbeda ke rangkaian tambahan: i0, i2, dan i3. Kita dapat menggunakannya untuk menata gaya seri tersebut secara berbeda; di bawah ini, kita memberi warna dan ketebalan yang berbeda.

Catatan: Secara umum, sebaiknya gunakan kembali ID seperti yang telah kami lakukan di atas, dengan i2 yang digunakan empat kali. Cara ini bisa dilakukan, tetapi kami dapat mengubah perilaku ini di masa mendatang.

Satu-satunya perbedaan adalah pada opsi:

    var options_lines = {
        title: 'Line intervals, tailored',
        lineWidth: 4,
        curveType:'function',
        interval: {
            'i0': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
            'i1': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
            'i2': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
        },
        legend: 'none',
    };

Interval batang

Interval batang membuat batang error di sekitar data Anda. Kolom pertama dan terakhir dari interval digambar sebagai batang lebar yang sejajar dengan sumbu domain, dan kolom dalam digambar sebagai "centang" yang lebih pendek. "Stik" ditambahkan untuk menggabungkan batang lebar (jika kedua batang ini memiliki nilai yang sama, maka stik akan dirender sebagai titik, kecuali jika opsi pointSize adalah nol).

Lebar batang horizontal yang sesuai dengan kolom pertama dan terakhir dikontrol dengan intervals.barWidth, dan lebar batang horizontal yang sesuai dengan kolom dalam dikontrol dengan intervals.shortBarWidth. Jika tidak ada, Anda akan mendapatkan diagram seperti di atas dengan opsi di bawah ini:

    var options_bars = {
        title: 'Bars, default',
        curveType: 'function',
        series: [{'color': '#D9544C'}],
        intervals: { style: 'bars' },
        legend: 'none',
    };

Interval Kotak

Interval kotak merender kolom dalam tabel data Anda sebagai kumpulan persegi panjang bertingkat: kolom pertama dan terakhir membentuk persegi panjang terluar, dan kolom dalam dirender sebagai persegi panjang yang lebih gelap di dalam kotak yang memuatnya.

Berikut cara menentukan interval kotak:

    var options = {
        series: [{'color': '#1A8763'}],
        intervals: { style: 'boxes' },
        legend: 'none',
    };

Anda dapat membuat kotak lebih terlihat dengan opsi intervals.lineWidth dan intervals.barWidth:

Opsi yang relevan:

    var options = {
        title:'Boxes, thick',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
        legend: 'none',
    };

Interval Tongkat

Interval batang menampilkan pasangan kolom sebagai serangkaian batang yang sejajar dengan sumbu target. Tongkat dengan tinggi nol dirender sebagai titik, yang dapat disembunyikan dengan menetapkan opsi pointSize ke nol.

Anda dapat membuatnya dengan style dari 'sticks':

    var options_sticks = {
        title:'Sticks, default',
        curveType:'function',
        series: [{'color': '#E7711B'}],
        intervals: { style: 'sticks' },
        legend: 'none',
    };

Interval Titik

Interval titik menampilkan data interval sebagai lingkaran kecil:

Ukuran titik dapat dikontrol dengan opsi intervals.pointSize. Berikut adalah 2 hal:

    var options_points = {
        title:'Points, default',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'style':'points', pointSize: 2 },
        legend: 'none',
    };

Berikut adalah tampilannya di 8:

Interval Area

Interval area merender data interval sebagai kumpulan area berarsir bertingkat. Bertingkat pasangan kolom mirip dengan interval kotak, kecuali bahwa jumlah kolom genap diperlukan.

Hal ini dilakukan dengan menyetel style ke 'area': 

    var options = {
        title:'Area, default',
        curveType:'function',
        series: [{'color': '#F1CA3A'}],
        intervals: { 'style':'area' },
        legend: 'none',
    };

Menggabungkan Gaya Interval

Untuk penyesuaian yang lebih baik, Anda dapat menggabungkan gaya interval di dalam satu diagram.

Berikut adalah diagram yang menggabungkan interval area dan batang:

Pada diagram di atas, kita menentukan style dari 'bars' untuk interval yang diberi tag dengan i0 dan i1, serta gaya 'area' untuk i2. Kemudian, kita menggunakan pointSize untuk membatasi panel:

    var options = {
        title:'Bar/area interval chart',
        curveType:'function',
        intervals: { 'color':'series-color' },
        interval: {
            'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }},
        legend: 'none',
    };

Berikut adalah diagram garis interval batang dengan interval i2 yang direpresentasikan sebagai stik:

    var options = {
        title:'Sticks, horizontal',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#E7711B'}],
        intervals: { 'lineWidth': 4, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'sticks', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 1 }
        },
        legend: 'none',
    };

Berikut adalah diagram garis interval yang menggunakan kotak opasitas rendah untuk menempatkan interval yang dipilih di latar belakang:

    // Focus is the error bars, but boxes are visible in the background.
    var options_boxes_background = {
        title:'Background boxes',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 0, 'fillOpacity': 0.2 }
        },
        legend: 'none',
    };

Kita dapat membuat diagram interval "titik dan kumis" dengan menentukan gaya 'points' opasitas rendah untuk satu interval bersama dengan boxWidth:

    var options = {
        title:'Points and whiskers',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'points', 'color':'grey', 'pointSize': 10,
            'lineWidth': 0, 'fillOpacity': 0.3 }
        },
        legend: 'none',
    };

Plot Kotak

Terakhir, berdasarkan diagram "titik dan kumis" di atas, kita dapat menggunakan interval kotak dan batang untuk membuat diagram plot kotak dasar.

Opsi
      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };
Isi Skrip Lengkap
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawBoxPlot);

    function drawBoxPlot() {

      var array = [
        ['a', 100, 90, 110, 85, 96, 104, 120],
        ['b', 120, 95, 130, 90, 113, 124, 140],
        ['c', 130, 105, 140, 100, 117, 133, 139],
        ['d', 90, 85, 95, 85, 88, 92, 95],
        ['e', 70, 74, 63, 67, 69, 70, 72],
        ['f', 30, 39, 22, 21, 28, 34, 40],
        ['g', 80, 77, 83, 70, 77, 85, 90],
        ['h', 100, 90, 110, 85, 95, 102, 110]
      ];

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'x');
      data.addColumn('number', 'series0');
      data.addColumn('number', 'series1');
      data.addColumn('number', 'series2');
      data.addColumn('number', 'series3');
      data.addColumn('number', 'series4');
      data.addColumn('number', 'series5');
      data.addColumn('number', 'series6');

      data.addColumn({id:'max', type:'number', role:'interval'});
      data.addColumn({id:'min', type:'number', role:'interval'});
      data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
      data.addColumn({id:'median', type:'number', role:'interval'});
      data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});

      data.addRows(getBoxPlotValues(array));

      /**
       * Takes an array of input data and returns an
       * array of the input data with the box plot
       * interval data appended to each row.
       */
      function getBoxPlotValues(array) {

        for (var i = 0; i < array.length; i++) {

          var arr = array[i].slice(1).sort(function (a, b) {
            return a - b;
          });

          var max = arr[arr.length - 1];
          var min = arr[0];
          var median = getMedian(arr);

          // First Quartile is the median from lowest to overall median.
          var firstQuartile = getMedian(arr.slice(0, 4));

          // Third Quartile is the median from the overall median to the highest.
          var thirdQuartile = getMedian(arr.slice(3));

          array[i][8] = max;
          array[i][9] = min
          array[i][10] = firstQuartile;
          array[i][11] = median;
          array[i][12] = thirdQuartile;
        }
        return array;
      }

      /*
       * Takes an array and returns
       * the median value.
       */
      function getMedian(array) {
        var length = array.length;

        /* If the array is an even length the
         * median is the average of the two
         * middle-most values. Otherwise the
         * median is the middle-most value.
         */
        if (length % 2 === 0) {
          var midUpper = length / 2;
          var midLower = midUpper - 1;

          return (array[midUpper] + array[midLower]) / 2;
        } else {
          return array[Math.floor(length / 2)];
        }
      }

      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };

      var chart = new google.visualization.LineChart(document.getElementById('box_plot'));

      chart.draw(data, options);
    }