समयावधि

  1. खास जानकारी
  2. एक आसान उदाहरण
  3. बार को लेबल करना
  4. बेहतर उदाहरण
  5. एक पंक्ति में बार डालना
  6. फ़ॉन्ट बदलना
  7. रंगों को कंट्रोल करना
  8. ओवरलैप करती हुई ग्रिडलाइन
  9. टूलटिप को अपनी ज़रूरत के मुताबिक बनाना
  10. लोड हो रहा है
  11. डेटा फ़ॉर्मैट
  12. कॉन्फ़िगरेशन के विकल्प
  13. तरीके
  14. इवेंट
  15. डेटा नीति

खास जानकारी

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

ध्यान दें: JavaScript के तारीख वाले ऑब्जेक्ट में, महीनों को शून्य से शुरू करके इंडेक्स किया जाता है और ये ग्यारह तक बढ़ते हैं. यहां जनवरी 0 और दिसंबर 11 महीना होता है. अगर आपको लगता है कि टाइमलाइन में एक महीने का अंतर है, तो ऐसा हो सकता है. ज़्यादा जानकारी के लिए, तारीख और समय पेज देखें.

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

मान लें कि आपको यह योजना बनानी है कि अमेरिका के राष्ट्रपति अपने कार्यकाल के दौरान यहां, "संसाधन" राष्ट्रपति हैं और हम हर राष्ट्रपति के कार्यकाल को एक बार के तौर पर शामिल कर सकते हैं:

किसी बार पर कर्सर घुमाने से, ज़्यादा जानकारी वाली टूलटिप दिखती है.

timeline पैकेज लोड होने और पेज के रेंडर होने पर, चार्ट ड्रॉ करने के लिए कॉलबैक तय करने के बाद, drawChart() वाला तरीका google.visualization.Timeline() को इंस्टैंशिएट करता है. इसके बाद, हर प्रेसिडेंट के लिए एक पंक्ति dataTable भरता है.

dataTable के अंदर, पहला कॉलम राष्ट्रपति का नाम है. दूसरा और तीसरा कॉलम, शुरू और खत्म होने का समय है. इनमें JavaScript Date टाइप होता है, लेकिन ये सामान्य नंबर भी हो सकते हैं.

आखिर में, हम चार्ट के draw() तरीके को शुरू करते हैं. यह इसे उसी आइडेंटिफ़ायर (timeline) के साथ div में दिखाता है जिसका इस्तेमाल तब किया जाता है, जब drawChart() की पहली लाइन में container को एलान किया गया था.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

Google चार्ट की टाइमलाइन को पसंद के मुताबिक बनाया जा सकता है. नीचे दिए गए उदाहरणों में, हम आपको टाइमलाइन के दिखने के तरीके को पसंद के मुताबिक बनाने के कुछ सामान्य तरीके दिखाएंगे.

बार को लेबल करना

ऊपर दिए गए लाइन लेबल ("Washington", "Adams", "Jefferson") के अलावा, अलग-अलग बार को लेबल किया जा सकता है. यहां हम लाइन के लेबल को सिंपल नंबर में बदल देते हैं और हर राष्ट्रपति का नाम उसके बार में रख देते हैं.

इस कोड में, हमने बार के लेबल को होल्ड करने के लिए, अपने डेटा में एक नया कॉलम जोड़ा है: इसमें हर राष्ट्रपति का पूरा नाम शामिल है. जब टाइमलाइन dataTable में चार कॉलम होते हैं, तो पहले को लाइन के लेबल, दूसरे को बार के लेबल, और तीसरे और चौथे कॉलम को शुरू और खत्म होने के तौर पर दिखाया जाता है.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }
</script>

<div id="example2.1" style="height: 200px;"></div>

ऊपर दिए गए हमारे नए लाइन लेबल ज़्यादा जानकारी नहीं देते हैं, इसलिए आइए उन्हें टाइमलाइन showRowLabels विकल्प से हटा दें.

