Google Column Graph Single Date and value showing

Question

Data Table structure is as follows

    {
  "cols": [
    {
      "id": "",
      "label": "Date",
      "pattern": "",
      "type": "date"
    },
    {
      "id": "Col1",
      "label": "Col1 Label",
      "pattern": "",
      "type": "number"
    }
  ],
  "rows": [
    {
      "c": [
        {
          "v": "Date(2017, 5, 27)"
        },
        {
          "v": 213
        }
      ]
    }
  ]
}

H Axis options

        hAxis: {
      slantedText: true, slantedTextAngle: 35,
      titleTextStyle: {bold: false, fontSize: 11, color: '#610B38'},
      textStyle: {
        bold: true, fontSize: 8, color: '#4d4d4d'
      },
      maxAlternation: 1,
      showTextEvery: 1,
      viewWindowMode : 'maximized',
      gridlines:
      {
        count: 31
      },
       bar: { groupWidth: 40 }

    }

But in the column graph it is displaying multiple adjacent bars looks like time instead of a single date

This issue happening only for single date.

I want to display the column chart as single bar instead of big rectangle.

Any feedback appreciated

Answer 1

recommend setting the min / max values on the viewWindow explicitly

keeping within a day should prevent "column overflow"

  viewWindow: {
    min: new Date(dateRange.min.getTime() - oneDay),
    max: new Date(dateRange.max.getTime() + oneDay)
  }

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).on('resize', drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {
        "id": "",
        "label": "Date",
        "pattern": "",
        "type": "date"
      },
      {
        "id": "Col1",
        "label": "Col1 Label",
        "pattern": "",
        "type": "number"
      }
    ],
    "rows": [
      {
        "c": [
          {
            "v": "Date(2017, 5, 27)"
          },
          {
            "v": 213
          }
        ]
      }
    ]
  });

  var oneDay = (1000 * 60 * 60 * 24);
  var dateRange = data.getColumnRange(0);
  var chart = new google.visualization.ColumnChart($('.chart')[0]);
  chart.draw(data, {
    hAxis: {
      slantedText: true,
      slantedTextAngle: 35,
      textStyle: {
        bold: true,
        fontSize: 8,
        color: '#4d4d4d'
      },
      viewWindow: {
        min: new Date(dateRange.min.getTime() - oneDay),
        max: new Date(dateRange.max.getTime() + oneDay)
      }
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart"></div>

---

not much you can do for the actual size of the column
the release notes from February, 23 2016 mention...

Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.

but none have ever worked for me when only one row of data...