Tarihler ve Saatler

  1. Genel bakış
  2. Tarih Oluşturucuyu Kullanan Tarihler ve Saatler
  3. Tarihler, Saatler ve Saat Dilimleri
  4. Tarih Dizesi Gösteriminin Kullanıldığı Tarihler ve Saatler
  5. Timeofday ile çalışma
  6. Ekseni, Kılavuz Çizgisi ve Kene Etiketlerini Biçimlendirme
  7. JavaScript Tarihleri Hakkında Daha Fazla Bilgi

Genel bakış

date ve datetime DataTable sütunu veri türleri, yerleşik JavaScript Date sınıfını kullanır.

Önemli: JavaScript Tarih nesnelerinde, aylar sıfırdan başlayarak dizine eklenir ve on bire kadar ilerler. Ocak 0, Aralık 11'dir.

Tarih Oluşturucu Kullanarak Tarih ve Saatler

Tarih Oluşturucunun Kullanıldığı Tarihler

Yeni bir Date nesnesi oluşturmak için tarihin bileşenlerini belirten bağımsız değişkenlerle new anahtar kelimesini kullanarak Date() oluşturucuyu çağırırsınız. Bu bağımsız değişkenler, tarihinizin farklı özelliklerine karşılık gelen birkaç sayı biçimindedir. 

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

date veri türüyle Tarih oluşturucuyu kullanırken yalnızca Yıl, Ay ve Gün değerlerini belirtmeniz gerekir.

Tarih oluşturucu şu biçimde de olabilir: new Date(Milliseconds). Burada Milisaniye, 1 Ocak 1970 00:00:00 UTC ile istenen tarihin milisaniye cinsinden mesafesidir. Bu tarihten önceki tarihler ve saatler için negatif bir milisaniye sayısı verilir.

Tarih oluşturucuyu kullanmak, DataTable'ınızı addColumn(), addRow() ve addRows() yöntemlerinin yanı sıra arrayToDataTable() yöntemini kullanarak manuel olarak oluştururken kullanışlıdır. Ancak verileri belirtmek için JSON kullanılıyorsa dize gösteriminin kullanılması gerekir.

JavaScript Tarih oluşturucusu, tarihin dize gösterimini bağımsız değişken olarak da kabul edebilir. Bu dize birkaç farklı biçimde olabilir. En güvenilir formlar RFC 2822 spesifikasyonu veya ISO 8601 spesifikasyonuna uygundur. Bunlar için kullanılan biçimler şunlardır:

  • RFC 2822 — 'MMM DD, YYYY' veya 'DD MMM, YYYY' (Örnek: new Date('Jan 1, 2015') veya new Date('1 Jan, 2015'))
  • ISO 8601 — 'YYYY-MM-DD' (Örnek: new Date('2015-01-01'))

Uyarı: Tarih oluşturucudaki dize gösterimi, farklı tarayıcılar ve farklı tarayıcı sürümleri tarafından farklı şekilde ayrıştırılabilir. Bu nedenle, aynı dize için farklı tarihler döndürülür. Bu nedenle, dizelerin Date oluşturucuya geçirilmesi önerilmez. Bunun yerine, Tarih oluşturucunun bağımsız değişkenleri için yalnızca sayı kullanılması önerilir.

Aşağıdaki zaman çizelgesi, 2000 yılından bu yana her NFL sezonunun Super Bowl şampiyonunu göstermektedir.


Aşağıda, bu zaman çizelgesini oluşturmak için gereken kod verilmiştir. new Date() oluşturucularının kullanımına ve her tarih için verilen sayıları, daha önce belirtildiği gibi 0 tabanlı ayları kullanarak not edin. 

    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);
    }

Tarih Oluşturucuyu Kullanan Tarih Saatleri

DataTable datetime sütun veri türü, date veri türüyle aynı Tarih oluşturucuyu kullanır, ancak artık zamanı doldurmak için tüm bağımsız değişkenleri kullanır.

Alternatif olarak, datetime öğesinin dize gösterimi de Tarih oluşturucuya geçirilebilir. datetime dizesinin gösterimi, saat, dakika ve saniye değerlerinin yanı sıra 4 haneli saat dilimi farkının da eklenmesinden oluşur (ör. Pasifik Standart Saati (PST) -0800'dür). RFC 2822 spesifikasyonu için saat ve saat dilimi, tarih ile saat ve saat ile saat dilimi arasındaki boşluklarla eklenir. ISO 8601 spesifikasyonunda boşluk yoktur. Bunun yerine, zaman bileşenini belirtmek için tarihin ardından büyük harfle "T" gelir. Ayrıca saat ile saat dilimi farkı arasında boşluk bulunmaz. 6 Aralık 2014 saat 10:30 (PST) için tam datetime tarih dizesi şöyle olur:

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

Uyarı: Yine dize gösterimi, farklı tarayıcılar/sürümler tarafından farklı şekilde ayrıştırılabilir. Özellikle de saat ve saat dilimleriyle çalışırken tarih saatin UTC (GMT) saat dilimiyle döndürülmesi veya yerel saate göre uzaklaştırılması ve döndürülmesi arasında farklılıklar olacaktır. Tarih ve saat dizelerinin kullanılmasının önerilmemesinin diğer bir nedeni de budur.

Aşağıdaki zaman çizelgesi, tarih ve saat veri türünü kullanarak ortalama bir günün dökümünü verir. 

    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);
    }

Tarihler, Saatler ve Saat Dilimleri