डिफ़ॉल्ट रूप से, showRowLabels true होता है. इसे false पर सेट करने से, लाइन के लेबल हट जाते हैं:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { showRowLabels: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example2.2" style="height: 180px;"></div>

बेहतर उदाहरण

हमारी टाइमलाइन को और मुश्किल बनाने के लिए, आइए अपने चार्ट में उपराष्ट्रपति और राज्य सचिवों को जोड़ें. जॉन ऐडम्स, राष्ट्रपति बनने से पहले के उप-राष्ट्रपति थे और थॉमस जेफ़रसन राज्य के सचिव, उस समय के उपराष्ट्रपति, और आखिर में राष्ट्रपति पद पर थे.

टाइमलाइन में, किसी संसाधन का रंग एक ही होगा, भले ही वह कई पंक्तियों में दिख रहा हो. इसलिए, नीचे दिए गए चार्ट में हर व्यक्ति का एक जैसा रंग दिखाया गया है.

राज्य के कुछ सचिवों को बहुत कम समय के लिए सेवा दी जाती है, इसलिए यह चार्ट लेबलिंग का एक अच्छा परीक्षण है. जब कोई लेबल बार के लिए बहुत बड़ा होता है, तो बार के साइज़ के हिसाब से उसे छोटा कर दिया जाता है या हटा दिया जाता है. टूलटिप की जानकारी पाने के लिए, उपयोगकर्ता हमेशा बार पर कर्सर घुमा सकते हैं.

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>

बार को एक लाइन में डालना

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

डिफ़ॉल्ट तरीका यहां बताया गया है:

अब groupByRowLabel को false पर सेट करते हैं और एक पंक्ति को तीन में बांटते हैं:

ग्रुप बनाने की सुविधा बंद करने के लिए कोड:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { groupByRowLabel: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example4.2" style="height: 200px;"></div>

रंगों को कंट्रोल करना

डिफ़ॉल्ट रूप से, Google चार्ट सुंदरता और रीडबिलिटी के लिए ऑप्टिमाइज़ किए गए रंगों को चुनता है (इनमें विज़ुअल दिव्यांग उपयोगकर्ता भी शामिल हैं). colorByRowLabel, singleColor, backgroundColor, और colors विकल्पों का इस्तेमाल करके, डिफ़ॉल्ट ऐक्शन को ज़रूरत के मुताबिक बनाया जा सकता है.

colorByRowLabel विकल्प, एक ही पंक्ति में मौजूद सभी बार को कलर करता है. यह एक अच्छा विकल्प हो सकता है, जब आपके बार के बीच अंतर कम हो.

colorByRowLabel की डिफ़ॉल्ट वैल्यू false है. इसलिए, हम इसे बदलकर true पर सेट करते हैं.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
      [ 'Magnolia Room', 'Intermediate JavaScript',    new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
      [ 'Magnolia Room', 'Advanced JavaScript',        new Date(0,0,0,16,0,0),  new Date(0,0,0,17,30,0) ],
      [ 'Willow Room',   'Beginning Google Charts',    new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Willow Room',   'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Willow Room',   'Advanced Google Charts',     new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.1" style="height: 100px;"></div>

अगर आपको सभी बार एक ही रंग में चाहिए, चाहे वे किसी भी लाइन में हों, तो singleColor विकल्प का इस्तेमाल करें:

सभी बार को हल्के हरे रंग में रंग देने के लिए, नीचे दिए गए कोड में, singleColor को हेक्स वैल्यू पर सेट किया गया है:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.2" style="height: 150px;"></div>

backgroundColor विकल्प की मदद से, लाइनों के बैकग्राउंड का रंग कंट्रोल किया जा सकता है:

backgroundColor को हेक्स वैल्यू के तौर पर चुना जाता है. यहाँ, हम इसे colorByRowLabel के साथ जोड़ते हैं, ताकि एक कॉन्फ़्रेंस में ट्रैक दिखाए जा सकें:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      backgroundColor: '#ffd'
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.3" style="height: 150px;"></div>

इसके बाद, बैकग्राउंड के रंग को पंक्ति इंडेक्स के हिसाब से या उसके हिसाब से न बदलने पर सेट करने के लिए, alternatingRowStyle विकल्प (ऐक्टिव v51+) का इस्तेमाल करें:

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      alternatingRowStyle: false
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.4" style="height: 150px;"></div>

अगर आपको अलग-अलग बार के रंग कंट्रोल करने हैं, तो colors विकल्प का इस्तेमाल करें:

colors, हेक्स वैल्यू का कलेक्शन लेता है, जो बार पर इस क्रम में लागू होता है:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.5');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.5" style="height: 150px;"></div>

अगर आपके चार्ट में दिए गए रंगों से ज़्यादा रंगों की ज़रूरत है, तो चार्ट इस तरह काम करेगा, जैसे कि singleColor को सूची के पहले रंग पर सेट किया गया हो. (यह बात सिर्फ़ टाइमलाइन पर ही नहीं, बल्कि Google चार्ट पर भी लागू होती है.)

अलग-अलग बार के रंगों को कंट्रोल करने का एक और तरीका है, स्टाइल रोल वाले कॉलम का इस्तेमाल करना.

स्टाइल कॉलम में जोड़ने और अपने-आप जानकारी भरने के लिए कोड:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

</script>

<div id="example5.6" style="height: 150px;"></div>

फ़ॉन्ट बदलना

rowLabelStyle वाली हर लाइन के लेबल और हर बार के barLabelStyle लेबल के लिए, टाइपफ़ेस और फ़ॉन्ट चुना जा सकता है. नीचे दोनों दिखाए गए हैं.

ध्यान दें: ऐसे टाइपफ़ेस ज़रूर चुनें जिन्हें आपके उपयोगकर्ताओं के ब्राउज़र रेंडर कर सकेंगे.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example6.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
      timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
                     barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example6.1" style="height: 200px;"></div>

barLabel टेक्स्ट का रंग सेट नहीं किया जा सकता.

ओवरलैपिंग ग्रिडलाइन

Google चार्ट, टाइमलाइन ग्रिडलाइन को छिपाने से बचने के लिए बार एंडपॉइंट में छोटे-छोटे बदलाव करता है. इस तरह के व्यवहार से बचने के लिए, avoidOverlappingGridLines विकल्प को false पर सेट करें.

प्रभाव दिखाने के लिए, यहां दो उदाहरण दिए गए हैं, पहला उदाहरण ओवरले किए गए ग्रिडलाइन के साथ और दूसरे में.

ग्रिडलाइन को ओवरलैप करने वाला कोड यहां दिया गया है:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var container = document.getElementById('example7.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'string', id: 'Room' });
      dataTable.addColumn({ type: 'string', id: 'Name' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'Magnolia Room', 'App Engine',    new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);

      var options = {
        timeline: { showRowLabels: false },
        avoidOverlappingGridLines: false
      };

      chart.draw(dataTable, options);
    }

  </script>

  <div id="example7.1" style="height: 200px;"></div>

टूलटिप को पसंद के मुताबिक बनाना

पांच कॉलम वाली डेटाटेबल में टूलटिप कॉलम जोड़कर, उपयोगकर्ताओं को किसी टाइमलाइन के बार पर कर्सर घुमाने पर, यह तय किया जा सकता है कि उन्हें क्या दिखे. नॉन-डिफ़ॉल्ट टूलटिप देने के लिए, आपकी डेटा टेबल की हर पंक्ति में सभी पांच कॉलम (पंक्ति का लेबल, बार का लेबल, टूलटिप, स्टार्ट, और एंड) होने चाहिए:

किसी बार पर कर्सर घुमाने से, तीसरे कॉलम में तय किए गए टेक्स्ट के साथ एक टूलटिप दिखता है. इस चार्ट में, हमें दूसरे कॉलम को डमी वैल्यू (यहां, 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':['timeline']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', role: 'tooltip' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams', null, 'John', new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

लोड हो रहा है

google.charts.load पैकेज का नाम timeline है: 

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

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

  var visualization = new google.visualization.Timeline(container);

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

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

कॉलम:

  कॉलम 0 कॉलम 1 कॉलम 2 कॉलम 3 कॉलम 4
मकसद: लाइन का लेबल बार का लेबल (ज़रूरी नहीं) टूलटिप (ज़रूरी नहीं) शुरू करें End
डेटा टाइप: स्ट्रिंग स्ट्रिंग स्ट्रिंग नंबर या तारीख नंबर या तारीख
भूमिका: डेटा डेटा टूलटिप डेटा डेटा

 

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

नाम
alternatingRowStyle

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

टाइप: बूलियन
डिफ़ॉल्ट: सही
avoidOverlappingGridLines

क्या डिसप्ले एलिमेंट (जैसे कि टाइमलाइन में मौजूद बार), ग्रिड लाइन को धुंधला करने वाले होने चाहिए. गलत होने पर, ग्रिड लाइन को डिसप्ले एलिमेंट से पूरी तरह कवर किया जा सकता है. अगर सही है, तो ग्रिड लाइन को दिखाने के लिए डिसप्ले एलिमेंट को बदला जा सकता है.

टाइप: बूलियन
डिफ़ॉल्ट: सही
backgroundColor

चार्ट के मुख्य हिस्से के लिए बैकग्राउंड का रंग. यह एक सामान्य एचटीएमएल कलर स्ट्रिंग हो सकती है, जैसे: 'red' या '#00cc00'. इसके अलावा, यह इन प्रॉपर्टी वाला कोई ऑब्जेक्ट भी हो सकता है.

टाइप: स्ट्रिंग या ऑब्जेक्ट
डिफ़ॉल्ट: 'सफ़ेद'
कलर

चार्ट के एलिमेंट के लिए इस्तेमाल किए जाने वाले रंग. स्ट्रिंग का कलेक्शन, जिसमें हर एलिमेंट एक एचटीएमएल कलर स्ट्रिंग है, जैसे: colors:['red','#004411'].

टाइप: स्ट्रिंग की कलेक्शन
डिफ़ॉल्ट: डिफ़ॉल्ट रंग
enableInteractivity

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

टाइप: बूलियन
डिफ़ॉल्ट: सही
fontName

चार्ट में सभी टेक्स्ट के लिए डिफ़ॉल्ट फ़ॉन्ट फ़ेस. खास चार्ट एलिमेंट के लिए प्रॉपर्टी का इस्तेमाल करके, इसे बदला जा सकता है.

Type: स्ट्रिंग
डिफ़ॉल्ट: 'राय'
fontSize

चार्ट में सभी टेक्स्ट का डिफ़ॉल्ट फ़ॉन्ट साइज़, पिक्सल में. खास चार्ट एलिमेंट के लिए प्रॉपर्टी का इस्तेमाल करके, इसे बदला जा सकता है.

टाइप: नंबर
डिफ़ॉल्ट: अपने-आप
forceIFrame

चार्ट को किसी इनलाइन फ़्रेम के अंदर ड्रॉ करता है. ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है. सभी IE8 चार्ट, i-फ़्रेम में बनाए जाते हैं.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
ऊंचाई

चार्ट की ऊंचाई, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
timeline.barLabelStyle

ऐसा ऑब्जेक्ट जो बार लेबल के टेक्स्ट का स्टाइल बताता है. इसका फ़ॉर्मैट ऐसा होता है:

{fontName: <string>, fontSize: <string>}

इस टेबल में fontName और fontSize भी देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
timeline.colorByRowLabel

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

टाइप: बूलियन
डिफ़ॉल्ट: गलत
timeline.groupByRowLabel

अगर नीति को 'गलत है' पर सेट किया जाता है, तो हर dataTable एंट्री के लिए एक लाइन बनाई जाती है. डिफ़ॉल्ट तौर पर, एक लाइन में एक जैसे लेबल वाले बार इकट्ठा किए जाते हैं.

टाइप: बूलियन
डिफ़ॉल्ट: सही
timeline.rowLabelStyle

ऐसा ऑब्जेक्ट जो लाइन के लेबल के टेक्स्ट का स्टाइल तय करता है. इसका फ़ॉर्मैट ऐसा होता है:

{color: <string>, fontName: <string>, fontSize: <string>}

color, एचटीएमएल की कोई भी कलर स्ट्रिंग हो सकती है, जैसे कि 'red' या '#00cc00' इस टेबल में fontName और fontSize भी देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
timeline.showBarLabels

अगर नीति को 'गलत है' पर सेट किया जाता है, तो बार के लेबल हटा दिए जाते हैं. डिफ़ॉल्ट रूप से, उन्हें दिखाया जाता है.

टाइप: बूलियन
डिफ़ॉल्ट: सही
timeline.showRowLabels

अगर नीति को 'गलत है' पर सेट किया जाता है, तो लाइन के लेबल हटा दिए जाते हैं. डिफ़ॉल्ट रूप से, उन्हें दिखाया जाता है.

टाइप: बूलियन
डिफ़ॉल्ट: सही
timeline.singleColor

सभी बार एक जैसे रंग में होते हैं. हेक्स वैल्यू के तौर पर दिखाया जाता है (उदाहरण के लिए, '#8d8').

Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
tooltip.isHtml

एचटीएमएल से रेंडर किए गए टूलटिप के बजाय, SVG के ज़रिए रेंडर किए गए टूल का इस्तेमाल करने के लिए, false पर सेट करें. ज़्यादा जानकारी के लिए, टूलटिप के कॉन्टेंट को पसंद के मुताबिक बनाना देखें.

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

टाइप: बूलियन
डिफ़ॉल्ट: सही
tooltip.trigger

वह उपयोगकर्ता इंटरैक्शन जिसकी वजह से टूलटिप दिखती है:

  • 'फ़ोकस' - जब उपयोगकर्ता एलिमेंट पर कर्सर घुमाता है, तो टूलटिप दिखती है.
  • 'कोई नहीं' - टूलटिप नहीं दिखाया जाएगा.
Type: स्ट्रिंग
डिफ़ॉल्ट: 'फ़ोकस'
चौड़ाई

चार्ट की चौड़ाई, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की चौड़ाई

तरीके

तरीका
draw(data, options)

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

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

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

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

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

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

इवेंट

नाम
error

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

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

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

प्रॉपर्टी: पंक्ति, कॉलम
onmouseout

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

प्रॉपर्टी: पंक्ति, कॉलम
ready

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

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

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

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

डेटा नीति

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