টাইমলাইন

  1. ওভারভিউ
  2. একটি সহজ উদাহরণ
  3. বার লেবেল করা
  4. একটি উন্নত উদাহরণ
  5. এক সারিতে বার রাখা
  6. ফন্ট পরিবর্তন
  7. রং নিয়ন্ত্রণ
  8. ওভারল্যাপিং গ্রিডলাইন
  9. কাস্টমাইজ করা টুলটিপ
  10. লোড হচ্ছে
  11. উপাত্ত বিন্যাস
  12. কনফিগারেশন অপশন
  13. পদ্ধতি
  14. ঘটনা
  15. ডেটা নীতি

ওভারভিউ

একটি টাইমলাইন হল একটি চার্ট যা দেখানো হয় কিভাবে সময়ের সাথে সম্পদের একটি সেট ব্যবহার করা হয়। আপনি যদি একটি সফ্টওয়্যার প্রকল্প পরিচালনা করেন এবং কে কী এবং কখন করছে তা ব্যাখ্যা করতে চান, বা আপনি যদি একটি সম্মেলন আয়োজন করেন এবং মিটিং রুমগুলি নির্ধারণ করতে চান তবে একটি টাইমলাইন প্রায়শই একটি যুক্তিসঙ্গত ভিজ্যুয়ালাইজেশন পছন্দ। একটি জনপ্রিয় ধরনের টাইমলাইন হল গ্যান্ট চার্ট ।

দ্রষ্টব্য: জাভাস্ক্রিপ্ট তারিখ অবজেক্টে, মাসগুলি শূন্য থেকে শুরু করে সূচিত করা হয় এবং এগারো পর্যন্ত যায়, জানুয়ারি মাস 0 এবং ডিসেম্বর মাস 11 হয়৷ যদি আপনার টাইমলাইন এক মাস বন্ধ বলে মনে হয়, তাহলে সম্ভবত এটিই হতে পারে৷ আরও তথ্যের জন্য, তারিখ এবং সময় পৃষ্ঠা দেখুন।

একটি সহজ উদাহরণ

ধরা যাক আপনি যখন আমেরিকান রাষ্ট্রপতিরা তাদের শর্ত পূরণ করতে চান তখন প্লট করতে চান। এখানে, "সম্পদ" হল রাষ্ট্রপতি, এবং আমরা প্রতিটি রাষ্ট্রপতির মেয়াদকে বার হিসাবে প্লট করতে পারি:

একটি বারের উপর ঘোরানো আরও বিস্তারিত তথ্য সহ একটি টুলটিপ নিয়ে আসে।

timeline প্যাকেজ লোড করার পরে এবং পৃষ্ঠাটি রেন্ডার করার সময় চার্ট আঁকার জন্য একটি কলব্যাক সংজ্ঞায়িত করার পরে, drawChart() পদ্ধতিটি একটি google.visualization.Timeline() তাৎক্ষণিক করে এবং তারপর প্রতিটি রাষ্ট্রপতির জন্য একটি সারি সহ একটি dataTable পূরণ করে৷

dataTable ভিতরে, প্রথম কলামটি রাষ্ট্রপতির নাম, এবং দ্বিতীয় এবং তৃতীয় কলামটি শুরু এবং শেষের সময়। এই জাভাস্ক্রিপ্ট Date ধরন আছে, কিন্তু তারা সাধারণ সংখ্যা হতে পারে.

অবশেষে, আমরা চার্টের draw() পদ্ধতিটি চালু করি, যা একটি div ভিতরে একই শনাক্তকারী ( timeline ) ব্যবহার করে যখন 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 কলাম 3 কলাম 4
উদ্দেশ্য: সারি লেবেল বার লেবেল (ঐচ্ছিক) টুলটিপ (ঐচ্ছিক) শুরু করুন শেষ
ডেটা টাইপ: স্ট্রিং স্ট্রিং স্ট্রিং সংখ্যা বা তারিখ সংখ্যা বা তারিখ
ভূমিকা: তথ্য তথ্য টুলটিপ তথ্য তথ্য

কনফিগারেশন অপশন

নাম
alternatingRowStyle

চার্টটি সারি সূচী দ্বারা বিকল্প পটভূমির রঙ করা উচিত কিনা (অর্থাৎ, সম-সূচীযুক্ত সারির পটভূমির রঙ একটি গাঢ় রঙ)। মিথ্যা হলে, চার্টের পটভূমি এক অভিন্ন রঙের হবে। সত্য হলে, চার্টের পটভূমি সারি সূচী দ্বারা বিকল্প রঙ হবে। (দ্রষ্টব্য: সক্রিয় v51+)

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
ওভারল্যাপিং গ্রিডলাইনগুলি এড়িয়ে চলুন

