Google stacked bar chart with date on x and time on y

Question

Im trying to create a Google stacked bar chart with time on the y-axis and date on x - axis, with no success.

Ex: for 2012-05-01 i want a bar that goes from 00:00 to 24:00.

I have been able to create a simple stacked bar chart like this.

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

What i'm trying to accomplish is something like this

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],
}

The result of this would be two bars. At 2015-01-01 with two events one starting from 13:00 to 16:00 (in the y-axis) and on top of that another from 16:00 to 19:00. On 2015-01-02 there would also be one event from 1:00 to 5:00.

Am I able to do this with Google Bar charts?

Appreciate any help I can get.

Answer 1

there are a few problems in your code, you can check the browser's console for these errors

1.
the addRows method takes an array [] of rows,
and should be called with parenthesis () not curly braces {}

within the array, there should be another array for each row
the rows from the example are not complete and are missing the final bracket ]
['2015-01-01','Funtime',[13,0,0],[16,0,0],
should be
['2015-01-01','Funtime',[13,0,0],[16,0,0]],

2.
the data format does not allow a string column, after the first column
'Funtime' will have to go...

3.
if using type 'date' for the first column, then need actual date objects in the data
if --> data.addColumn('date', 'Date');
use --> [new Date('01/01/2016'), [13,0,0], [3,0,0]],

or a 'string' column can be used for the first column as well
if --> data.addColumn('string', 'Date');
use --> ['2015-01-01', [13,0,0], [3,0,0]],

4.
notice the date format used in this example --> '01/01/2016'
using '2016-01-01' with actual dates will result in problems such as these...
Google Charts Table displaying incorrect date
How do I align date and values to gridlines in Google Chart?

5.
finally, if you want time on the y-axis and date on x - axis
use ColumnChart instead of BarChart

see following working snippet...

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>