তারিখ এবং সময়

ওভারভিউ

date এবং তারিখ সময় datetime কলাম ডাটা প্রকার অন্তর্নির্মিত JavaScript তারিখ ক্লাস ব্যবহার করে।

গুরুত্বপূর্ণ: জাভাস্ক্রিপ্ট তারিখ অবজেক্টে, মাসগুলি শূন্য থেকে শুরু করে এবং এগারো পর্যন্ত যায়, জানুয়ারি মাস 0 এবং ডিসেম্বর মাস 11।

তারিখ কন্সট্রাক্টর ব্যবহার করে তারিখ এবং সময়

তারিখ কন্সট্রাক্টর ব্যবহার করে তারিখ

একটি নতুন তারিখ অবজেক্ট তৈরি করতে, আপনি তারিখের উপাদানগুলি নির্দিষ্ট করার জন্য আর্গুমেন্ট সহ new কীওয়ার্ড সহ Date() কনস্ট্রাক্টরকে কল করুন। এই আর্গুমেন্টগুলি আপনার তারিখের বিভিন্ন বৈশিষ্ট্যের সাথে সম্পর্কিত বেশ কয়েকটি সংখ্যার আকার নেয়।

new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)

date ডেটা টাইপের সাথে তারিখ কনস্ট্রাক্টর ব্যবহার করার সময়, আপনাকে শুধুমাত্র বছর, মাস এবং দিন উল্লেখ করতে হবে।

তারিখ কনস্ট্রাক্টর ফর্মটিও নিতে পারে: new Date(Milliseconds) , যেখানে মিলিসেকেন্ড হল 1 জানুয়ারী, 1970 00:00:00 UTC থেকে পছন্দসই তারিখের মিলিসেকেন্ডে দূরত্ব। সেই তারিখের আগের তারিখ এবং সময়ের জন্য, মিলিসেকেন্ডের একটি নেতিবাচক সংখ্যা দেওয়া হবে।

addColumn() , addRow() , এবং addRows() পদ্ধতির পাশাপাশি arrayToDataTable() () পদ্ধতি ব্যবহার করে ম্যানুয়ালি আপনার DataTable তৈরি করার সময় Date Constructor ব্যবহার করা উপকারী। যাইহোক, ডেটা নির্দিষ্ট করার জন্য JSON ব্যবহার করলে, স্ট্রিং উপস্থাপনা ব্যবহার করা প্রয়োজন।

জাভাস্ক্রিপ্ট তারিখ কনস্ট্রাক্টর একটি যুক্তি হিসাবে তারিখের একটি স্ট্রিং উপস্থাপনা গ্রহণ করতে পারে। এই স্ট্রিং বিভিন্ন ফর্ম নিতে পারে. সবচেয়ে নির্ভরযোগ্য ফর্মগুলি হয় RFC 2822 স্পেসিফিকেশন বা ISO 8601 স্পেসিফিকেশনের সাথে সঙ্গতিপূর্ণ। এগুলোর ফরম্যাটগুলো হল:

  • RFC 2822 — 'MMM DD, YYYY' বা 'DD MMM, YYYY' (উদাহরণ: new Date('Jan 1, 2015') বা new Date('1 Jan, 2015') )
  • ISO 8601 — 'YYYY-MM-DD' (উদাহরণ: new Date('2015-01-01') )

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

নীচের টাইমলাইনটি 2000 সাল থেকে প্রতিটি এনএফএল সিজনের সুপার বোল চ্যাম্পিয়ন দেখায়।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Team'); data.addColumn('date', 'Season Start Date'); data.addColumn('date', 'Season End Date'); data.addRows([ ['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5)], ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)], ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)], ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)], ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)], ['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5)], ['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5)], ['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5)], ['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5)], ['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5)], ['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5)], ['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5)], ['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5)], ['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5)], ]); var options = { height: 450, timeline: { groupByRowLabel: true } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Team'); data.addColumn('date', 'Season Start Date'); data.addColumn('date', 'Season End Date'); data.addRows([ ['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5)], ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)], ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)], ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)], ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)], ['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5)], ['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5)], ['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5)], ['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5)], ['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5)], ['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5)], ['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5)], ['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5)], ['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5)], ]); var options = { height: 450, timeline: { groupByRowLabel: true } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); }