প্রদর্শন উপাদানগুলি (যেমন, একটি টাইমলাইনে বারগুলি) গ্রিড লাইনগুলিকে অস্পষ্ট করবে কিনা। মিথ্যা হলে, গ্রিড লাইনগুলি ডিসপ্লে উপাদান দ্বারা সম্পূর্ণরূপে আচ্ছাদিত হতে পারে। সত্য হলে, গ্রিড লাইনগুলি দৃশ্যমান রাখতে প্রদর্শন উপাদানগুলি পরিবর্তন করা যেতে পারে।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
পেছনের রং

চার্টের প্রধান এলাকার জন্য পটভূমির রঙ। একটি সাধারণ HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' , অথবা নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তু।

প্রকার: স্ট্রিং বা বস্তু
ডিফল্ট: 'সাদা'
রং

চার্ট উপাদানের জন্য ব্যবহার করা রং. স্ট্রিংগুলির একটি অ্যারে, যেখানে প্রতিটি উপাদান একটি HTML রঙের স্ট্রিং, উদাহরণস্বরূপ: colors:['red','#004411'] ।

প্রকার: স্ট্রিং এর অ্যারে
ডিফল্ট: ডিফল্ট রং
ইন্টারঅ্যাক্টিভিটি সক্ষম করুন

চার্ট ব্যবহারকারী-ভিত্তিক ইভেন্টগুলি ছুঁড়েছে বা ব্যবহারকারীর মিথস্ক্রিয়ায় প্রতিক্রিয়া দেখায় কিনা। মিথ্যা হলে, চার্ট 'নির্বাচন' বা অন্যান্য মিথস্ক্রিয়া-ভিত্তিক ইভেন্টগুলি নিক্ষেপ করবে না (কিন্তু প্রস্তুত বা ত্রুটি ইভেন্টগুলি নিক্ষেপ করবে ), এবং ব্যবহারকারীর ইনপুটের উপর নির্ভর করে হোভারটেক্সট প্রদর্শন করবে না বা অন্যথায় পরিবর্তন করবে না।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
ফন্টের নাম

চার্টের সমস্ত পাঠ্যের জন্য ডিফল্ট ফন্ট ফেস। আপনি নির্দিষ্ট চার্ট উপাদানগুলির জন্য বৈশিষ্ট্য ব্যবহার করে এটি ওভাররাইড করতে পারেন।

প্রকার: স্ট্রিং
ডিফল্ট: 'Arial'
অক্ষরের আকার

চার্টের সমস্ত পাঠ্যের ডিফল্ট ফন্টের আকার, পিক্সেলে। আপনি নির্দিষ্ট চার্ট উপাদানগুলির জন্য বৈশিষ্ট্য ব্যবহার করে এটি ওভাররাইড করতে পারেন।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
forceIFrame

একটি ইনলাইন ফ্রেমের ভিতরে চার্ট আঁকে। (উল্লেখ্য যে IE8 এ, এই বিকল্পটি উপেক্ষা করা হয়েছে; সমস্ত IE8 চার্ট আই-ফ্রেমে আঁকা হয়েছে।)

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
উচ্চতা

চার্টের উচ্চতা, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: ধারণকারী উপাদানের উচ্চতা
timeline.barLabelStyle

একটি বস্তু যা বার লেবেল পাঠ শৈলী নির্দিষ্ট করে। এটির এই বিন্যাস আছে:

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

এছাড়াও এই টেবিলে fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: নাল
timeline.colorByRowLabel

সত্য হিসাবে সেট করা হলে, সারির প্রতিটি বারকে একই রঙ করুন। ডিফল্ট হল প্রতি বার লেবেলে একটি রঙ ব্যবহার করা।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
timeline.groupByRowLabel

মিথ্যাতে সেট করা থাকলে, প্রতিটি dataTable এন্ট্রির জন্য একটি সারি তৈরি করে। ডিফল্ট হল একই সারি লেবেল সহ বারগুলিকে এক সারিতে সংগ্রহ করা।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
timeline.rowLabelStyle

একটি বস্তু যা সারি লেবেল পাঠ্য শৈলী নির্দিষ্ট করে। এটির এই বিন্যাস আছে:

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

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ 'red' বা '#00cc00' এছাড়াও এই টেবিলে fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: নাল
timeline.showBarLabels

