Bu sayfa, Cloud Translation API ile çevrilmiştir.

Zaman çizelgeleri

Genel bakış
Basit bir örnek
Çubukları etiketleme
Gelişmiş örnek
Çubukları tek bir satıra yerleştirme
Yazı tiplerini değiştirme
Renkleri kontrol etme
Çakışan kılavuz çizgileri
İpuçlarını özelleştirme
Yükleniyor
Veri biçimi
Yapılandırma seçenekleri
Yöntemler
Etkinlikler
Veri politikası

Genel bakış

Zaman çizelgesi, bir kaynak grubunun zaman içinde nasıl kullanıldığını gösteren bir grafiktir. Bir yazılım projesi yönetiyorsanız ve kimin neyi, ne zaman yaptığını göstermek istiyorsanız ya da bir konferans düzenliyorsanız ve toplantı odaları planlamanız gerekiyorsa zaman çizelgesi çoğu zaman makul bir görselleştirme seçimidir. Popüler zaman çizelgesi türlerinden biri de Gantt şemasıdır.

Not: JavaScript Date nesnelerinde, aylar sıfırdan başlayarak dizine eklenir ve on bire kadar ilerler. Ocak 0, Aralık 11'dir. Zaman çizelgenizde bir ay yanlışlık görüyorsanız nedeni büyük olasılıkla budur. Daha fazla bilgi için Tarihler ve Saatler sayfasını inceleyin.

Basit bir örnek

Amerikan başkanlarının ne zaman kendi şartlarını yerine getirdiğini planlamak istediğinizi düşünelim. Burada "kaynaklar" başkanlardır ve her başkanın görev süresini bar olarak belirleyebiliriz.

Fareyle bir çubuğun üzerine geldiğinizde daha ayrıntılı bilgileri içeren bir ipucu gösterilir.

timeline paketini yükledikten ve sayfa oluşturulduğunda grafiği çizmek için bir geri çağırma tanımladıktan sonra, drawChart() yöntemi bir google.visualization.Timeline() örneği oluşturur ve ardından dataTable yöntemini her başkan için bir satırla doldurur.

dataTable içindeki ilk sütun başkanın adı, ikinci ve üçüncü sütunlar başlangıç ve bitiş zamanlarını gösterir. Bunlar, JavaScript Date türündedir ancak düz sayılar da olabilir.

Son olarak, grafiğin draw() yöntemini çağırırız. Bu yöntemi, drawChart() öğesinin ilk satırında container tanımlandığında kullanılan aynı tanımlayıcı (timeline) ile bir div içinde görüntüler.

<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 Grafikleri zaman çizelgeleri özelleştirilebilirdir. Aşağıdaki örneklerde, zaman çizelgelerinizin görünümünü uyarlamanın bazı yaygın yollarını göstereceğiz.

Çubukları etiketleme

Satır etiketlerine (yukarıda "Washington", "Adams", "Cefferson") ek olarak tek tek çubukları etiketleyebilirsiniz. Burada, satır etiketlerini basit sayılarla değiştiriyoruz ve her bir başkanın adını çubuğunuza yerleştiriyoruz.

Bu kodda verilerimize, çubuk etiketlerinin yer alacağı yeni bir sütun ekledik: her başkanın tam adı. Bir zaman çizelgesinde dataTable dört sütun olduğunda, ilk sütun satır etiketi, ikincisi çubuk etiketi ve üçüncü ve dördüncü sütun başlangıç ve bitiş olarak yorumlanır.

<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>

Yukarıdaki yeni satır etiketlerimiz çok bilgilendirici değildir. Bu nedenle bu etiketleri zaman çizelgesi showRowLabels seçeneğiyle kaldıralım.

Varsayılan olarak showRowLabels, true şeklindedir. Değerin false olarak ayarlanması, satır etiketlerini kaldırır:

<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>

Gelişmiş örnek

Zaman çizelgemizi daha karmaşık hale getirmek için grafiğimize başkan yardımcılarını ve devlet sekreterlerini ekleyelim. John Adams başkan olmadan önce başkan yardımcısı, Thomas Jefferson ise dışişleri bakanı, başkan yardımcısı ve son olarak da başkandı.

Zaman çizelgelerinde bir kaynak birden çok satırda görünse bile aynı renge sahip olur. Bu nedenle, aşağıdaki grafikte her kişi tutarlı bir renkle gösterilmektedir.

