Stacked BarChart with Date HAxis

[Jeremiah Mitchell]

All -

I'm trying to create a gantt type chart that uses dates but the hAxis is going backwards to 1950 and forwards to 2125.

Here is the sample:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('date', 'start');
  data.addColumn('date', '1');
  data.addColumn('date', '2');
  data.addColumn('date', '3');
  data.addColumn('date', '4');

  data.addRow(['First', new Date(2013, 1, 1), new Date(2013, 2, 1), new Date(2013, 4, 1), null, null]);
  data.addRow(['Second', new Date(2013, 2, 1), null, null, new Date(2013, 2, 1), new Date(2013, 9, 1)]);

  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Example broken XAxis",
            width:1600, height:400,
            vAxis: {title: "Project"},
            hAxis: {title: "Date"}, isStacked: true,
           series: {
            0: {
                visibleInLegend: false,
                color: 'transparent'
            }
        }}
      );
}
​

Any ideas if this is possible?  If so what am I doing wrong?

[asgallant]

Using dates for the hAxis of a BarChart doesn't work well, as you can see.  I think that the charts are trying to interpret the date as a number to draw the bar, and when you stack the dates like that, you get a chart with bars equivalent to the stacked numbers.  If you make the first series visible, you will see that it starts on 1970 (the start of the Unix epoch), and draws a bar equivalent to the number of milliseconds of the date value, then stacks the next date-equivalent milliseconds on top.

Using a BarChart for this is the wrong way to go, especially since the new Timelines are available on the RC version (1.1).  Try this: http://jsfiddle.net/asgallant/Vsf3t/

[Jeremiah Mitchell]

Thanks, I'll give that a try.

No idea how I missed the timelines type.

[asgallant]

They are brand new, so easy to miss  >;o)