Draw date range bar in google line chart

Question

I am trying to draw google line chart combined with some rectangle shapes in back of the line to represent date range events that affects the line behavior.

I am using google charts and angular-google-charts library

Do you have any idea how I can get this on google charts?

Answer 1

use a ComboChart with an area series to draw rectangle shapes

set the value of the area series to the max value of the y-axis,

use null in the data where the rows do not coincide...

---

see following working snippet...

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

function drawChart() {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {id: 'x', label: 'Date', type: 'date'},
      {id: 'y', label: 'Fn', type: 'number'},
      {id: 'z', label: 'Shade', type: 'number'}
    ]
  });

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM-dd-yyyy'
  });

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2016, 10, 27);
  var endDate = new Date();
  var ticksAxisH = [];
  var dateRanges = [
    {start: new Date(2017, 0, 1), end: new Date(2017, 0, 20)},
    {start: new Date(2017, 1, 5), end: new Date(2017, 1, 10)}
  ];
  var maxShade = 200;
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // x = date
    var rowDate = new Date(i);
    var xValue = {
      v: rowDate,
      f: formatDate.formatValue(rowDate)
    };

    // y = 2x + 8
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // z = null or max shade
    var zValue = null;
    dateRanges.forEach(function (range) {
      if ((rowDate.getTime() >= range.start.getTime()) &&
          (rowDate.getTime() <= range.end.getTime())) {
        zValue = maxShade;
      }
    });

    // add data row
    dataTable.addRow([
      xValue,
      yValue,
      zValue
    ]);

    // add tick every 7 days
    if (((i - startDate.getTime()) % 7) === 0) {
      ticksAxisH.push(xValue);
    }
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    dataTable: dataTable,
    options: {
      chartArea: {
        bottom: 64,
        top: 48
      },
      hAxis: {
        slantedText: true,
        ticks: ticksAxisH
      },
      legend: {
        position: 'top'
      },
      lineWidth: 4,
      series: {
        // line
        0: {
          color: '#00acc1'
        },
        // area
        1: {
          areaOpacity: 0.6,
          color: '#ffe0b2',
          type: 'area',
          visibleInLegend: false
        },
      },
      seriesType: 'line'
    }
  });

  chart.draw(container);
}

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