Bazı devlet sekreterleri görev süresi çok kısa olduğundan bu şema etiketleme için iyi bir testtir. Bir etiket çubuk için çok büyükse çubuğun boyutuna bağlı olarak kısaltılır veya kaldırılır. Kullanıcılar, ipucu bilgilerini almak için fareyle çubuğun üzerine gelebilirler.

Zaman çizelgesi, satırları sıraya alır (başkan yardımcısının dışişleri bakanının üstünde) çünkü bu satırlar aşağıdaki kodda görünür. Bununla birlikte, çubukların düzeni yalnızca başlangıç ve bitiş saatlerine göre belirlenir. Bu nedenle, dataTable içinde iki devlet başkanının veya iki başkanın yer değişikliğinin grafik üzerinde herhangi bir etkisi yoktur.

<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>

Çubukları tek bir satıra yerleştirme

Papaların aksine aynı anda yalnızca bir ABD başkanı olabilir. Bu nedenle, tüm satırlarımızı "Başkan" olarak etiketlersek zaman çizelgesi, daha net bir sunum için ilk grafiğimizin üç satırını tek bir satırda birleştirir. Bu davranışı groupByRowLabel seçeneğiyle kontrol edebilirsiniz.

Varsayılan davranış şöyledir:

Şimdi groupByRowLabel değerini false olarak ayarlayıp bir satırı üçe bölelim:

Gruplandırmayı devre dışı bırakacak kod:

<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>

Renkleri kontrol etme

Google Charts, varsayılan olarak estetik ve okunabilirlik (görme engelli kullanıcılar dahil) için optimize edilmiş renkler seçer. Varsayılan davranışı colorByRowLabel, singleColor, backgroundColor ve colors seçenekleriyle uyarlayabilirsiniz.

colorByRowLabel seçeneği, aynı satırdaki tüm çubukları aynı renklendirir. Çubuklarınız arasında boşluklar olduğunda bu iyi bir seçim olabilir.

colorByRowLabel, varsayılan olarak false değerine ayarlanıyor. Burada bunu geçersiz kılıp true olarak ayarlıyoruz.

<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>

Hangi satırda olduklarına bakılmaksızın tüm çubukların aynı renkte olmasını istiyorsanız singleColor seçeneğini kullanın:

Aşağıdaki kodda singleColor, tüm çubukları açık yeşil renklendirmek için onaltılık bir değere ayarlanmıştır:

<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 seçeneğiyle satırların arka plan rengini kontrol edebilirsiniz:

backgroundColor, onaltılık değer olarak belirtilir. Burada, parçaları bir konferansta göstermek için bu cihazı colorByRowLabel ile eşleştiriyoruz:

<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>

