Google Chart lines outside chart

I make a chart with Google Chart. Why are my lines outside the chart it self? See here a JS Fiddle with the problem:

Can I fix this or is this just how Google chart works? Many many thanks.

No code is needed here Stackoverflow


ANSWERS:


the lines outside the chart are a result of the vAxis being locked to the range of the first series only

when there is more than one series of data, need to find min and max of all series

we can use Math.min & max to find for each

// use null instead of zero (min could be greater than zero and wouldn't be found)
var rangeMin = null;
var rangeMax = null;

// start with column 1 (exclude x axis)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
  if (data.getColumnType(i) === 'number') {
    var range = data.getColumnRange(i);
    if (rangeMin === null) {
      rangeMin = range.min;
    } else {
      rangeMin = Math.min(rangeMin, range.min);
    }
    if (rangeMax === null) {
      rangeMax = range.max;
    } else {
      rangeMax = Math.max(rangeMax, range.max);
    }
  }
}

then in the options, +/- 1 for safety

  viewWindow: {
    min: rangeMin - 1,
    max: rangeMax + 1
  }

see following working snippet...

Date.prototype.minDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() - days);
  return dat;
}
var date = new Date();

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Test1');
  data.addColumn('number', 'Test2');
  data.addColumn('number', 'Test3');
  data.addColumn('number', 'Test4');
  data.addColumn('number', 'Test5');
  data.addColumn('number', 'Test6');
  data.addColumn('number', 'Test7');
  data.addColumn('number', 'Test8');
  data.addColumn('number', 'Test9');
  data.addColumn('number', 'Test10');
  data.addColumn('number', 'Test11');
  data.addColumn('number', 'Test12');
  data.addRows([
    [new Date(2017, 1, 08), 1,  8, 1, 36, 7,  9,  12, 45, 20, 30, 45, 8],
    [new Date(2017, 1, 07), 12, 9, 5, 8,  10, 21, 34, 87, 89, 45, 12, 9],
  ]);

  // set range
  var rangeMin = null;
  var rangeMax = null;
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    if (data.getColumnType(i) === 'number') {
      var range = data.getColumnRange(i);
      if (rangeMin === null) {
        rangeMin = range.min;
      } else {
        rangeMin = Math.min(rangeMin, range.min);
      }
      if (rangeMax === null) {
        rangeMax = range.max;
      } else {
        rangeMax = Math.max(rangeMax, range.max);
      }
    }
  }

  var options = {
    chartArea: {'width': '100%'},
    animation: {
      duration: 1000,
      easing: 'in'
    },
    hAxis: {
      gridlines: {
      color: '#cfd1d8',
      },
      titleTextStyle: {
      color: '#3e4763',
      },
      viewWindowMode: 'explicit',
      viewWindow: {
      min: new Date(date.minDays(7)),
      max: new Date(Date.now()),
      },
    },
    vAxis: {
      gridlines: {
      count: 10,
      },
      viewWindow: {
        min: rangeMin - 1,
        max: rangeMax + 1
      }
    },
    explorer: {
      axis: 'horizontal',
      keepInBounds: false,
      maxZoomIn: 4.0
    },
    lineWidth: 3,
    pointSize: 8,
    series: {
      0: { color: '#003eff' },
      1: { color: '#118d26' },
      2: { color: '#ff00de' },
      3: { color: '#ff4fc3' },
      4: { color: '#ff0000' },
      5: { color: '#00c9cb' },
      6: { color: '#e5a200' },
      7: { color: '#00d975' },
      8: { color: '#a55f3d' },
      9: { color: '#783dc8' },
      10: { color: '#829100' },
      11: { color: '#945401' },
      },
    backgroundColor: '#f7f9f9',
    legend: { position: 'none' },
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}
<script src=""></script>
<div id="chart"></div>


 MORE:


 ? Horizontal axis labels not appearing in Google charts when using object literal notation
 ? Visual studio C# chart. How to control the x-axis numbering?
 ? pygal charts line up horizontally
 ? VS2012 doesn't compile this code, but G++, clang, and ICC all accept it without a diagnostic
 ? compile error; method or data not found
 ? Trying to use VLOOKUP for two Lookup Values
 ? Symfony paramconverter object not found no 404
 ? Can't import PDF with mpdf
 ? Display pdf using angularjs
 ? How to show annotations in a pdf using pdfium viewer?