אינטרוולים

  1. סקירה כללית
  2. מרווחי שורות
  3. מרווחי בר
  4. מרווחי קופסה
  5. מרווחי מקלות
  6. מרווחי זמן
  7. מרווחי זמן
  8. שילוב סגנונות הפוגות

סקירה כללית

בתרשימים של Google אפשר להציג מרווחי זמן סביב סדרה. ניתן להשתמש בהם כדי להציג רווח בר-סמך, ערכי מינימום וערך מקסימלי סביב ערך, דגימה לפי אחוזון או כל דבר אחר שדורש שוליים שונים מסביב לסדרה.

יש שישה סגנונות של מרווח: קו, עמודה, תיבה, מקל, נקודה ואזור. למטה יש כמה דוגמאות לכל אחת. בכל אחת מהדוגמאות נשתמש באותו מערך נתונים, המופיע כאן ללא מרווחי זמן:

התרשים שלמעלה פשוט: הוא מכיל שבע סדרות של נתונים, כולן בעלות חשיבות זהה. בהמשך, נצא מנקודת הנחה שהסדרה הראשונה היא הסדרה הראשית, ונפוצות בין שש המשתתפות.

מרווחי שורות

מרווחי שורות משמשים לפעמים כדי להציג את השונות של ניסויים מרובים. בתרשים הבא נתאר סדרה ומרווחים ראשיים.

 
<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>

בנתונים שלמעלה אפשר לראות שצירפנו שלושה מזהים שונים לסדרה המשנית: i0, i2 ו-i3. אפשר להשתמש בהם כדי לעצב את הסדרות האלה באופן שונה. בהמשך נתנו להן צבעים ועוביים שונים.

הערה: באופן כללי, לא מומלץ לעשות שימוש חוזר במזהים כמו שמתואר למעלה, ולהשתמש ב-i2 ארבע פעמים. זה אמנם עובד, אבל ייתכן שנשנה את ההתנהגות הזו בעתיד.

ההבדל היחיד הוא באפשרויות:

    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',
    };

מרווחי בר

מרווחי עמודות יוצרים עמודות שגיאה סביב הנתונים. העמודות הראשונות והאחרונות של המרווח משורטטות כעמודות מקבילות לציר של הדומיין, והעמודות הפנימיות משורטטות כ'טיקים' קצרים יותר. המערכת מוסיפה "מק"ה" כדי לצרף את הפסים הרחבים (אם לשני העמודות האלה יש אותו ערך, מתבצע עיבוד של הדיסק כנקודה, אלא אם האפשרות pointSize היא אפס).

ניתן להגדיר את הרוחב של הפסים האופקיים התואמים לעמודה הראשונה ולעמודה האחרונה, באמצעות intervals.barWidth והרוחב של הפסים האופקיים התואמים לעמודות הפנימיות הוא intervals.shortBarWidth. אם תשמיטו אותן, יוצג לכם תרשים כמו זה שלמעלה, עם האפשרויות הבאות:

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

מרווחי תיבה

מרווחי תיבה: עיבוד העמודות בטבלת הנתונים מתבצע כקבוצת מלבנים מקננים: העמודה הראשונה והאחרונה יוצרות את המלבן החיצוני, והעמודות הפנימיות מוצגות כמלבנים כהים יותר בתוך התיבה שלהן.

כך מגדירים מרווחים בתיבה:

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

כדי להבליט את התיבות, אפשר להשתמש באפשרויות intervals.lineWidth ו-intervals.barWidth:

האפשרויות הרלוונטיות:

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

מרווחי מקלות

מרווחים בין מקלות מציגים זוגות של עמודות כקבוצה של מקלות מקבילים לציר היעד. מקל באפס גובה מעובד כנקודה, שניתן להסתיר אותו על ידי הגדרת האפשרות pointSize לאפס.

אפשר ליצור רשימות כאלה באמצעות style של 'sticks':

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

מרווחי זמן

מרווחי נקודות מציגים נתוני מרווח כעיגולים קטנים:

אפשר לשלוט בגודל הנקודה באמצעות האפשרות intervals.pointSize. הנה 2:

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

כך זה נראה ב-8:

מרווחי זמן

מרווח באזור מציג נתוני מרווח כקבוצה של אזורים מוצללים מקושטים. קינון זוגות של עמודות דומה לזה של מרווחים, אלא שנדרש מספר זוגי של עמודות.

כדי להשיג זאת, צריך להגדיר את המאפיין style לערך 'area': 

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

שילוב סגנונות הפוגות

להתאמה אישית גבוהה יותר, תוכלו לשלב סגנונות של מרווחים בתוך תרשים אחד.

תרשים זה משלב בין מרווחים אזוריים למרווחי עמודות:

בתרשים שלמעלה, אנחנו מציינים style של 'bars' למרווחי זמן שמתויגים עם i0 ו-i1, ובסגנון 'area' ל-i2. אנחנו משתמשים ב-pointSize כדי להגביל את העמודות:

    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',
    };

לפניכם תרשים קו של מרווחי עמודות עם המרווחים של i2, המוצגים כמקלות:

    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',
    };

כך אפשר לראות תרשים קו של מרווח, שכולל תיבות עם שקיפות נמוכה כדי למקם ברקע מרווחי זמן נבחרים:

    // 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',
    };

אנחנו יכולים ליצור תרשים "מרווחי זמן ונקודות שחף" על ידי ציון סגנון בשקיפות נמוכה של 'points' למרווח אחד יחד עם 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',
    };

תרשים תיבות

לבסוף, על סמך התרשים שלמעלה "נקודות ופקקים", אנחנו יכולים להשתמש במרווחי תיבות ועמודות כדי ליצור תרשים בסיסי של תרשים תיבה.

אפשרויות
      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'
            }
          }
      };
גוף מלא של סקריפט
    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);
    }