title: plotting x-axis dates on a google visualization line
body: <p>I am trying to create a line chart using google visualization. So I copied the example from their web page <a href="https://developers.google.com/chart/interactive/docs/gallery/linechart" rel="nofollow noreferrer">chart example</a> and it works.</p>
  
  <p>The only change I wanted to make is for the x-axis to be dates rather than a number. So the first section of code below works fine, its from their site.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;body&gt;
  
  &lt;div id="linechart_material"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  // Load google charts
    google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(drawChart);
  
  function drawChart() {
  
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    data.addColumn('number', 'Guardians of the Galaxy');
    data.addColumn('number', 'The Avengers');
    data.addColumn('number', 'Transformers: Age of Extinction');
  
    data.addRows([
      [1,  37.8, 80.8, 41.8],
      [2,  30.9, 69.5, 32.4],
      [3,  25.4,   57, 25.7],
      [4,  11.7, 18.8, 10.5],
      [5,  11.9, 17.6, 10.4],
      [6,   8.8, 13.6,  7.7],
      [7,   7.6, 12.3,  9.6],
      [8,  12.3, 29.2, 10.6],
      [9,  16.9, 42.9, 14.8],
      [10, 12.8, 30.9, 11.6],
      [11,  5.3,  7.9,  4.7],
      [12,  6.6,  8.4,  5.2],
      [13,  4.8,  6.3,  3.6],
      [14,  4.2,  6.2,  3.4]
    ]);
  
    var options = {
      chart: {
        title: 'Box Office Earnings in First Two Weeks of Opening',
        subtitle: 'in millions of dollars (USD)'
      },
      width: 900,
      height: 500
    };
  
    var chart = new google.charts.Line(document.getElementById('linechart_material'));
  
    chart.draw(data, google.charts.Line.convertOptions(options));
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However when I make the following changes nothing is displayed,</p>
  
  <blockquote>
    <p>data.addColumn('number', 'Day');  to data.addColumn('date', 'Day');</p>
  </blockquote>
  
  <p>And change the data.addRows bit to,</p>
  
  <pre><code>data.addRows([
      [new date(2018,1, 1),  37.8, 80.8, 41.8],
      [new date(2018,1, 2),  30.9, 69.5, 32.4],
      [new date(2018,1, 3),  25.4,   57, 25.7],
      [new date(2018,1, 4),  11.7, 18.8, 10.5],
      [new date(2018,1, 5),  11.9, 17.6, 10.4],
      [new date(2018,1, 6),   8.8, 13.6,  7.7],
      [new date(2018,1, 7),   7.6, 12.3,  9.6],
      [new date(2018,1, 8),  12.3, 29.2, 10.6],
      [new date(2018,1, 9),  16.9, 42.9, 14.8],
      [new date(2018,1, 10), 12.8, 30.9, 11.6],
      [new date(2018,1, 11),  5.3,  7.9,  4.7],
      [new date(2018,1, 12),  6.6,  8.4,  5.2],
      [new date(2018,1, 13),  4.8,  6.3,  3.6],
      [new date(2018,1, 14),  4.2,  6.2,  3.4]
    ]);
  </code></pre>