Interval

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

Ringkasan

Google Chart dapat menampilkan interval di sekitar deret. Metrik ini dapat digunakan untuk menggambarkan interval keyakinan, nilai minimum dan maksimum di sekitar nilai, sampling persentil, atau hal lainnya yang memerlukan margin bervariasi di sekitar deret.

Ada enam gaya interval: garis, batang, kotak, stik, titik, dan area. Di bawah ini, Anda akan melihat contohnya masing-masing. Dalam setiap contoh, kita akan menggunakan {i>dataset<i} yang sama, yang ditampilkan tanpa interval:

Diagram di atas sederhana: diagram ini memiliki tujuh rangkaian data, yang semuanya memiliki nilai penting yang sama. Selanjutnya, kita akan mengasumsikan bahwa deret pertama adalah rangkaian utama, dan enam deret lainnya dibandingkan melalui interval.

Interval Garis

Interval garis terkadang digunakan untuk menggambarkan varians dari beberapa eksperimen. Dalam diagram berikut, kami menggambarkan deret 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 seri tambahan: i0, i2, dan i3. Kita dapat menggunakannya untuk menata gaya seri tersebut secara berbeda; di bawah ini, kami memberinya warna dan ketebalan yang berbeda.

Catatan: Secara umum, menggunakan kembali ID seperti yang kita miliki tidaklah baik, karena i2 digunakan empat kali. Ini akan berfungsi, tetapi kami mungkin mengubah perilaku ini di masa mendatang.

Satu-satunya perbedaan adalah pada opsinya:

    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 pada interval digambar sebagai batang lebar yang sejajar dengan sumbu domain, dan kolom bagian dalam digambar sebagai "tick" yang lebih pendek. "stick" ditambahkan untuk menggabungkan batang lebar (jika kedua batang ini memiliki nilai yang sama, stick 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 bagian dalam dikontrol dengan intervals.shortBarWidth. Jika hal tersebut dihilangkan, 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 sekumpulan 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 menampungnya.

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 Tetap

Interval stik menampilkan pasangan kolom sebagai kumpulan stik yang sejajar dengan sumbu target. Stik dengan tinggi nol dirender sebagai titik, yang dapat disembunyikan dengan menyetel 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. Jadi, hasilnya adalah 2:

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

Berikut tampilannya pada angka 8:

Interval Area

Interval area merender data interval sebagai kumpulan area berarsir bertingkat. Penyusunan pasangan kolom mirip dengan interval kotak, hanya saja diperlukan jumlah kolom genap.

Hal ini dilakukan dengan menetapkan 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 besar lagi, Anda dapat menggabungkan gaya interval dalam satu diagram.

Berikut adalah diagram yang menggabungkan interval luas dan batang:

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

    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 diwakili 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 whiskers" 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 whiskers" di atas, kita dapat menggunakan interval kotak dan batang untuk membuat diagram box plot 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);
    }