गांट चार्ट

खास जानकारी

गांट चार्ट एक तरह का चार्ट है, जिसमें प्रोजेक्ट के कॉम्पोनेंट टास्क में ब्रेकडाउन दिखाया जाता है. Google Gantt चार्ट किसी प्रोजेक्ट में काम शुरू होने, खत्म होने और कुल समय के बारे में बताते हैं. साथ ही, उन सभी डिपेंडेंसी को भी दिखाते हैं जो किसी टास्क में हो सकती हैं. Google गैंट चार्ट SVG का इस्तेमाल करके ब्राउज़र में रेंडर किए जाते हैं. सभी Google चार्ट की तरह, Gantt चार्ट भी तब टूलटिप दिखाते हैं, जब उपयोगकर्ता डेटा पर माउस घुमाता है.

ध्यान दें: गैंट चार्ट Internet Explorer के पुराने वर्शन में काम नहीं करेंगे. (IE8 और उससे पहले के वर्शन, SVG पर काम नहीं करते हैं. इनके लिए Gantt चार्ट ज़रूरी हैं.)

एक आसान उदाहरण

 
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

कोई डिपेंडेंसी नहीं है

कोई ऐसा Gantt चार्ट बनाने के लिए जिसमें कोई डिपेंडेंसी नहीं है, पक्का करें कि आपकी DataTable में हर लाइन की आखिरी वैल्यू null पर सेट हो. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

ग्रुपिंग रिसॉर्स

संसाधनों का इस्तेमाल करके, मिलते-जुलते टास्क को एक साथ रखा जा सकता है. अपने डेटा में (Task ID और Task Name कॉलम के बाद) string टाइप का कॉलम जोड़ें. साथ ही, पक्का करें कि किसी भी टास्क में, एक ही रिसॉर्स आईडी के साथ ग्रुप किया गया हो. संसाधनों को रंग के हिसाब से ग्रुप किया जाएगा. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

शुरुआत/खत्म/अवधि की गिनती करना

गांट चार्ट में, टास्क की अवधि के तीन मान स्वीकार किए जाते हैं: शुरू होने की तारीख, खत्म होने की तारीख, और कुल समय (मिलीसेकंड में). उदाहरण के लिए, अगर शुरू होने की कोई तारीख नहीं दी गई है, तो चार्ट उसके खत्म होने की तारीख और उसके खत्म होने की अवधि के हिसाब से तारीख की जानकारी दे सकता है. खत्म होने की तारीख का हिसाब लगाने के लिए भी यही बात लागू होती है. अगर शुरू और खत्म होने की तारीख दी गई है, तो दोनों के बीच के समय की गणना की जा सकती है.

नीचे दी गई टेबल में बताया गया है कि गैंट अलग-अलग स्थितियों में, शुरू, खत्म होने, और कुल समय को कैसे मैनेज करता है.

चालू करें समाप्त कुल समय नतीजा
प्रज़ेंट करें प्रज़ेंट करें प्रज़ेंट करें देख लें कि शुरू और खत्म होने का समय, एक जैसा हो. अलग होने पर गड़बड़ी होती है.
प्रज़ेंट करें प्रज़ेंट करें शून्य शुरू और खत्म होने के समय को मिलाकर हिसाब लगाता है.
प्रज़ेंट करें शून्य प्रज़ेंट करें कंप्यूट खत्म होने का समय पता करता है.
प्रज़ेंट करें शून्य शून्य अवधि या खत्म होने के समय का हिसाब नहीं लगा पाने की वजह से गड़बड़ी होती है.
शून्य प्रज़ेंट करें प्रज़ेंट करें कंप्यूट शुरुआत का समय.
शून्य शून्य प्रज़ेंट करें डिपेंडेंसी के आधार पर, शुरू होने के समय का पता लगाता है. defaultStartDate के साथ मिलाकर, चार्ट को सिर्फ़ अवधि का इस्तेमाल करके ड्रॉ करने की सुविधा मिलती है.
शून्य प्रज़ेंट करें शून्य प्रारंभ समय या अवधि की गणना करने में असमर्थ के रूप में गड़बड़ी देता है.
शून्य शून्य शून्य प्रारंभ समय, समाप्ति समय या अवधि की गणना करने में असमर्थ के रूप में गड़बड़ी देता है.