date veya datetime için Tarih oluşturucusu kullanıldığında, kullanıcının tarayıcısı tarafından ayarlanan saat diliminde istenen tarih veya tarih saat döndürülür. Tarih nesnenizi belirli bir saat dilimine ayarlamanın birkaç yolu vardır. İlk olarak, Google Charts, timeZone belirtebileceğiniz bir Tarih Biçimlendirici sağlar. Bu işlem, Veri Tablonuzdaki date ve datetime değerlerinizin her biri için biçimlendirilmiş bir değer sağlar. Ayrıca new Date() oluşturucusuna bağımsız değişken olarak bir dize iletebilir veya bağımsız değişkenlerinizi Date.UTC() yönteminde sarmalayabilirsiniz. Örneğin: 

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

Bu işlem, UTC (GMT) saat diliminde belirtilen tarih ve saate bir Tarih nesnesi ayarlar. Buradan saat dilimi için istediğiniz ofseti hesaplayıp tarih ve saatleri istediğiniz gibi ayarlayabilirsiniz.

Tarih Dizesi Gösteriminin Kullanıldığı Tarihler ve Saatler

DataTable'ınızı derlemek için JavaScript DataTable nesne değişmez değeri notasyonunu kullanarak verileri serileştirirken new Date() oluşturucusu kullanılamaz. Bunun yerine, Google Charts, Veri Tablosu oluştururken date veya datetime verilerinizin serileştirilmesine ve doğru şekilde ayrıştırılmasına olanak tanıyan bir Tarih dizesi gösterimi sağlar. Bu Tarih dizesi biçimi, new anahtar kelimesini atlayıp kalan ifadeyi tırnak işaretleri içine alır: 

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

Önemli: new Date() oluşturucusu kullanıldığında olduğu gibi, bu Tarih Dizesi Gösterimi kullanılırken aylar sıfırdan başlayarak dizine eklenir (Ocak 0. ay, Aralık 11. aydır).

Aşağıda, daha önceki Super Bowl zaman çizelgesinin aynısı verilmiştir ancak şimdi JavaScript nesne değişmez değeri gösterimi ve Tarih dizesi biçimi kullanılıyor. 

    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);
    }

Bu biçim, sütun etiketlerinin belirtildiği ilk dizide gerekli sütunun type: 'date' veya type: 'datetime' olduğunu belirtmeniz koşuluyla arrayToDataTable() yönteminde de kullanılabilir. 

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 ile Çalışma

DataTable timeofday sütun veri türü, sırasıyla saat, dakika, saniye ve isteğe bağlı olarak milisaniye olacak şekilde 3 veya 4 sayıdan oluşan bir dizi alır. Değerlerin belirli bir tarihe özel olmaması nedeniyle timeofday kullanımı, date ve datetime kullanımından farklıdır. date ve datetime ise her zaman bir tarih belirtir.

Örneğin, 08:30 saati [8, 30, 0, 0] olur. 4. değer isteğe bağlıdır ([8, 30, 0], aynı timeofday değerini verir). 

    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));
    }

Ekseni, Kılavuz Çizgisi ve Kene Etiketleri

Tarihler, tarih ve saat ile çalışırken eksen etiketlerini, kılavuz çizgisi etiketlerini veya işaret etiketlerini belirli bir şekilde biçimlendirmek isteyebilirsiniz. Bunu birkaç yolla başarabilirsiniz.

İlk olarak, hAxis.format veya vAxis.format seçeneğini kullanabilirsiniz. Bu seçenek, gridlines.count seçeneği kullanılmadığında geçerli olur. Bu durumda, grafikte varsayılan olarak 5 sayısı ve -1'den farklı bir sayı değeri belirlenir. Böylece tarih/tarih/saat/saatinizin farklı kısımları için yer tutucu harfleri kullandığınız bir biçim dizesi belirtebilirsiniz. Yer tutucular ve nasıl çalıştıkları hakkında daha fazla bilgi için tarih biçimlendirici referansına, özellikle de pattern bölümüne bakın. 

      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);
        };
      }

Her iki eksen için de gridlines ve minorGridlines altına bir units seçeneği ekleyerek belirli tarih ve saat değeri birimleri için biçimlendirme kuralları da sağlayabilirsiniz. Bu seçenek yalnızca gridlines.count seçeneği -1 olarak ayarlanmışsa kullanılır.

gridlines.units seçeneği bir nesnedir. Burada, hesaplanan kılavuz çizgisi için tarih/saat/günün farklı yönlerine ilişkin biçimi belirtirsiniz ve grafiğiniz, kılavuz çizgileri etiketindeki alana sığan ilk biçime göre kılavuz çizgilerini hesaplar. Biçimleri yıl, ay, gün, saat, dakika, saniye ve milisaniye şeklinde ayarlayabilirsiniz.

Biçim seçeneği, bir dizi dize biçimini kabul eder ve biçim, etiket alanına sığana kadar bunları sırayla kullanır. Bu nedenle, biçimleri en uzundan en kısaya doğru listelemeniz önerilir. Dize biçimleri, daha önce bahsedilen tarih biçimlendirici referansıyla aynı kalıpları kullanır.


Yukarıdaki grafikte, görünüm penceresi değiştirildiğinde, saat küçükten büyük kılavuz çizgilerine geçiş yapılan saatlere göre hours biriminin biçimi de değişir. Seçeneklerdeki biçim de bunlarla birlikte değişir. Ayrıca, ilk biçimler her örnekte alana sığmadığından, ikincil kılavuz çizgilerinin ikinci ve daha kısa biçimleri kullandığını unutmayın. 

        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 Tarihleri Hakkında Daha Fazla Bilgi

JavaScript Date() nesnesi hakkında daha fazla bilgi edinmek isterseniz Mozilla Geliştirici Ağı mükemmel bir kaynaktır. Burada JavaScript Date nesneleri