गांट चार्ट

खास जानकारी

गैंट चार्ट एक तरह का चार्ट है, जिसमें किसी प्रोजेक्ट को उसके कॉम्पोनेंट टास्क में ब्रेकडाउन दिखाया गया है. Google Gantt चार्ट, किसी प्रोजेक्ट के शुरू होने, खत्म होने, और उसके कुल समय के साथ-साथ, टास्क की डिपेंडेंसी के बारे में भी बताते हैं. Google Gantt चार्ट, 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>

संसाधनों को ग्रुप में बांटना

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

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

शुरू/खत्म होने/अवधि का हिसाब लगाना

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

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

शुरू करें समाप्त कुल समय नतीजा
स्क्रीन शेयर करें स्क्रीन शेयर करें स्क्रीन शेयर करें जांच लें कि अवधि, शुरू/खत्म होने के समय से मेल खाती हो. अलग-अलग होने पर गड़बड़ी दिखाता है.
स्क्रीन शेयर करें स्क्रीन शेयर करें शून्य शुरू और खत्म होने के समय से अवधि का हिसाब लगाता है.
स्क्रीन शेयर करें शून्य स्क्रीन शेयर करें खत्म होने के समय को कैलकुलेट करता है.
स्क्रीन शेयर करें शून्य शून्य अवधि या खत्म होने के समय का हिसाब नहीं लगा पाने की वजह से गड़बड़ी की जानकारी देता है.
शून्य स्क्रीन शेयर करें स्क्रीन शेयर करें कंप्यूट के शुरू होने का समय.
शून्य शून्य स्क्रीन शेयर करें डिपेंडेंसी के आधार पर शुरू होने का समय कैलकुलेट करता है. 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 Gantt चार्ट का क्रिटिकल पाथ डिफ़ॉल्ट रूप से लाल रंग का होता है. इसे 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 कॉलम 3 कॉलम 4 कॉलम 5 कॉलम 6 कॉलम 7
मकसद: टास्क आईडी टास्क का नाम संसाधन का आईडी (ज़रूरी नहीं) शुरू करें End अवधि (मिलीसेकंड में) प्रतिशत पढ़ी गई डिपेंडेंसी
डेटा टाइप: स्ट्रिंग स्ट्रिंग स्ट्रिंग date date नंबर नंबर स्ट्रिंग
भूमिका: डोमेन डेटा डेटा डेटा डेटा डेटा डेटा डेटा

 

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

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

एक ऑब्जेक्ट जिसमें टास्क लेबल के लिए स्टाइल शामिल हैं.

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

तरीके

तरीका ब्यौरा
draw(data, options)

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

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

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

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

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

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

चार्ट को हटा देता है और इसके लिए असाइन किए गए सभी संसाधनों को रिलीज़ करता है.

सामान लौटाने का तरीका: कोई नहीं

इवेंट

इवेंट ब्यौरा
click

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

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

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

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

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

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

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

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

डेटा नीति

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