মিথ্যা সেট করা হলে, বার লেবেল বাদ দিন। ডিফল্ট তাদের দেখানো হয়.

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
timeline.showRowLabels

মিথ্যা সেট করা হলে, সারি লেবেল বাদ দেয়। ডিফল্ট তাদের দেখানো হয়.

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
timeline.singleColor

রং সব বার একই. একটি হেক্স মান হিসাবে নির্দিষ্ট করা হয়েছে (যেমন, '#8d8')।

প্রকার: স্ট্রিং
ডিফল্ট: নাল
tooltip.isHtml

SVG-রেন্ডার করা (HTML-রেন্ডারের পরিবর্তে) টুলটিপ ব্যবহার করতে false সেট করুন। আরও বিস্তারিত জানার জন্য টুলটিপ সামগ্রী কাস্টমাইজ করা দেখুন।

দ্রষ্টব্য: টুলটিপ কলাম ডেটা ভূমিকার মাধ্যমে HTML টুলটিপ সামগ্রীর কাস্টমাইজেশন বাবল চার্ট ভিজ্যুয়ালাইজেশন দ্বারা সমর্থিত নয় ৷

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
tooltip.trigger

ব্যবহারকারীর ইন্টারঅ্যাকশন যার কারণে টুলটিপ প্রদর্শিত হয়:

  • 'ফোকাস' - ব্যবহারকারী যখন উপাদানটির উপর ঘোরায় তখন টুলটিপ প্রদর্শিত হবে।
  • 'none' - টুলটিপ প্রদর্শিত হবে না।
প্রকার: স্ট্রিং
ডিফল্ট: 'ফোকাস'
প্রস্থ

চার্টের প্রস্থ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: ধারণকারী উপাদানের প্রস্থ

পদ্ধতি

পদ্ধতি
draw(data, options)

চার্ট আঁকে। ready ইভেন্ট ফায়ার হওয়ার পরেই চার্টটি আরও মেথড কল গ্রহণ করে। Extended description .

রিটার্ন টাইপ: কোনোটিই নয়
clearChart()

চার্টটি সাফ করে এবং এর সমস্ত বরাদ্দকৃত সংস্থান প্রকাশ করে।

রিটার্ন টাইপ: কোনোটিই নয়
getSelection()

নির্বাচিত চার্ট সত্তাগুলির একটি অ্যারে প্রদান করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। এই চার্টের জন্য, যে কোনো মুহূর্তে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। Extended description .

রিটার্ন টাইপ: নির্বাচন উপাদানের অ্যারে

ঘটনা

নাম
error

চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়।

বৈশিষ্ট্য: আইডি, বার্তা
onmouseover

যখন ব্যবহারকারী একটি ভিজ্যুয়াল সত্তার উপর মাউস দেয় তখন বহিস্কার করা হয়। সংশ্লিষ্ট ডেটা টেবিল উপাদানের সারি এবং কলামের সূচকগুলিকে পাস করে। একটি বার ডেটা টেবিলের একটি কক্ষের সাথে সম্পর্কযুক্ত, একটি কলামে একটি কিংবদন্তি এন্ট্রি (সারি সূচকটি শূন্য), এবং একটি সারির একটি বিভাগ (কলাম সূচকটি শূন্য)।

বৈশিষ্ট্য: সারি, কলাম
onmouseout

ব্যবহারকারী মাউস একটি ভিজ্যুয়াল সত্তা থেকে দূরে থাকলে বহিস্কার করা হয়। সংশ্লিষ্ট ডেটা টেবিল উপাদানের সারি এবং কলামের সূচকগুলিকে পাস করে। একটি বার ডেটা টেবিলের একটি কক্ষের সাথে সম্পর্কযুক্ত, একটি কলামে একটি কিংবদন্তি এন্ট্রি (সারি সূচকটি শূন্য), এবং একটি সারির একটি বিভাগ (কলাম সূচকটি শূন্য)।

বৈশিষ্ট্য: সারি, কলাম
ready

চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে draw পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে।

বৈশিষ্ট্য: কোনোটিই নয়
select

ব্যবহারকারী একটি ভিজ্যুয়াল সত্তা ক্লিক করলে বহিস্কার করা হয়। কি নির্বাচন করা হয়েছে তা জানতে, getSelection() কল করুন।

বৈশিষ্ট্য: কোনোটিই নয়

ডেটা নীতি

সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।