Google charts, how to set hAxis cut off times/dates?

Question

I have two google charts and both bottom axis's time spans run longer than I want them to. The first one below runs onto the 5 Feb 17. How do I stop the chart pn the last day of the current month?

google.load("visualization", "1", {
  packages: ["corechart"]
});

google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Electricity', 'Gas'],
    [new Date('2017-01-01'), 61.7, 74.04],
    [new Date('2017-01-02'), 91.145, 109.374],
    [new Date('2017-01-03'), 28.378, 74.62],
    [new Date('2017-01-04'), 16.75, 33.5],
    [new Date('2017-01-05'), 26.136, 39.204],
    [new Date('2017-01-06'), 466.248, 41.975],
    [new Date('2017-01-07'), 0, 117.414],
    [new Date('2017-01-08'), 42.268, 0],
    [new Date('2017-01-09'), 10.442, 31.326],
    [new Date('2017-01-10'), 56.356, 0],
    [new Date('2017-01-11'), 21.15, 31.725],
    [new Date('2017-01-12'), 55.226, 82.839],
    [new Date('2017-01-13'), 488.352, 610.44],
    [new Date('2017-01-14'), 148.252, 85.035],
    [new Date('2017-01-15'), 141.925, 198.695],
    [new Date('2017-01-16'), 102.36, 120.372],
    [new Date('2017-01-17'), 25.86, 30.17],
    [new Date('2017-01-18'), 127.848, 149.156],
    [new Date('2017-01-19'), 0, 0],
    [new Date('2017-01-20'), 0, 0],
    [new Date('2017-01-21'), 0, 0],
    [new Date('2017-01-22'), 0, 0],
    [new Date('2017-01-23'), 0, 0],
    [new Date('2017-01-24'), 0, 0],
    [new Date('2017-01-25'), 0, 0],
    [new Date('2017-01-26'), 0, 0],
    [new Date('2017-01-27'), 0, 0],
    [new Date('2017-01-28'), 0, 0],
    [new Date('2017-01-29'), 0, 0],
    [new Date('2017-01-30'), 0, 0],
    [new Date('2017-01-31'), 0, 0],
  ]);


  var ticks = [
    new Date(2017, 0, 1),
    new Date(2017, 1, 1),
    new Date(2017, 2, 1),
    new Date(2017, 3, 1),
    new Date(2017, 4, 1),
    new Date(2017, 5, 1),
    new Date(2017, 6, 1),
    new Date(2017, 7, 1),
    new Date(2017, 8, 1),
    new Date(2017, 9, 1),
    new Date(2017, 10, 1),
    new Date(2017, 11, 1)
  ];

  var options = {
    chartArea: {
      width: "80%"
    },
    width: 900,
    height: 500,
    hAxis: {
      title: 'Daily Totals Per Month',
      viewWindowMode: 'pretty',
      slantedText: false,
      format: 'd MMM yy',
      gridlines: {
        color: 'transparent'
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false,
        textAlign: 'right'
      },
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
    },
    vAxis: {
      title: 'kWh',
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
    },

    legend: {
      position: 'top',
      width: "90%"
    },
    backgroundColor: '#fff',
    colors: ['#f36daa', '#51b9d2'],
  };

  var chart = new google.visualization.AreaChart(document.getElementById('graph-tab-2'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="month-graph graph" id="graph-tab-2">

The next chart spans a single day. But I only have 48 data points starting at 00:00 and ending at 23:30. How do I stop the chart at 23:30 so I don't have the 30 min gap at the end of the chart.

google.load("visualization", "1", {
  packages: ["corechart"]
});

google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Electricity', 'Gas'],
    [new Date('2017-01-17 00:00'), 0.059, 0.059],
    [new Date('2017-01-17 00:30'), 0.079, 0.079],
    [new Date('2017-01-17 01:00'), 0.076, 0.076],
    [new Date('2017-01-17 01:30'), 0.062, 0.062],
    [new Date('2017-01-17 02:00'), 0.091, 0.091],
    [new Date('2017-01-17 02:30'), 0.050, 0.050],
    [new Date('2017-01-17 03:00'), 0.094, 0.094],
    [new Date('2017-01-17 03:30'), 0.064, 0.064],
    [new Date('2017-01-17 04:00'), 0.082, 0.082],
    [new Date('2017-01-17 04:30'), 0.081, 0.081],
    [new Date('2017-01-17 05:00'), 0.060, 0.060],
    [new Date('2017-01-17 05:30'), 0.089, 0.089],
    [new Date('2017-01-17 06:00'), 0.060, 0.060],
    [new Date('2017-01-17 06:30'), 0.088, 0.088],
    [new Date('2017-01-17 07:00'), 0.080, 0.080],
    [new Date('2017-01-17 07:30'), 0.065, 0.065],
    [new Date('2017-01-17 08:00'), 0.094, 0.094],
    [new Date('2017-01-17 08:30'), 0.060, 0.060],
    [new Date('2017-01-17 09:00'), 0.091, 0.091],
    [new Date('2017-01-17 09:30'), 0.158, 0.158],
    [new Date('2017-01-17 10:00'), 0.188, 0.188],
    [new Date('2017-01-17 10:30'), 0.238, 0.238],
    [new Date('2017-01-17 11:00'), 0.196, 0.196],
    [new Date('2017-01-17 11:30'), 0.193, 0.193],
    [new Date('2017-01-17 12:00'), 0.181, 0.181],
    [new Date('2017-01-17 12:30'), 0.238, 0.238],
    [new Date('2017-01-17 13:00'), 0.194, 0.194],
    [new Date('2017-01-17 13:30'), 0.172, 0.172],
    [new Date('2017-01-17 14:00'), 0.202, 0.202],
    [new Date('2017-01-17 14:30'), 0.195, 0.195],
    [new Date('2017-01-17 15:00'), 0.243, 0.243],
    [new Date('2017-01-17 15:30'), 0.203, 0.203],
    [new Date('2017-01-17 16:00'), 0.176, 0.176],
    [new Date('2017-01-17 16:30'), 0.108, 0.108],
    [new Date('2017-01-17 17:00'), 0.000, 0.000],
    [new Date('2017-01-17 17:30'), 0.000, 0.000],
    [new Date('2017-01-17 18:00'), 0.000, 0.000],
    [new Date('2017-01-17 18:30'), 0.000, 0.000],
    [new Date('2017-01-17 19:00'), 0.000, 0.000],
    [new Date('2017-01-17 19:30'), 0.000, 0.000],
    [new Date('2017-01-17 20:00'), 0.000, 0.000],
    [new Date('2017-01-17 20:30'), 0.000, 0.000],
    [new Date('2017-01-17 21:00'), 0.000, 0.000],
    [new Date('2017-01-17 21:30'), 0.000, 0.000],
    [new Date('2017-01-17 22:00'), 0.000, 0.000],
    [new Date('2017-01-17 22:30'), 0.000, 0.000],
    [new Date('2017-01-17 23:00'), 0.000, 0.000],
    [new Date('2017-01-17 23:30'), 0.000, 0.000],
  ]);


  var options = {
    chartArea: {
      width: "80%"
    },
    width: 900,
    height: 500,
    hAxis: {
      title: 'By day',
      viewWindowMode: 'pretty',
      slantedText: false,
      count: -1,
      format: "ha",
      gridlines: {
        color: 'transparent'
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      viewWindow: {
        // max: new Date('', '', '','23','30')
      },
    },
    vAxis: {
      title: 'kWh',
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false
      },

    },

    legend: {
      position: 'top',
      width: "90%"
    },
    backgroundColor: '#fff',
    colors: ['#f36daa', '#51b9d2'],
  };

  var chart = new google.visualization.AreaChart(document.getElementById('graph-tab-1'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="month-graph graph" id="graph-tab-1">

I have tried adding the parameter
viewWindow: { max: new Date('', '', '','23','30') },

But it doesnt seem to work

score 1 · Accepted Answer · edited May 23 '17 at 12:16

first, recommend not using the following date constructor when loading google data
new Date("yyyy-MM-dd")

you may end up with a different date than expected, depending on the timezone / time of year,
as demonstrated in this question

instead, recommend using one of the following date constructors...

new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);

(keep in mind, month is zero based in the above)

-- or --

new Date("MM/dd/yyyy")

as for the first question,

using viewWindow.max will ensure the axis does not exceed the date provided

however, that will not ensure a label for the last day is displayed

the only way to ensure the chart shows, and stops, on the last day -- is to provide your own ticks

you can use the DataTable method getColumnRange to build the ticks dynamically

getColumnRange(columnIndex) will return an object {}
with properties for min and max of the columnIndex provided

see following working snippet,
getColumnRange is used to build ticks for every third day, along with the last...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Electricity', 'Gas'],
    [new Date(2017, 0,  1), 61.7, 74.04],
    [new Date(2017, 0,  2), 91.145, 109.374],
    [new Date(2017, 0,  3), 28.378, 74.62],
    [new Date(2017, 0,  4), 16.75, 33.5],
    [new Date(2017, 0,  5), 26.136, 39.204],
    [new Date(2017, 0,  6), 466.248, 41.975],
    [new Date(2017, 0,  7), 0, 117.414],
    [new Date(2017, 0,  8), 42.268, 0],
    [new Date(2017, 0,  9), 10.442, 31.326],
    [new Date(2017, 0, 10), 56.356, 0],
    [new Date(2017, 0, 11), 21.15, 31.725],
    [new Date(2017, 0, 12), 55.226, 82.839],
    [new Date(2017, 0, 13), 488.352, 610.44],
    [new Date(2017, 0, 14), 148.252, 85.035],
    [new Date(2017, 0, 15), 141.925, 198.695],
    [new Date(2017, 0, 16), 102.36, 120.372],
    [new Date(2017, 0, 17), 25.86, 30.17],
    [new Date(2017, 0, 18), 127.848, 149.156],
    [new Date(2017, 0, 19), 0, 0],
    [new Date(2017, 0, 20), 0, 0],
    [new Date(2017, 0, 21), 0, 0],
    [new Date(2017, 0, 22), 0, 0],
    [new Date(2017, 0, 23), 0, 0],
    [new Date(2017, 0, 24), 0, 0],
    [new Date(2017, 0, 25), 0, 0],
    [new Date(2017, 0, 26), 0, 0],
    [new Date(2017, 0, 27), 0, 0],
    [new Date(2017, 0, 28), 0, 0],
    [new Date(2017, 0, 29), 0, 0],
    [new Date(2017, 0, 30), 0, 0],
    [new Date(2017, 0, 31), 0, 0],
  ]);

  var dateRange = data.getColumnRange(0);
  var oneDay = (1000 * 60 * 60 * 24);
  var ticksAxisH = [];
  for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
    // add tick every 3 days
    if ((((i - dateRange.min.getTime()) / oneDay) % 3) === 0) {
      ticksAxisH.push(new Date(i));
    }
  }
  // ensure last day is added
  if (ticksAxisH[ticksAxisH.length - 1].getTime() !== dateRange.max.getTime()) {
    ticksAxisH.push(dateRange.max);
  }

  var options = {
    chartArea: {
      width: "80%"
    },
    width: 900,
    height: 500,
    hAxis: {
      title: 'Daily Totals Per Month',
      viewWindowMode: 'pretty',

      ticks: ticksAxisH,

      slantedText: false,
      format: 'd MMM yy',
      gridlines: {
        color: 'transparent'
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false,
        textAlign: 'right'
      },
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
    },
    vAxis: {
      title: 'kWh',
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
    },

    legend: {
      position: 'top',
      width: "90%"
    },
    backgroundColor: '#fff',
    colors: ['#f36daa', '#51b9d2'],
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

as for the second question, the same technique can be applied

here, ticks are added every four hours, as well as the last

see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Electricity', 'Gas'],
    [new Date('2017-01-17 00:00'), 0.059, 0.059],
    [new Date('2017-01-17 00:30'), 0.079, 0.079],
    [new Date('2017-01-17 01:00'), 0.076, 0.076],
    [new Date('2017-01-17 01:30'), 0.062, 0.062],
    [new Date('2017-01-17 02:00'), 0.091, 0.091],
    [new Date('2017-01-17 02:30'), 0.050, 0.050],
    [new Date('2017-01-17 03:00'), 0.094, 0.094],
    [new Date('2017-01-17 03:30'), 0.064, 0.064],
    [new Date('2017-01-17 04:00'), 0.082, 0.082],
    [new Date('2017-01-17 04:30'), 0.081, 0.081],
    [new Date('2017-01-17 05:00'), 0.060, 0.060],
    [new Date('2017-01-17 05:30'), 0.089, 0.089],
    [new Date('2017-01-17 06:00'), 0.060, 0.060],
    [new Date('2017-01-17 06:30'), 0.088, 0.088],
    [new Date('2017-01-17 07:00'), 0.080, 0.080],
    [new Date('2017-01-17 07:30'), 0.065, 0.065],
    [new Date('2017-01-17 08:00'), 0.094, 0.094],
    [new Date('2017-01-17 08:30'), 0.060, 0.060],
    [new Date('2017-01-17 09:00'), 0.091, 0.091],
    [new Date('2017-01-17 09:30'), 0.158, 0.158],
    [new Date('2017-01-17 10:00'), 0.188, 0.188],
    [new Date('2017-01-17 10:30'), 0.238, 0.238],
    [new Date('2017-01-17 11:00'), 0.196, 0.196],
    [new Date('2017-01-17 11:30'), 0.193, 0.193],
    [new Date('2017-01-17 12:00'), 0.181, 0.181],
    [new Date('2017-01-17 12:30'), 0.238, 0.238],
    [new Date('2017-01-17 13:00'), 0.194, 0.194],
    [new Date('2017-01-17 13:30'), 0.172, 0.172],
    [new Date('2017-01-17 14:00'), 0.202, 0.202],
    [new Date('2017-01-17 14:30'), 0.195, 0.195],
    [new Date('2017-01-17 15:00'), 0.243, 0.243],
    [new Date('2017-01-17 15:30'), 0.203, 0.203],
    [new Date('2017-01-17 16:00'), 0.176, 0.176],
    [new Date('2017-01-17 16:30'), 0.108, 0.108],
    [new Date('2017-01-17 17:00'), 0.000, 0.000],
    [new Date('2017-01-17 17:30'), 0.000, 0.000],
    [new Date('2017-01-17 18:00'), 0.000, 0.000],
    [new Date('2017-01-17 18:30'), 0.000, 0.000],
    [new Date('2017-01-17 19:00'), 0.000, 0.000],
    [new Date('2017-01-17 19:30'), 0.000, 0.000],
    [new Date('2017-01-17 20:00'), 0.000, 0.000],
    [new Date('2017-01-17 20:30'), 0.000, 0.000],
    [new Date('2017-01-17 21:00'), 0.000, 0.000],
    [new Date('2017-01-17 21:30'), 0.000, 0.000],
    [new Date('2017-01-17 22:00'), 0.000, 0.000],
    [new Date('2017-01-17 22:30'), 0.000, 0.000],
    [new Date('2017-01-17 23:00'), 0.000, 0.000],
    [new Date('2017-01-17 23:30'), 0.000, 0.000],
  ]);

  var dateRange = data.getColumnRange(0);
  var oneHour = (1000 * 60 * 60);
  var ticksAxisH = [];
  for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneHour) {
    // add tick every 4 hours
    if ((((i - dateRange.min.getTime()) / oneHour) % 4) === 0) {
      ticksAxisH.push(new Date(i));
    }
  }
  // ensure last hour is added
  if (ticksAxisH[ticksAxisH.length - 1].getTime() !== dateRange.max.getTime()) {
    ticksAxisH.push(dateRange.max);
  }

  var options = {
    chartArea: {
      width: "80%"
    },
    width: 900,
    height: 500,
    hAxis: {
      title: 'By day',
      viewWindowMode: 'pretty',

      ticks: ticksAxisH,

      slantedText: false,
      count: -1,
      format: "ha",
      gridlines: {
        color: 'transparent'
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      viewWindow: {
        // max: new Date('', '', '','23','30')
      },
    },
    vAxis: {
      title: 'kWh',
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false
      },

    },

    legend: {
      position: 'top',
      width: "90%"
    },
    backgroundColor: '#fff',
    colors: ['#f36daa', '#51b9d2'],
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

Was using the Date("yyyy-MM-dd") because the data is being generated by a php script. — user794846, Jan 26 '17 at 13:37
[here](http://stackoverflow.com/a/39756555/5090771) is some info on using php to generate data for google charts... — WhiteHat, Jan 26 '17 at 14:19

Google charts, how to set hAxis cut off times/dates?

1 Answers1