Ardından, arka plan rengini satır dizinine göre alternatif veya alternatif olmayan olarak ayarlamak için alternatingRowStyle seçeneğini kullanın (etkin 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>

Çubukların renklerini tek tek kontrol etmek istiyorsanız colors seçeneğini kullanın:

colors, çubuklara sırayla uygulanan bir onaltılık değer dizisi alır:

<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>

Grafiğiniz için listelenenden daha fazla renk gerekiyorsa grafik, singleColor listesindeki ilk renge ayarlanmış gibi davranır. (Bu sadece zaman çizelgeleri için değil, tüm Google Grafikleri için geçerlidir.)

Bağımsız çubukların renklerini kontrol etmenin bir başka yolu da stil rolüne sahip bir sütun kullanmaktır.

Stil sütununa eklenecek ve doldurulacak kod:

<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>

Yazı tiplerini değiştirme

rowLabelStyle ile her satırdaki etiketler ve her çubuktaki barLabelStyle etiketi için yazı tipini ve yazı tipini seçebilirsiniz. Her ikisi de aşağıda gösterilmiştir.

Not: Kullanıcılarınızın tarayıcılarının oluşturabileceği yazı tiplerini seçtiğinizden emin olun.

<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 metninin rengini ayarlayamazsınız.

Çakışan kılavuz çizgileri

Google Charts, zaman çizelgesi kılavuz çizgilerinin anlaşılmaz olması için çubuk uç noktalarında küçük düzenlemeler yapar. Bu davranışı önlemek için avoidOverlappingGridLines seçeneğini false olarak ayarlayın.

Bu etkiyi göstermek için ilki örtüşen, ikincisi ise olmayan iki örnek örneğini inceleyebilirsiniz.

Kılavuz çizgileriyle çakışan kod şu şekildedir:

  <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>

İpuçlarını özelleştirme

Beş sütunlu bir veri tablosuna ipucu sütunu ekleyerek kullanıcıların zaman çizelgesi çubuklarının üzerine geldiklerinde ne göreceğini özelleştirebilirsiniz. Varsayılan olmayan ipuçları sağlamak için veri tablonuzun her satırında beş sütunun tamamı (satır etiketi, çubuk etiketi, ipucu, başlangıç ve bitiş) bulunmalıdır:

Bir çubuğun üzerine geldiğinizde, üçüncü sütunda tanımlanan metni içeren bir ipucu gösterilir. Bu grafikte, ipuçlarımızın üçüncü sütunda yer alması için ikinci sütunu model değerlere (burada null) ayarlamamız gerekiyor.

<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>

Yükleniyor

google.charts.load paketinin adı timeline:

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

Görselleştirmenin sınıf adı: google.visualization.Timeline:

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

Veri biçimi

Satırlar: Tablodaki her satır bir zaman çizelgesi çubuğunu temsil eder.

Sütunlar:

	Sütun 0	1. Sütun	2. Sütun	3. Sütun	4. Sütun
Amaç:	Satır etiketi	Çubuk etiketi (isteğe bağlı)	İpucu (isteğe bağlı)	Başlangıç	Sonlandır
Veri Türü:	dize	dize	dize	sayı veya tarih	sayı veya tarih
Rol:	veri	veri	ipucu	veri	veri

Yapılandırma seçenekleri

Ad
alternatingRowStyle	Grafiğin satır dizinine göre arka plan rengini değiştirip değiştirmeyeceği (ör. çift dizine eklenmiş satırların arka plan renginin daha koyu bir tonla tonlanıp renklendirilmediği). Yanlış değerine ayarlanırsa grafik arka planı tek tip renkte olur. Doğru değerine ayarlanırsa grafik arka planı, tonlamayla satır dizinine göre değişir. (Not: Aktif sürüm 51 ve sonraki sürümler) Tür: boole Varsayılan: true
avoidOverlappingGridLines	Görüntü öğelerinin (ör. bir zaman çizelgesindeki çubukların) ızgara çizgilerini engelleyip kaplamayacağı. False (yanlış) değerine ayarlanırsa ızgara çizgileri tamamen görüntülü öğelerle kaplanabilir. True (doğru) değerine ayarlanırsa görüntülü reklam öğeleri, kılavuz çizgilerinin görünür olmasını sağlamak için değiştirilebilir. Tür: boole Varsayılan: true
backgroundColor	Grafiğin ana alanı için arka plan rengi. Basit bir HTML renk dizesi (ör. `'red'` veya `'#00cc00'`) veya aşağıdaki özelliklere sahip bir nesne olabilir. Tür: dize veya nesne Varsayılan: 'white'
renkler	Grafik öğeleri için kullanılacak renkler. Her öğenin bir HTML renk dizesi olduğu bir dize dizisi. Örneğin: `colors:['red','#004411']`. Tür: Dize dizisi Varsayılan: varsayılan renkler
enableInteractivity	Grafiğin kullanıcı tabanlı etkinlikler yayınlaması veya kullanıcı etkileşimine tepki verip vermemesi. False (yanlış) değerine ayarlanırsa grafik, "select" ya da diğer etkileşime dayalı etkinlikleri bildirmez (ancak "hazır" veya hata etkinlikleri ayarlamaz) ve fareyle üzerine gelindiğinde görüntülenen metni görüntülemez veya kullanıcı girişine bağlı olarak başka bir şekilde değişmez. Tür: boole Varsayılan: true
fontName	Grafikteki tüm metinler için varsayılan yazı tipi yüzü. Belirli grafik öğelerine ait özellikleri kullanarak bunu geçersiz kılabilirsiniz. Tür: dize Varsayılan: "SFTP"
fontSize	Grafikteki tüm metnin piksel cinsinden varsayılan yazı tipi boyutu. Belirli grafik öğelerine ait özellikleri kullanarak bunu geçersiz kılabilirsiniz. Tür: numara Varsayılan: auto
forceIFrame	Grafiği bir satır içi çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın. Tüm IE8 grafikleri, iç çerçeveler kullanılarak çizilir.) Tür: boole Varsayılan: false
yükseklik	Grafiğin piksel cinsinden yüksekliği. Tür: numara Varsayılan: kapsayıcı öğenin yüksekliği
timeline.barLabelStyle	Çubuk etiketi metin stilini belirten bir nesne. Şu biçimdedir: {fontName: <string>, fontSize: <string>} Ayrıca bu tablodaki `fontName` ve `fontSize` verilerine de bakın. Tür: nesne Varsayılan: null
timeline.colorByRowLabel	Doğru değerine ayarlanırsa satırdaki her çubuğu aynı renklendirir. Varsayılan olarak çubuk etiketi başına bir renk kullanılır. Tür: boole Varsayılan: false
timeline.groupByRowLabel	Yanlış değerine ayarlanırsa her `dataTable` girişi için bir satır oluşturur. Varsayılan olarak, aynı satır etiketine sahip çubuklar tek bir satırda toplanır. Tür: boole Varsayılan: true
timeline.rowLabelStyle	Satır etiketi metin stilini belirten bir nesne. Şu biçimdedir: {color: <string>, fontName: <string>, fontSize: <string>} `color`, `'red'` veya `'#00cc00'` gibi herhangi bir HTML renk dizesi olabilir. Ayrıca bu tablodaki `fontName` ve `fontSize` öğelerini de inceleyin. Tür: nesne Varsayılan: null
timeline.showBarLabels	Yanlış değerine ayarlanırsa çubuk etiketleri atlanır. Varsayılan olarak bu tür reklamlar gösterilir. Tür: boole Varsayılan: true
timeline.showRowLabels	Yanlış değerine ayarlanırsa satır etiketleri atlanır. Varsayılan olarak bu tür reklamlar gösterilir. Tür: boole Varsayılan: true
timeline.singleColor	Renkler aynı. Onaltılık değer olarak belirtilir (ör. "#8d8"). Tür: dize Varsayılan: null
tooltip.isHtml	SVG ile oluşturulmuş (HTML tarafından oluşturulan) ipuçlarını kullanmak için `false` olarak ayarlayın. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın. Not: HTML ipucu içeriğinin ipucu sütunu veri rolü aracılığıyla özelleştirilmesi balon grafik görselleştirmesi tarafından desteklenmez. Tür: boole Varsayılan: true
tooltip.trigger	İpucunun görüntülenmesine neden olan kullanıcı etkileşimi: "Odak": Kullanıcı, öğenin üzerine geldiğinde ipucu gösterilir. "none" (hiçbiri): İpucu gösterilmez. Tür: dize Varsayılan: 'focus'
genişlik	Grafiğin piksel cinsinden genişliği. Tür: numara Varsayılan: kapsayıcı öğenin genişliği

