אינטרוולים

  1. סקירה כללית
  2. מרווחי שורות
  3. מרווחי זמן בין עמודות
  4. מרווחי זמן בין תיבות
  5. מרווחי נעצים
  6. מרווחי נקודות
  7. מרווחי זמן בין אזורים
  8. שילוב סגנונות של אינטרוולים

סקירה כללית

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

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

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

מרווחי שורות

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

 
<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);
    }