নীচে এই টাইমলাইন তৈরি করার জন্য কোড আছে. পূর্বে উল্লিখিত হিসাবে 0-ভিত্তিক মাস ব্যবহার করে new Date() কনস্ট্রাক্টরদের ব্যবহার এবং প্রতিটি তারিখের জন্য প্রদত্ত সংখ্যাগুলি নোট করুন।

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

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Team');
      data.addColumn('date', 'Season Start Date');
      data.addColumn('date', 'Season End Date');

      data.addRows([
        ['Baltimore Ravens',     new Date(2000, 8, 5), new Date(2001, 1, 5)],
        ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
        ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
        ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
        ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2005, 8, 5), new Date(2006, 1, 5)],
        ['Indianapolis Colts',   new Date(2006, 8, 5), new Date(2007, 1, 5)],
        ['New York Giants',      new Date(2007, 8, 5), new Date(2008, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2008, 8, 5), new Date(2009, 1, 5)],
        ['New Orleans Saints',   new Date(2009, 8, 5), new Date(2010, 1, 5)],
        ['Green Bay Packers',    new Date(2010, 8, 5), new Date(2011, 1, 5)],
        ['New York Giants',      new Date(2011, 8, 5), new Date(2012, 1, 5)],
        ['Baltimore Ravens',     new Date(2012, 8, 5), new Date(2013, 1, 5)],
        ['Seattle Seahawks',     new Date(2013, 8, 5), new Date(2014, 1, 5)],
      ]);

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

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

      chart.draw(data, options);
    }
  

তারিখ কন্সট্রাক্টর ব্যবহার করে তারিখের সময়

DataTable datetime কলাম ডেটা টাইপ date ডেটা টাইপ হিসাবে একই তারিখ কন্সট্রাক্টর ব্যবহার করে, কিন্তু এখন সময় পূরণ করতে সমস্ত আর্গুমেন্ট ব্যবহার করে।

বিকল্পভাবে, তারিখের একটি স্ট্রিং উপস্থাপনা তারিখ datetime পাস করা যেতে পারে। datetime একটি স্ট্রিং উপস্থাপনা 4-সংখ্যার টাইমজোন অফসেট ছাড়াও ঘন্টা, মিনিট এবং সেকেন্ড যোগ করে (যেমন প্যাসিফিক স্ট্যান্ডার্ড টাইম (PST) হল -0800)। RFC 2822 স্পেকের জন্য, তারিখ এবং সময় এবং সময় এবং টাইমজোনের মধ্যে স্পেস সহ সময় এবং টাইমজোন যোগ করা হয়। ISO 8601 স্পেসে, কোন স্পেস নেই, পরিবর্তে একটি সময় উপাদান বোঝাতে তারিখটি একটি বড় হাতের "T" দ্বারা অনুসরণ করা হয়। এছাড়াও সময় এবং টাইমজোন অফসেটের মধ্যে কোন স্থান নেই। 6 ডিসেম্বর, 2014 সকাল 10:30 datetime এর জন্য সম্পূর্ণ তারিখের তারিখ স্ট্রিং হবে:

  • RFC 2822 — Dec 6, 2014 10:30:00 -0800
  • ISO 8601 — 2014-12-06T10:30:00-0800

সতর্কতা: আবার, স্ট্রিং উপস্থাপনা বিভিন্ন ব্রাউজার/সংস্করণ দ্বারা ভিন্নভাবে পার্স করা হতে পারে। উল্লেখযোগ্যভাবে, সময় এবং টাইমজোনগুলির সাথে কাজ করার সময়, তারিখের সময়টি UTC (GMT) টাইমজোনের সাথে ফেরত দেওয়া হয়, নাকি অফসেট এবং স্থানীয় সময়ে ফেরত দেওয়া হয় তার মধ্যে পার্থক্য রয়েছে৷ এটি আরেকটি কারণ কেন ডেটটাইম স্ট্রিং ব্যবহার করার পরামর্শ দেওয়া হয় না

