इंटरवल

  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 विकल्प को शून्य पर सेट करके दबाया जा सकता है.

'sticks' के style का इस्तेमाल करके, ये बनाए जा सकते हैं:

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

पॉइंट इंटरवल

पॉइंट इंटरवल, अंतराल डेटा को छोटे सर्कल के रूप में दिखाते हैं:

पॉइंट के साइज़ को intervals.pointSize विकल्प से कंट्रोल किया जा सकता है. यहां, ये दो हैं:

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

इंटरवल स्टाइल को जोड़ना

ज़्यादा कस्टमाइज़ेशन के लिए, एक चार्ट में इंटरवल स्टाइल को शामिल किया जा सकता है.

यहां एक चार्ट दिया गया है, जिसमें एरिया और बार इंटरवल को शामिल किया जाता है:

ऊपर दिए गए चार्ट में, हमने i0 और i1 के साथ टैग किए गए इंटरवल के लिए 'bars' का style और i2 के लिए 'area' स्टाइल तय किया है. इसके बाद, हम 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',
    };

हम boxWidth के साथ एक इंटरवल के लिए, कम ओपैसिटी 'points' स्टाइल तय करके, "पॉइंट और व्हिस्कर" इंटरवल चार्ट बना सकते हैं:

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