CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Wessi
Wessi

Reputation: 1822

Dates on x-axis on Google Charts

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.

Upvotes: 1

Views: 4939

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

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>

Upvotes: 4

Related Questions