নিচের টাইমলাইনটি ডেটটাইম ডেটা টাইপ ব্যবহার করে একটি গড় দিন ভেঙে দেয়।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Activity', 'Start Time', 'End Time'], ['Sleep', new Date(2014, 10, 15, 0, 30), new Date(2014, 10, 15, 6, 30)], ['Eat Breakfast', new Date(2014, 10, 15, 6, 45), new Date(2014, 10, 15, 7)], ['Get Ready', new Date(2014, 10, 15, 7, 4), new Date(2014, 10, 15, 7, 30)], ['Commute To Work', new Date(2014, 10, 15, 7, 30), new Date(2014, 10, 15, 8, 30)], ['Work', new Date(2014, 10, 15, 8, 30), new Date(2014, 10, 15, 17)], ['Commute Home', new Date(2014, 10, 15, 17), new Date(2014, 10, 15, 18)], ['Gym', new Date(2014, 10, 15, 18), new Date(2014, 10, 15, 18, 45)], ['Eat Dinner', new Date(2014, 10, 15, 19), new Date(2014, 10, 15, 20)], ['Get Ready For Bed', new Date(2014, 10, 15, 21), new Date(2014, 10, 15, 22)] ]); var options = { height: 450, }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Activity', 'Start Time', 'End Time'], ['Sleep', new Date(2014, 10, 15, 0, 30), new Date(2014, 10, 15, 6, 30)], ['Eat Breakfast', new Date(2014, 10, 15, 6, 45), new Date(2014, 10, 15, 7)], ['Get Ready', new Date(2014, 10, 15, 7, 4), new Date(2014, 10, 15, 7, 30)], ['Commute To Work', new Date(2014, 10, 15, 7, 30), new Date(2014, 10, 15, 8, 30)], ['Work', new Date(2014, 10, 15, 8, 30), new Date(2014, 10, 15, 17)], ['Commute Home', new Date(2014, 10, 15, 17), new Date(2014, 10, 15, 18)], ['Gym', new Date(2014, 10, 15, 18), new Date(2014, 10, 15, 18, 45)], ['Eat Dinner', new Date(2014, 10, 15, 19), new Date(2014, 10, 15, 20)], ['Get Ready For Bed', new Date(2014, 10, 15, 21), new Date(2014, 10, 15, 22)] ]); var options = { height: 450, }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); }
    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Activity', 'Start Time', 'End Time'],
        ['Sleep',
         new Date(2014, 10, 15, 0, 30),
         new Date(2014, 10, 15, 6, 30)],
        ['Eat Breakfast',
         new Date(2014, 10, 15, 6, 45),
         new Date(2014, 10, 15, 7)],
        ['Get Ready',
         new Date(2014, 10, 15, 7, 4),
         new Date(2014, 10, 15, 7, 30)],
        ['Commute To Work',
         new Date(2014, 10, 15, 7, 30),
         new Date(2014, 10, 15, 8, 30)],
        ['Work',
         new Date(2014, 10, 15, 8, 30),
         new Date(2014, 10, 15, 17)],
        ['Commute Home',
         new Date(2014, 10,  15, 17),
         new Date(2014, 10,  15, 18)],
        ['Gym',
         new Date(2014, 10, 15, 18),
         new Date(2014, 10,  15, 18, 45)],
        ['Eat Dinner',
         new Date(2014, 10,  15, 19),
         new Date(2014, 10,  15, 20)],
        ['Get Ready For Bed',
         new Date(2014, 10,  15, 21),
         new Date(2014, 10,  15, 22)]
      ]);

      var options = {
        height: 450,
      };

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

      chart.draw(data, options);
    }
  

তারিখ, সময় এবং সময় অঞ্চল

তারিখ কনস্ট্রাক্টর ব্যবহার করে, হয় date বা তারিখের জন্য, ব্যবহারকারীর ব্রাউজার দ্বারা সেট করা datetime পছন্দসই তারিখ বা তারিখ সময় ফিরিয়ে দেবে। একটি নির্দিষ্ট সময় অঞ্চলে আপনার তারিখ অবজেক্ট সেট করা কয়েকটি উপায়ে অর্জন করা যেতে পারে। প্রথমত, Google চার্ট একটি তারিখ ফর্ম্যাটার প্রদান করে যেখানে আপনি একটি timeZone নির্দিষ্ট করতে পারেন। এটি আপনার ডেটা টেবিলে আপনার প্রতিটি date এবং তারিখ সময় মানের জন্য একটি datetime মান প্রদান করবে। আপনি new Date() কনস্ট্রাক্টরের কাছে আপনার যুক্তি হিসাবে একটি স্ট্রিং পাস করতে পারেন, অথবা আপনি আপনার আর্গুমেন্টগুলিকে Date.UTC() পদ্ধতিতে মোড়ানো করতে পারেন, যেমন:

new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))

এটি UTC (GMT) টাইমজোনে নির্দিষ্ট তারিখ এবং সময়ে একটি তারিখ অবজেক্ট সেট করবে। সেখান থেকে আপনি টাইমজোনের জন্য পছন্দসই অফসেট গণনা করতে পারেন এবং আপনার পছন্দ অনুযায়ী তারিখ এবং সময় সেট করতে পারেন।

তারিখ স্ট্রিং প্রতিনিধিত্ব ব্যবহার করে তারিখ এবং সময়

