Google stapelte Balkendiagramm mit Datum auf x und Zeit auf y

Question

Ich versuche, ein Google stapelten Balkendiagramm mit Zeit auf der y-Achse und Datum auf x-Achse, ohne Erfolg zu schaffen.

Bsp .: für 2012-05-01 Ich möchte eine Bar, die von 00:00 bis 24:00 geht.

Ich konnte ein einfaches gestapeltes Balkendiagramm wie dieses erstellen.

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'], 
    ['2003', 1336060, 400361, 1001582, 997974], 
    ['2004', 1538156, 366849, 1119450, 941795], 
    ['2005', 1576579, 440514, 993360, 930593], 
    ['2006', 1600652, 434552, 1004163, 897127], 
    ['2007', 1968113, 393032, 979198, 1080887], 
    ['2008', 1901067, 517206, 916965, 1056036] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Yearly Coffee Consumption by Country", 
      width:600, height:400, 
      vAxis: {title: "Year"}, 
      hAxis: {title: "Cups"}, 
      isStacked: true} 
    ); 
} 

Was ich versuche zu erreichen ist so etwas wie dieses

var data = new google.visualization.DataTable(); 
data.addColumn('date', 'Date'); 
data.addColumn('string', 'Name'); 
data.addColumn('timeofday','Starttime'); 
data.addColumn('timeofday','Endtime'); 

data.addRows{ 
['2015-01-01','Funtime',[13,0,0],[16,0,0], 
['2015-01-01','Boringtime',[16,0,0],[19,0,0], 
['2015-01-02','Sleeptime',[1,0,0],[5,0,0], 
} 

Das Ergebnis dieser zwei Bars wäre. Am 01.01.2015 mit zwei Veranstaltungen von 13:00 bis 16:00 Uhr (in der y-Achse) und von 16:00 bis 19:00 Uhr. Am 02.01.2015 gab es auch eine Veranstaltung von 1:00 bis 5:00 Uhr.

Kann ich dies mit Google Balkendiagrammen tun?

Ich schätze jede Hilfe, die ich bekommen kann.

Answer 1

es ein paar Probleme in Ihrem Code sind, können Sie die Konsole des Browsers für diese Fehler überprüfen

1.
die addRows Methode ein Array [] der Zeilen nimmt,
und sollte mit Klammern genannt werden () nicht geschweifte Klammern {}

innerhalb der Anordnung, sollte es aus dem Beispiel für jede Zeile
die Reihen ein anderes Array sind nicht vollständig und sind die letzte Klammer ]
['2015-01-01','Funtime',[13,0,0],[16,0,0],
fehlt
['2015-01-01','Funtime',[13,0,0],[16,0,0]],

2.
die data format keine string Spalte, nach der ersten Spalte sein sollte
'Funtime' muss gehen lässt ..

3.
wenn Typ 'date' für die erste Spalte, dann aktuelle Datum Objekte in den Daten benötigen
wenn ->data.addColumn('date', 'Date');
Einsatz ->[new Date('01/01/2016'), [13,0,0], [3,0,0]],

oder eine 'string' Spalte kann auch für die erste Spalte verwendet werden
wenn ->data.addColumn('string', 'Date');
Einsatz ->['2015-01-01', [13,0,0], [3,0,0]],

4.
Mitteilung der Das in diesem Beispiel verwendete Datumsformat ->'01/01/2016'
mit '2016-01-01' mit aktuellen Datumsangaben führt zu Problemen wie diesen ...
Google Charts Table displaying incorrect date
How do I align date and values to gridlines in Google Chart?

5.
schließlich, wenn Sie wollen Zeit auf der y-Achse und das Datum auf x - Achse
Verwendung ColumnChart statt BarChart

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('timeofday','Starttime'); 
 
    data.addColumn('timeofday','Endtime'); 
 
    data.addRows([ 
 
     [new Date('01/01/2016'), [13,0,0], [3,0,0]], 
 
     [new Date('01/02/2016'), [16,0,0], [3,0,0]], 
 
     [new Date('01/03/2016'), [1,0,0], [4,0,0]] 
 
    ]); 
 

 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
 
    draw(data, { 
 
     height: 600, 
 
     isStacked: true, 
 
     vAxis: { 
 
     format: 'HH:mm', 
 
     viewWindow: { 
 
      min: [0,0,0], 
 
      max: [24,0,0] 
 
     } 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="visualization"></div>