Dates on x-axis on Google Charts

Question

I'm trying to make a google chart with prices on the y-axis and dates on the x-axis. I don't understand why my code is not working. It is not displaying anything.

In header:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Dato');
  data.addColumn('number', 'Anbefalet pris');
  data.addColumn('number', 'Nuværende pris');

  data.addRows([
    [new Date (2016, 8, 6), 378, 418],
    [new Date (2016, 8, 13), 66, 324],
    [new Date (2016, 8, 20), 254, 257],
    [new Date (2016, 8, 27), 117, 105],
    [new Date (2016, 9, 3), 119, 66],
    [new Date (2016, 9, 10), 88, 77],
    [new Date (2016, 9, 17), 76, 96],
    [new Date (2016, 9, 24), 123, 106],
    [new Date (2016, 10, 1), 66, 148],
    [new Date (2016, 10, 8), 128, 116]
  ]);

  var options = {
    chart: {
      title: 'Anbefalede og nuværende ugepriser',
      subtitle: 'Blå: Anbefalede priser, Rød: Nuværende priser'
    },
    legend: { position:'none' },
    width: '100%',
    pointSize: 10,
    explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
  };


  var chart = new google.charts.LineChart(document.getElementById('linechart_material'));

  chart.draw(data, options);
}
 </script>

In body:

<div id="linechart_material" class="chart"></div>

Any help will be much appreciated.

Answer 1

material charts use the namespace google.charts

core charts use the namespace google.visualization

so for core chart line chart -- google.visualization.LineChart

for material line chart -- google.charts.Line

see following snippet, which draws both...

for packages, use 'corechart' or 'line' for material
if using material , don't forget google.charts.Line.convertOptions

however, there are several options that won't work in material
recommend using corechart with option for theme: 'material'

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('date', 'Dato'); data.addColumn('number', 'Anbefalet pris'); data.addColumn('number', 'Nuværende pris'); data.addRows([ [new Date (2016, 8, 6), 378, 418], [new Date (2016, 8, 13), 66, 324], [new Date (2016, 8, 20), 254, 257], [new Date (2016, 8, 27), 117, 105], [new Date (2016, 9, 3), 119, 66], [new Date (2016, 9, 10), 88, 77], [new Date (2016, 9, 17), 76, 96], [new Date (2016, 9, 24), 123, 106], [new Date (2016, 10, 1), 66, 148], [new Date (2016, 10, 8), 128, 116] ]); var tickMarks = []; for (var i = 0; i < data.getNumberOfRows(); i++) { tickMarks.push(data.getValue(i, 0)); } var options = { chart: { title: 'Anbefalede og nuværende ugepriser', subtitle: 'Blå: Anbefalede priser, Rød: Nuværende priser' }, legend: { position:'none' }, width: '100%', pointSize: 10, explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, hAxis: { format: 'MM/dd/yyyy', ticks: tickMarks } }; var chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, google.charts.Line.convertOptions(options)); chart = new google.visualization.LineChart(document.getElementById('linechart_core')); chart.draw(data, options); }, packages: ['corechart', 'line'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div>Material Chart</div> <div id="linechart_material"></div> <div>Core Chart</div> <div id="linechart_core"></div>