Yöntemler

Yöntem
`draw(data, options)`	Grafiği çizer. Grafik, yalnızca `ready` etkinliği etkinleştikten sonra başka yöntem çağrılarını kabul eder. `Extended description`. Return Type (Dönüş Türü): yok
`clearChart()`	Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Return Type (Dönüş Türü): yok
`getSelection()`	Seçilen grafik varlıklarından oluşan bir dizi döndürür. Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. `Extended description` . Dönüş Türü: Seçim öğeleri dizisi

Etkinlikler

Ad
`error`	Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. Özellikler: kimlik, mesaj
`onmouseover`	Kullanıcı fareyle bir görsel öğenin üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Bir çubuk, veri tablosundaki bir hücreyle, bir sütuna açıklama girişiyle (satır dizini boştur) ve kategoriyle satırla (sütun dizini null) ilişkilendirilir. Özellikler: satır, sütun
`onmouseout`	Kullanıcı faresini görsel bir öğeden uzaklaştırdığında tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Bir çubuk, veri tablosundaki bir hücreyle, bir sütuna açıklama girişiyle (satır dizini boştur) ve kategoriyle satırla (sütun dizini null) ilişkilendirilir. Özellikler: satır, sütun
`ready`	Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak isterseniz `draw` yöntemini çağırmadan önce bu etkinlik için bir işleyici ayarlamalı ve bunları yalnızca etkinlik tetiklendikten sonra çağırmalısınız. Özellikler: yok
`select`	Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Neyin seçildiğini öğrenmek için `getSelection()` numaralı telefonu arayın. Özellikler: yok

Veri politikası

Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.