GoogleChart not drawing properly

Question

My Chart has a datetime value and two number values (positive and negative).

The above image shows the results of drawing one bar, datetime being current date, the problem is, the bar covers 1990 to 2050, when it should only be covering the current month.

If I draw 2 bars, one for last month, and one for current month, everything is drawn properly.

I'm assuming GoogleCharts needs at least 2 dates for some reason. Does anyone have any idea how to fix this, or give some direction.

Thanks in advance,

Edit to ADD:

The Chart that I am using:

google.charts.load('current', {packages: ['corechart', 'controls']});

The single bar that I am drawing comes from this data store in historyChart:

[["2016-10-01T00:00:00+00:00", 5000.0, 0]]

I am inserting this data to the chart in this manner:

data.addColumn('datetime', 'Chart Filter');
        data.addColumn('number');
        data.addColumn('number');
        data.addRows(historyChart);

The Chart wrapper and options are as followed:

var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            displayExactValues:false,
            vAxis: {
                format: '$#,###', //add $sign in virtical axis
                viewWindowMode: 'maximized',
            },
            hAxis:{
                format: 'MMM-yyyy',
            },

            width: 900,
            height: 450,
            chartArea: {
                'backgroundColor': {
                    'fill': '#F4F4F4',
                    'opacity': 100
                 },
                top:50,
                left:85,
                width: 1000

            },
            title: "{{ member.username }}'s chart", //set user name as chart's title
            isStacked:"true",
            bar:{groupWidth: "95%"},
            colors: ['#7FFF00', '#e6693e'],

          }
        });

        // Create and draw the visualization.
        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

Answer 1

adding option for hAxis.ticks seems to help...

see following working snippet...

google.charts.load('43', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Chart Filter');
    data.addColumn('number');
    data.addColumn('number');
    data.addRows([
      [new Date("10/01/2016"), 5000.0, 0]
    ]);

    var programmaticChart  = new google.visualization.ChartWrapper({
      chartType: 'ColumnChart',
      containerId: 'programmatic_chart_div',
      dataTable: data,
      options: {
        displayExactValues: false,
        vAxis: {
          format: '$#,###',
          viewWindowMode: 'maximized'
        },
        hAxis:{
          format: 'MMM-yyyy',
          ticks: [new Date("10/01/2016")]
        },
        width: 900,
        height: 450,
        chartArea: {
          backgroundColor: {
            fill: '#f4f4f4',
            opacity: 100
          },
          top: 50,
          left: 85,
          width: 1000
        },
        title: '{{ member.username }}\'s chart',
        isStacked: 'true',
        bar:{groupWidth: '95%'},
        colors: ['#7fff00', '#e6693e']
      }
    });
    programmaticChart.draw();

    //dashboard.bind(programmaticSlider, programmaticChart);
    //dashboard.draw(data);
  },
  packages: ['corechart', 'controls']
});

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