আপনার DataTable তৈরি করতে JavaScript DataTable অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করে ডেটা সিরিয়াল করার সময়, new Date() কনস্ট্রাক্টর ব্যবহার করা যাবে না। পরিবর্তে, Google চার্ট একটি তারিখ স্ট্রিং উপস্থাপনা প্রদান করে যা একটি ডেটা টেবিল তৈরি করার সময় আপনার date বা তারিখ datetime সিরিয়ালাইজ করা এবং সঠিকভাবে পার্স করার অনুমতি দেয়। এই তারিখ স্ট্রিং বিন্যাসটি কেবল new কীওয়ার্ডটি ফেলে দেয় এবং অবশিষ্ট অভিব্যক্তিটিকে উদ্ধৃতি চিহ্নগুলিতে মোড়ানো হয়:

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

গুরুত্বপূর্ণ: এই তারিখ স্ট্রিং রিপ্রেজেন্টেশন ব্যবহার করার সময়, new Date() কনস্ট্রাক্টর ব্যবহার করার সময়, মাসগুলি শূন্য থেকে শুরু করে সূচিত করা হয় (জানুয়ারি মাস 0, ডিসেম্বর মাস 11)।

নীচে আগে থেকে একই সুপার বোল টাইমলাইন, কিন্তু এখন JavaScript অবজেক্ট আক্ষরিক স্বরলিপি এবং তারিখ স্ট্রিং বিন্যাস ব্যবহার করে।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable({ cols: [ {id: 'team', label: 'Team', type: 'string'}, {id: 'start', label: 'Season Start Date', type: 'date'}, {id: 'end', label: 'Season End Date', type: 'date'} ], rows: [ {c: [{v: 'Baltimore Ravens'}, {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]}, {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]}, {c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]}, {c: [{v: 'Indianapolis Colts'}, {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]}, {c: [{v: 'New York Giants'}, {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]}, {c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]}, {c: [{v: 'New Orleans Saints'}, {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]}, {c: [{v: 'Green Bay Packers'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]}, {c: [{v: 'New York Giants'}, {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]}, {c: [{v: 'Baltimore Ravens'}, {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]}, {c: [{v: 'Seattle Seahawks'}, {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]} ] }); var options = { height: 450, timeline: { groupByRowLabel: true } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable({ cols: [ {id: 'team', label: 'Team', type: 'string'}, {id: 'start', label: 'Season Start Date', type: 'date'}, {id: 'end', label: 'Season End Date', type: 'date'} ], rows: [ {c: [{v: 'Baltimore Ravens'}, {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]}, {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]}, {c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]}, {c: [{v: 'Indianapolis Colts'}, {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]}, {c: [{v: 'New York Giants'}, {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]}, {c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]}, {c: [{v: 'New Orleans Saints'}, {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]}, {c: [{v: 'Green Bay Packers'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]}, {c: [{v: 'New York Giants'}, {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]}, {c: [{v: 'Baltimore Ravens'}, {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]}, {c: [{v: 'Seattle Seahawks'}, {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]} ] }); var options = { height: 450, timeline: { groupByRowLabel: true } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); }
    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable({

        cols: [
          {id: 'team', label: 'Team', type: 'string'},
          {id: 'start', label: 'Season Start Date', type: 'date'},
          {id: 'end', label: 'Season End Date', type: 'date'}
        ],

        rows: [
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
          {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
          {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
          {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
          {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]},
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]},
          {c: [{v: 'Seattle Seahawks'},     {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]}
        ]
      });

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

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

      chart.draw(data, options);
    }
  

এই বিন্যাসটি arrayToDataTable() পদ্ধতিতেও ব্যবহার করা যেতে পারে, শর্ত থাকে যে প্রথম অ্যারেতে, যেখানে কলাম লেবেলগুলি নির্দিষ্ট করা আছে, আপনি প্রয়োজনীয় কলামটিকে type: 'date' বা type: 'datetime'

var data = google.visualization.arrayToDataTable([
  ["Team", {type: 'date', label: 'Season Start Date'}, {type: 'date', label: 'Season End Date'}],
  ["Baltimore Ravens",     "Date(2000, 8, 5)", "Date(2001, 1, 5)"],
  ["New England Patriots", "Date(2001, 8, 5)", "Date(2002, 1, 5)"],
  ["Tampa Bay Buccaneers", "Date(2002, 8, 5)", "Date(2003, 1, 5)"],
  ["New England Patriots", "Date(2003, 8, 5)", "Date(2004, 1, 5)"],
  ["New England Patriots", "Date(2004, 8, 5)", "Date(2005, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2005, 8, 5)", "Date(2006, 1, 5)"],
  ["Indianapolis Colts",   "Date(2006, 8, 5)", "Date(2007, 1, 5)"],
  ["New York Giants",      "Date(2007, 8, 5)", "Date(2008, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2008, 8, 5)", "Date(2009, 1, 5)"],
  ["New Orleans Saints",   "Date(2009, 8, 5)", "Date(2010, 1, 5)"],
  ["Green Bay Packers",    "Date(2010, 8, 5)", "Date(2011, 1, 5)"],
  ["New York Giants",      "Date(2011, 8, 5)", "Date(2012, 1, 5)"],
  ["Baltimore Ravens",     "Date(2012, 8, 5)", "Date(2013, 1, 5)"],
  ["Seattle Seahawks",     "Date(2013, 8, 5)", "Date(2014, 1, 5)"]
]);
  

Timeofday সঙ্গে কাজ

timeofday কলাম ডেটা টাইপ 3 বা 4 নম্বরের একটি অ্যারে নেয়, যথাক্রমে ঘন্টা, মিনিট, সেকেন্ড এবং ঐচ্ছিকভাবে মিলিসেকেন্ডের প্রতিনিধিত্ব করে। timeofday ব্যবহার করা date এবং datetime সময় ব্যবহার করার চেয়ে আলাদা যে মানগুলি একটি তারিখের সাথে নির্দিষ্ট নয়, যেখানে date এবং datetime সময় সর্বদা একটি তারিখ নির্দিষ্ট করে৷

উদাহরণস্বরূপ, সকাল 8:30am হবে: [8, 30, 0, 0] , 4র্থ মানটি ঐচ্ছিক ( [8, 30, 0] দিনের মান একই সময় আউটপুট করবে)।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('timeofday', 'Time of Day'); data.addColumn('number', 'Emails Received'); data.addRows([ [[8, 30, 45], 5], [[9, 0, 0], 10], [[10, 0, 0, 0], 12], [[10, 45, 0, 0], 13], [[11, 0, 0, 0], 15], [[12, 15, 45, 0], 20], [[13, 0, 0, 0], 22], [[14, 30, 0, 0], 25], [[15, 12, 0, 0], 30], [[16, 45, 0], 32], [[16, 59, 0], 42] ]); var options = { title: 'Total Emails Received Throughout the Day', height: 450 }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('timeofday', 'Time of Day'); data.addColumn('number', 'Emails Received'); data.addRows([ [[8, 30, 45], 5], [[9, 0, 0], 10], [[10, 0, 0, 0], 12], [[10, 45, 0, 0], 13], [[11, 0, 0, 0], 15], [[12, 15, 45, 0], 20], [[13, 0, 0, 0], 22], [[14, 30, 0, 0], 25], [[15, 12, 0, 0], 30], [[16, 45, 0], 32], [[16, 59, 0], 42] ]); var options = { title: 'Total Emails Received Throughout the Day', height: 450 }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); }
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');

      data.addRows([
        [[8, 30, 45], 5],
        [[9, 0, 0], 10],
        [[10, 0, 0, 0], 12],
        [[10, 45, 0, 0], 13],
        [[11, 0, 0, 0], 15],
        [[12, 15, 45, 0], 20],
        [[13, 0, 0, 0], 22],
        [[14, 30, 0, 0], 25],
        [[15, 12, 0, 0], 30],
        [[16, 45, 0], 32],
        [[16, 59, 0], 42]
      ]);

      var options = {
        title: 'Total Emails Received Throughout the Day',
        height: 450
      };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
  

ফর্ম্যাটিং অক্ষ, গ্রিডলাইন এবং টিক লেবেল

তারিখ, তারিখ সময়, এবং দিনের সাথে কাজ করার সময়, এটি অক্ষ লেবেল, গ্রিডলাইন লেবেল, বা একটি নির্দিষ্ট উপায়ে টিক লেবেল ফর্ম্যাট করতে ইচ্ছা হতে পারে। এটি কয়েকটি উপায়ে অর্জন করা যেতে পারে।

প্রথমে, আপনি hAxis.format বা vAxis.format বিকল্পটি ব্যবহার করতে পারেন। এই বিকল্পটি প্রযোজ্য হয় যখন gridlines.count বিকল্পটি বাদ দেওয়া হয়, যে ক্ষেত্রে চার্ট ডিফল্ট 5 গণনা করে, সেইসাথে যখন এটি -1 ছাড়া অন্য কোনো সংখ্যায় সেট করা হয়। এটি আপনাকে একটি বিন্যাস স্ট্রিং নির্দিষ্ট করতে দেয়, যেখানে আপনি আপনার তারিখ/তারিখ সময়/সময়ের দিনের বিভিন্ন অংশের জন্য স্থানধারক অক্ষর ব্যবহার করেন। তারিখ ফর্ম্যাটার রেফারেন্স দেখুন, বিশেষ করে স্থানধারক এবং তারা কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য pattern বিভাগটি।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change">Click to change the format</button> <div id="chart_div"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Time of Day'); data.addColumn('number', 'Rating'); data.addRows([ [new Date(2015, 0, 1), 5], [new Date(2015, 0, 2), 7], [new Date(2015, 0, 3), 3], [new Date(2015, 0, 4), 1], [new Date(2015, 0, 5), 3], [new Date(2015, 0, 6), 4], [new Date(2015, 0, 7), 3], [new Date(2015, 0, 8), 4], [new Date(2015, 0, 9), 2], [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6], [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5], [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6], [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2], [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5], [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9], [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4], [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7], [new Date(2015, 1, 2), 9] ]); var options = { title: 'Rate the Day on a Scale of 1 to 10', width: 900, height: 500, hAxis: { format: 'M/d/yy', gridlines: {count: 15} }, vAxis: { gridlines: {color: 'none'}, minValue: 0 } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); var button = document.getElementById('change'); button.onclick = function () { // If the format option matches, change it to the new option, // if not, reset it to the original format. options.hAxis.format === 'M/d/yy' ? options.hAxis.format = 'MMM dd, yyyy' : options.hAxis.format = 'M/d/yy'; chart.draw(data, options); }; } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change">Click to change the format</button> <div id="chart_div"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Time of Day'); data.addColumn('number', 'Rating'); data.addRows([ [new Date(2015, 0, 1), 5], [new Date(2015, 0, 2), 7], [new Date(2015, 0, 3), 3], [new Date(2015, 0, 4), 1], [new Date(2015, 0, 5), 3], [new Date(2015, 0, 6), 4], [new Date(2015, 0, 7), 3], [new Date(2015, 0, 8), 4], [new Date(2015, 0, 9), 2], [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6], [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5], [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6], [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2], [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5], [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9], [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4], [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7], [new Date(2015, 1, 2), 9] ]); var options = { title: 'Rate the Day on a Scale of 1 to 10', width: 900, height: 500, hAxis: { format: 'M/d/yy', gridlines: {count: 15} }, vAxis: { gridlines: {color: 'none'}, minValue: 0 } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); var button = document.getElementById('change'); button.onclick = function () { // If the format option matches, change it to the new option, // if not, reset it to the original format. options.hAxis.format === 'M/d/yy' ? options.hAxis.format = 'MMM dd, yyyy' : options.hAxis.format = 'M/d/yy'; chart.draw(data, options); }; }
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Time of Day');
        data.addColumn('number', 'Rating');

        data.addRows([
          [new Date(2015, 0, 1), 5],  [new Date(2015, 0, 2), 7],  [new Date(2015, 0, 3), 3],
          [new Date(2015, 0, 4), 1],  [new Date(2015, 0, 5), 3],  [new Date(2015, 0, 6), 4],
          [new Date(2015, 0, 7), 3],  [new Date(2015, 0, 8), 4],  [new Date(2015, 0, 9), 2],
          [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
          [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
          [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
          [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
          [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
          [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
          [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
          [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7],  [new Date(2015, 1, 2), 9]
        ]);


        var options = {
          title: 'Rate the Day on a Scale of 1 to 10',
          width: 900,
          height: 500,
          hAxis: {
            format: 'M/d/yy',
            gridlines: {count: 15}
          },
          vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
          }
        };

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

        chart.draw(data, options);

        var button = document.getElementById('change');

        button.onclick = function () {

          // If the format option matches, change it to the new option,
          // if not, reset it to the original format.
          options.hAxis.format === 'M/d/yy' ?
          options.hAxis.format = 'MMM dd, yyyy' :
          options.hAxis.format = 'M/d/yy';

          chart.draw(data, options);
        };
      }
  

আপনি উভয় অক্ষের জন্য gridlines এবং minorGridlines অধীনে একটি units বিকল্প অন্তর্ভুক্ত করে তারিখ এবং সময়ের মানগুলির নির্দিষ্ট ইউনিটগুলির জন্য ফর্ম্যাটিং নিয়মগুলিও প্রদান করতে পারেন৷ এই বিকল্পটি শুধুমাত্র ব্যবহার করা হবে যদি gridlines.count বিকল্পটি -1 সেট করা থাকে।

gridlines.units বিকল্পটি একটি অবজেক্ট, যেখানে আপনি গণনা করা গ্রিডলাইনের জন্য তারিখ/তারিখ সময়/টাইমঅফডে-এর বিভিন্ন দিকগুলির জন্য বিন্যাস নির্দিষ্ট করেন এবং আপনার চার্ট গ্রিডলাইন লেবেলের স্থানের সাথে মানানসই প্রথম বিন্যাসের উপর ভিত্তি করে গ্রিডলাইনগুলি গণনা করবে। আপনি বছর, মাস, দিন, ঘন্টা, মিনিট, সেকেন্ড এবং মিলিসেকেন্ডের জন্য বিন্যাস সেট করতে পারেন।

বিন্যাস বিকল্পটি স্ট্রিং বিন্যাসের একটি বিন্যাস গ্রহণ করে এবং একটি বিন্যাস লেবেল এলাকার সাথে ফিট না হওয়া পর্যন্ত সেগুলিকে ক্রমানুসারে ব্যবহার করবে। এই কারণে, দীর্ঘতম থেকে সংক্ষিপ্ততম পর্যন্ত বিন্যাসগুলি তালিকাভুক্ত করার সুপারিশ করা হয়। স্ট্রিং বিন্যাসগুলি পূর্বে উল্লিখিত তারিখ ফর্ম্যাটার রেফারেন্সের মতো একই নিদর্শন ব্যবহার করে।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change">Change View Window</button> <div id="chart_div"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('datetime', 'Time of Day'); data.addColumn('number', 'Motivation Level'); data.addRows([ [new Date(2015, 0, 1, 0), 5], [new Date(2015, 0, 1, 0, 30), 5.1], [new Date(2015, 0, 1, 1), 6.2], [new Date(2015, 0, 1, 2), 7], [new Date(2015, 0, 1, 3), 6.4], [new Date(2015, 0, 1, 4), 3], [new Date(2015, 0, 1, 5), 4], [new Date(2015, 0, 1, 6), 4.2], [new Date(2015, 0, 1, 7), 1], [new Date(2015, 0, 1, 8), 2.7], [new Date(2015, 0, 1, 9), 3.9], [new Date(2015, 0, 1, 10), 3.8], [new Date(2015, 0, 1, 11), 5], [new Date(2015, 0, 1, 12), 6.2], [new Date(2015, 0, 1, 13), 7.8], [new Date(2015, 0, 1, 14), 9.1], [new Date(2015, 0, 1, 15), 8], [new Date(2015, 0, 1, 16), 6.8], [new Date(2015, 0, 1, 17), 7.2], [new Date(2015, 0, 1, 18), 4], [new Date(2015, 0, 1, 19), 5.9], [new Date(2015, 0, 1, 20), 6.3], [new Date(2015, 0, 1, 21), 6], [new Date(2015, 0, 1, 22), 3], [new Date(2015, 0, 1, 23), 2.2], [new Date(2015, 0, 2, 0), 2.4], [new Date(2015, 0, 2, 1), 3.6], [new Date(2015, 0, 2, 2), 4], [new Date(2015, 0, 2, 3), 5.5], [new Date(2015, 0, 2, 4), 7.1], [new Date(2015, 0, 2, 5), 6], [new Date(2015, 0, 2, 6), 7.8], [new Date(2015, 0, 2, 7), 8.2], [new Date(2015, 0, 2, 8), 9], ]); var options = { width: 900, height: 500, legend: {position: 'none'}, enableInteractivity: false, chartArea: { width: '85%' }, hAxis: { viewWindow: { min: new Date(2014, 11, 31, 18), max: new Date(2015, 0, 3, 1) }, gridlines: { count: -1, units: { days: {format: ['MMM dd']}, hours: {format: ['HH:mm', 'ha']}, } }, minorGridlines: { units: { hours: {format: ['hh:mm:ss a', 'ha']}, minutes: {format: ['HH:mm a Z', ':mm']} } } } }; var chart = new google.visualization.LineChart( document.getElementById('chart_div')); chart.draw(data, options); var button = document.getElementById('change'); var isChanged = false; button.onclick = function () { if (!isChanged) { options.hAxis.viewWindow.min = new Date(2015, 0, 1); options.hAxis.viewWindow.max = new Date(2015, 0, 1, 3); isChanged = true; } else { options.hAxis.viewWindow.min = new Date(2014, 11, 31, 18), options.hAxis.viewWindow.max = new Date(2015, 0, 3, 1) isChanged = false; } chart.draw(data, options); }; } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change">Change View Window</button> <div id="chart_div"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('datetime', 'Time of Day'); data.addColumn('number', 'Motivation Level'); data.addRows([ [new Date(2015, 0, 1, 0), 5], [new Date(2015, 0, 1, 0, 30), 5.1], [new Date(2015, 0, 1, 1), 6.2], [new Date(2015, 0, 1, 2), 7], [new Date(2015, 0, 1, 3), 6.4], [new Date(2015, 0, 1, 4), 3], [new Date(2015, 0, 1, 5), 4], [new Date(2015, 0, 1, 6), 4.2], [new Date(2015, 0, 1, 7), 1], [new Date(2015, 0, 1, 8), 2.7], [new Date(2015, 0, 1, 9), 3.9], [new Date(2015, 0, 1, 10), 3.8], [new Date(2015, 0, 1, 11), 5], [new Date(2015, 0, 1, 12), 6.2], [new Date(2015, 0, 1, 13), 7.8], [new Date(2015, 0, 1, 14), 9.1], [new Date(2015, 0, 1, 15), 8], [new Date(2015, 0, 1, 16), 6.8], [new Date(2015, 0, 1, 17), 7.2], [new Date(2015, 0, 1, 18), 4], [new Date(2015, 0, 1, 19), 5.9], [new Date(2015, 0, 1, 20), 6.3], [new Date(2015, 0, 1, 21), 6], [new Date(2015, 0, 1, 22), 3], [new Date(2015, 0, 1, 23), 2.2], [new Date(2015, 0, 2, 0), 2.4], [new Date(2015, 0, 2, 1), 3.6], [new Date(2015, 0, 2, 2), 4], [new Date(2015, 0, 2, 3), 5.5], [new Date(2015, 0, 2, 4), 7.1], [new Date(2015, 0, 2, 5), 6], [new Date(2015, 0, 2, 6), 7.8], [new Date(2015, 0, 2, 7), 8.2], [new Date(2015, 0, 2, 8), 9], ]); var options = { width: 900, height: 500, legend: {position: 'none'}, enableInteractivity: false, chartArea: { width: '85%' }, hAxis: { viewWindow: { min: new Date(2014, 11, 31, 18), max: new Date(2015, 0, 3, 1) }, gridlines: { count: -1, units: { days: {format: ['MMM dd']}, hours: {format: ['HH:mm', 'ha']}, } }, minorGridlines: { units: { hours: {format: ['hh:mm:ss a', 'ha']}, minutes: {format: ['HH:mm a Z', ':mm']} } } } }; var chart = new google.visualization.LineChart( document.getElementById('chart_div')); chart.draw(data, options); var button = document.getElementById('change'); var isChanged = false; button.onclick = function () { if (!isChanged) { options.hAxis.viewWindow.min = new Date(2015, 0, 1); options.hAxis.viewWindow.max = new Date(2015, 0, 1, 3); isChanged = true; } else { options.hAxis.viewWindow.min = new Date(2014, 11, 31, 18), options.hAxis.viewWindow.max = new Date(2015, 0, 3, 1) isChanged = false; } chart.draw(data, options); }; }

উল্লেখ্য যে উপরের চার্টে, ভিউ উইন্ডো পরিবর্তন করার সময়, hours ইউনিটের বিন্যাস পরিবর্তিত হয়, যে ঘন্টাগুলি ছোট থেকে বড় গ্রিডলাইনে চলে যায় এবং বিকল্পগুলির বিন্যাস তাদের সাথে পরিবর্তিত হয়। এছাড়াও, মনে রাখবেন যে মাইনরগ্রিডলাইনগুলি দ্বিতীয়, সংক্ষিপ্ত ফর্ম্যাটগুলি ব্যবহার করছে, কারণ প্রথম ফর্ম্যাটগুলি প্রতিটি উদাহরণে স্থানের সাথে খাপ খায় না৷

        hAxis: {
          viewWindow: {
            min: new Date(2014, 11, 31, 18),
            max: new Date(2015, 0, 3, 1)
          },
          gridlines: {
            count: -1,
            units: {
              days: {format: ['MMM dd']},
              hours: {format: ['HH:mm', 'ha']},
            }
          },
          minorGridlines: {
            units: {
              hours: {format: ['hh:mm:ss a', 'ha']},
              minutes: {format: ['HH:mm a Z', ':mm']}
            }
          }
        }
  

জাভাস্ক্রিপ্ট তারিখ সম্পর্কে আরো তথ্য

আপনি যদি JavaScript Date() অবজেক্ট সম্পর্কে আরও জানতে চান, Mozilla Developer Network হল একটি বড় সম্পদ। সেখানে আপনি জাভাস্ক্রিপ্ট তারিখ অবজেক্ট সম্পর্কে সব জানতে পারবেন।