2

I have given value to 1st and last column. Here is an example.

const data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'label 1');
data.addColumn('number', 'label 2');
data.addColumn('number', 'label 3');
data.addRows([
  [new Date("2016-8-1"),40, 10, 2],
  [new Date("2016-8-2"),null,null,null],
  [new Date("2016-8-3"),null,null,null],
  [new Date("2016-8-4"),null,null,null],
  [new Date("2016-8-5"),null,null,null],
  [new Date("2016-8-6"),20,30,20]
]);

Here is the result i am getting.

screenshot

The Chart works when we have any value in the middle rather than null.

saurabh
  • 6,687
  • 7
  • 42
  • 63
ramanamatya
  • 33
  • 6

1 Answers1

0

seems to work ok here, what options are you using?

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Day');
  data.addColumn('number', 'label 1');
  data.addColumn('number', 'label 2');
  data.addColumn('number', 'label 3');
  data.addRows([
    [new Date("2016-8-1"),40, 10, 2],
    [new Date("2016-8-2"),null,null,null],
    [new Date("2016-8-3"),null,null,null],
    [new Date("2016-8-4"),null,null,null],
    [new Date("2016-8-5"),null,null,null],
    [new Date("2016-8-6"),20,30,20]
  ]);

  var options = {
    legend: {
      position: 'bottom'
    },
    hAxis: {
      format: 'd'
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);

  chart.draw(data, options);

  // format test 
  var dataTest = new google.visualization.DataTable();
  dataTest.addColumn('date', 'Day');
  dataTest.addRows([
    [new Date("2015-12-31")],
    [new Date("12/31/2015")],  //<-- displays correct timezone
  ]);

  console.log(dataTest.getValue(0, 0));
  console.log(dataTest.getValue(1, 0));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • recommend using date format --> `'MM/dd/yyyy'` vs. `'yyyy-M-d'` -- examples --> [How do I align date and values to gridlines in Google Chart?](http://stackoverflow.com/q/32133792/5090771) -- [Google Charts Table displaying incorrect date](http://stackoverflow.com/q/38333195/5090771) – WhiteHat Nov 11 '16 at 16:22
  • 1
    I think the problem is with the option `bar.groupWidth`. i used to have **%** as a width. I changed it to a **number** rather than % and it worked fine. I dont know why using a % doesnt work. – ramanamatya Nov 14 '16 at 04:31