ऊपर बताए गए तरीके को ध्यान में रखते हुए, एक चार्ट बनाया जा सकता है. इसमें, हर काम की अवधि के हिसाब से ऑफ़िस जाने के लिए एक सामान्य रास्ता तय किया जाता है. 

<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load("current", { packages: ["gantt"] });
      google.charts.setOnLoadCallback(drawChart);

      function toMilliseconds(minutes) {
        return minutes * 60 * 1000;
      }

      function drawChart() {
        var otherData = new google.visualization.DataTable();
        otherData.addColumn("string", "Task ID");
        otherData.addColumn("string", "Task Name");
        otherData.addColumn("string", "Resource");
        otherData.addColumn("date", "Start");
        otherData.addColumn("date", "End");
        otherData.addColumn("number", "Duration");
        otherData.addColumn("number", "Percent Complete");
        otherData.addColumn("string", "Dependencies");

        otherData.addRows([
          [
            "toTrain",
            "Walk to train stop",
            "walk",
            null,
            null,
            toMilliseconds(5),
            100,
            null,
          ],
          [
            "music",
            "Listen to music",
            "music",
            null,
            null,
            toMilliseconds(70),
            100,
            null,
          ],
          [
            "wait",
            "Wait for train",
            "wait",
            null,
            null,
            toMilliseconds(10),
            100,
            "toTrain",
          ],
          [
            "train",
            "Train ride",
            "train",
            null,
            null,
            toMilliseconds(45),
            75,
            "wait",
          ],
          [
            "toWork",
            "Walk to work",
            "walk",
            null,
            null,
            toMilliseconds(10),
            0,
            "train",
          ],
          [
            "work",
            "Sit down at desk",
            null,
            null,
            null,
            toMilliseconds(2),
            0,
            "toWork",
          ],
        ]);

        var options = {
          height: 275,
          gantt: {
            defaultStartDate: new Date(2015, 3, 28),
          },
        };

        var chart = new google.visualization.Gantt(
          document.getElementById("chart_div")
        );

        chart.draw(otherData, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

क्रिटिकल पाथ

गैंट चार्ट का ज़रूरी पाथ, ऐसा पाथ या पाथ होता है जो सीधे खत्म होने की तारीख पर असर डालता है. Google गैंट चार्ट के अहम पाथ डिफ़ॉल्ट रूप से लाल रंग के होते हैं. साथ ही, criticalPathStyle के विकल्पों का इस्तेमाल करके, इन्हें अपनी पसंद के मुताबिक बनाया जा सकता है. क्रिटिकल पाथ को बंद करने के लिए, criticalPathEnabled को false पर सेट करें. 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

स्टाइलस को स्टाइल करना

gantt.arrow विकल्पों के साथ, टास्क के बीच डिपेंडेंसी ऐरो को स्टाइल किया जा सकता है: 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };

ट्रैक की स्टाइलिंग

ग्रिड स्टाइल को innerGridHorizLine, innerGridTrack, और innerGridDarkTrack को मिलाकर हैंडल किया जाता है. सिर्फ़ innerGridTrack को सेट करके, चार्ट innerGridDarkTrack के लिए गहरे रंग का हिसाब लगाएगा. हालांकि, सिर्फ़ innerGridDarkTrack को सेट करने पर, innerGridTrack अपने डिफ़ॉल्ट रंग का इस्तेमाल करेगा और हल्के रंग का हिसाब नहीं लगाएगा. 

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

लोड हो रहा है

google.charts.load पैकेज का नाम "gantt" है. 

  google.charts.load("current", {packages: ["gantt"]});

विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.Gantt है.

  var chart = new google.visualization.Gantt(container);

डेटा फ़ॉर्मैट

पंक्तियां: टेबल की हर पंक्ति किसी टास्क को दिखाती है.

कॉलम:

  कॉलम 0 स्तंभ 1 स्तंभ 2 तीसरा कॉलम चौथा कॉलम पांचवां कॉलम छठा कॉलम सातवां कॉलम
मकसद: टास्क आईडी टास्क का नाम संसाधन आईडी (ज़रूरी नहीं) चालू करें अंत कुल समय (मिलीसेकंड में) प्रतिशत पूर्ण डिपेंडेंसी
डेटा टाइप: स्ट्रिंग स्ट्रिंग स्ट्रिंग date date संख्या संख्या स्ट्रिंग
भूमिका: डोमेन डेटा डेटा डेटा डेटा डेटा डेटा डेटा

 

कॉन्फ़िगरेशन के विकल्प

नाम टाइप डिफ़ॉल्ट जानकारी
बैकग्राउंड का रंग भरें स्ट्रिंग 'सफ़ेद' चार्ट, एचटीएमएल कलर स्ट्रिंग के तौर पर रंग भरता है.
Gantt.arrow ऑब्जेक्ट शून्य गैंट चार्ट के लिए, gantt.arrow टास्क को जोड़ने वाले ऐरो की अलग-अलग प्रॉपर्टी को कंट्रोल करता है.
gantt.arrow.angle संख्या 45 तीर के सिर का कोण.
gantt.arrow.color स्ट्रिंग '#000' ऐरो का रंग.
gantt.arrow.length संख्या 8 ऐरो के सिर की लंबाई.
gantt.arrow. {1} संख्या 15 दो टास्क के बीच ऐरो का कर्व तय करने का दायरा.
gantt.arrow.spaceafter संख्या 4 ऐरो के सिर और टास्क पर माउस ले जाने के बीच की खाली सफ़ेद जगह.
gantt.arrow.width संख्या 1.4 ऐरो की चौड़ाई.
gantt.barCornerScope संख्या 2 किसी बार के कोनों की वक्र को परिभाषित करने का दायरा.
gantt.barHeight संख्या शून्य टास्क के लिए बार की ऊंचाई.
gantt.criticalPathEnabled बूलियन true अगर true अहम पाथ पर किसी भी ऐरो का स्टाइल दिखाता है, तो वह अलग स्टाइल में होगा.
gantt.criticalPathStyle ऑब्जेक्ट शून्य एक ऑब्जेक्ट जिसमें किसी भी अहम पाथ ऐरो के लिए स्टाइल शामिल है.
gantt.criticalPathStyle.स्ट्रोक स्ट्रिंग शून्य किसी भी अहम पाथ ऐरो का रंग.
gantt.criticalPathStyle.×Width संख्या 1.4 किसी भी अहम पाथ ऐरो की मोटाई.
gantt.defaultStartDate तारीख/नंबर शून्य अगर DataDate की वैल्यू से शुरू होने की तारीख की गिनती नहीं की जा सकती, तो शुरू होने की तारीख को इस पर सेट किया जाएगा. इससे date मान (new Date(YYYY, M, D)) या संख्या स्वीकार की जाती है. यह इस्तेमाल करने के लिए मिलीसेकंड की संख्या होती है.
gantt.innerGridHorizLine ऑब्जेक्ट शून्य अंदरूनी हॉरिज़ॉन्टल ग्रिड लाइनों के स्टाइल के बारे में बताता है.
gantt.innerGridHorizLine.स्ट्रोक स्ट्रिंग शून्य इनर हॉरिज़ॉन्टल ग्रिड लाइनों का रंग.
gantt.innerGridHorizLine.स्ट्रोकWidth संख्या 1 इनर हॉरिज़ॉन्टल ग्रिड लाइनों की चौड़ाई.
gantt.innerGridTrack.fill स्ट्रिंग शून्य इनर ग्रिड ट्रैक का फ़िल कलर. अगर कोई innerGridDarkTrack.fill तय नहीं है, तो यह हर ग्रिड ट्रैक पर लागू होगा.
gantt.innerGridDarkTrack.fill स्ट्रिंग शून्य वैकल्पिक, गहरे रंग की आंतरिक ग्रिड का रंग.
gantt.labelMaxWidth संख्या 300 हर टास्क लेबल के लिए, ज़्यादा से ज़्यादा जगह.
gantt.labelStyle ऑब्जेक्ट शून्य

ऐसा ऑब्जेक्ट जिसमें टास्क लेबल के स्टाइल होते हैं.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled बूलियन true टास्क के लिए, पूरा हुआ प्रतिशत के आधार पर टास्क बार को भरता है.
gantt.percentStyle.fill स्ट्रिंग शून्य किसी टास्क बार के पूरे किए गए प्रतिशत का रंग.
gantt.शैडोचालू किया गया बूलियन true अगर true पर सेट किया जाता है, तो हर टास्क बार के नीचे उस ऑब्जेक्ट की परछाई को दिखाता है जिसमें डिपेंडेंसी होती है.
gantt.शैडोकलर स्ट्रिंग '#000' किसी भी टास्क बार में, किसी डिपेंडेंसी के लिए शैडो का रंग बताता है.
gantt.शैडोoffset संख्या 1 किसी भी टास्क बार में, डिपेंडेंसी के लिए शैडो का ऑफ़सेट बताता है.
gantt.sortTasks बूलियन true इस नीति से पता चलता है कि टास्क सही तरीके से क्रम में लगाए जाने चाहिए. अगर सही है, तो उसी क्रम में टास्क का इस्तेमाल करना चाहिए जैसा डेटा टेबल में किया गया है.
gantt.trackHeight संख्या शून्य ट्रैक की ऊंचाई.
width संख्या इसमें शामिल एलिमेंट की चौड़ाई चार्ट की चौड़ाई, पिक्सल में.
ऊंचाई संख्या इसमें शामिल एलिमेंट की ऊंचाई चार्ट की ऊंचाई, पिक्सल में.

तरीके

तरीका जानकारी
draw(data, options)

चार्ट ड्रॉ करता है. चार्ट में, readyइवेंट के चालू होने के बाद ही दूसरे तरीके से कॉल किए जा सकते हैं. Extended description.

सामान लौटाने का टाइप: कोई नहीं
getSelection()

चुनी गई चार्ट इकाइयों की श्रेणी दिखाता है. बार, लेजेंड एंट्री और कैटगरी, चुनी जा सकती हैं. इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई को चुना जा सकता है. Extended description .

लौटाए गए आइटम का टाइप: चुने गए एलिमेंट की कैटगरी
setSelection()

चार्ट की दी गई इकाइयों को चुनें. पहले चुने गए को रद्द करता है. बार, लेजेंड एंट्री और कैटगरी, चुनी जा सकती हैं. इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई को चुना जा सकता है. Extended description .

सामान लौटाने का टाइप: कोई नहीं
clearChart()

चार्ट साफ़ करता है और अपने सभी आवंटित संसाधन रिलीज़ करता है.

सामान लौटाने का टाइप: कोई नहीं

इवेंट

इवेंट जानकारी
click

जब उपयोगकर्ता चार्ट के अंदर क्लिक करता है, तब सक्रिय होता है. इसका इस्तेमाल यह पता लगाने के लिए किया जा सकता है कि शीर्षक, डेटा एलिमेंट, लेजेंड की एंट्री, ऐक्सिस, ग्रिडलाइन या लेबल पर कब क्लिक किया गया है.

प्रॉपर्टी: targetID
error

जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है, तब सक्रिय किया जाता है.

प्रॉपर्टी: आईडी, मैसेज
ready

चार्ट, मेथड कॉल के लिए तैयार है. चार्ट बनाने के बाद, अगर आपको चार्ट और इंटरैक्ट करने के तरीकों से इंटरैक्ट करना है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट चालू होने के बाद ही उन्हें कॉल करना चाहिए.

प्रॉपर्टी: कोई नहीं
select

तब सक्रिय होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. अगर आपको चुना गया है, तो यह जानने के लिए getSelection() को कॉल करें.

प्रॉपर्टी: कोई नहीं

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस किया जाता है और रेंडर किया जाता है. किसी भी सर्वर पर डेटा नहीं भेजा जाता.