समयरेखा

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

खास जानकारी

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

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

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

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

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

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

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

आखिर में, हम चार्ट के draw() तरीके को शुरू करते हैं. यह 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 चार्ट की टाइमलाइन को पसंद के मुताबिक बनाने की सुविधा है. साथ ही, इन उदाहरणों में बताया गया है कि आप टाइमलाइन में कैसे बदलाव कर सकते हैं.

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

ऊपर दिए गए लाइन लेबल "वॉशिंगटन", "एडम्स", "जेफ़रसन" के अलावा, आप अलग-अलग बार को लेबल कर सकते हैं. यहां, हम पंक्ति लेबल को साधारण संख्याओं में बदलते हैं और हर राष्ट्रपति का नाम अपने बार पर रखते हैं.

इस कोड में, हमने बार लेबल रखने के लिए अपने डेटा में एक नया स्तंभ शामिल किया है: हर राष्ट्रपति का पूरा नाम. जब टाइमलाइन में चार कॉलम होते हैं, तो 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 तीसरा कॉलम चौथा कॉलम
मकसद: पंक्ति का लेबल बार लेबल (ज़रूरी नहीं) टूलटिप (ज़रूरी नहीं) चालू करें अंत
डेटा टाइप: स्ट्रिंग स्ट्रिंग स्ट्रिंग संख्या या तारीख संख्या या तारीख
भूमिका: डेटा डेटा टूलटिप डेटा डेटा

 

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

नाम
वैकल्पिक वैकल्पिक पंक्ति शैली

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

टाइप: बूलियन
डिफ़ॉल्ट: true
GridGrids को ओवरलैप करने से बचें

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

टाइप: बूलियन
डिफ़ॉल्ट: true
बैकग्राउंड का रंग

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

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

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

टाइप: स्ट्रिंग की कैटगरी
डिफ़ॉल्ट: डिफ़ॉल्ट रंग
इंटरैक्शन की सुविधा चालू करें

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

टाइप: बूलियन
डिफ़ॉल्ट: true
फ़ॉन्ट का नाम

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: '{8/}'
फ़ॉन्ट का साइज़

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

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

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

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

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

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

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

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

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

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
टाइमलाइन.colorByRowLabel

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

टाइप: बूलियन
डिफ़ॉल्ट: गलत
ठीक करें

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

टाइप: बूलियन
डिफ़ॉल्ट: true
टाइमलाइन.rowLabelStyle

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

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

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

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
टाइमलाइन.showBarLabels

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

टाइप: बूलियन
डिफ़ॉल्ट: true
टाइमलाइन.showRowLabel

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

टाइप: बूलियन
डिफ़ॉल्ट: true
टाइमलाइन.सिंगल कलर

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: शून्य
टूलटिप

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

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

टाइप: बूलियन
डिफ़ॉल्ट: true
टूलटिप

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

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

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

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

तरीके

तरीका
draw(data, options)

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

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

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

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

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

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

इवेंट

नाम
error

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

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

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

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

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

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

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

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

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

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

डेटा नीति

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