Google Visualization Line Chart - new Date() showing 100s of years on axis

Question

I'm very new to google visualization so there's probably something obvious I'm doing wrong, but for some reason on my horizontal axis it's showing the date, except that the date is almost 100 years long, when the timeframe of the dates is only two days maximum.

I would have thought that the chart would automatically adjust the view range based on the data it has. Is this true? Or do I have to hardcode min and max values?

Here's what it's showing:

And here's the code being used to generate this:

<script>
            google.charts.load('current', {packages: ['corechart', 'line']});

            function drawBasic() {

                var data = new google.visualization.DataTable();
                data.addColumn('date', 'Time');
                data.addColumn('number', 'Gain');
                data.addColumn({type: 'string', role: 'tooltip'});

                data.addRows([
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 2:33:23 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:43:38 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:43:50 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:47:47 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:48:43 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:48:53 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:49:29 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:49:44 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:57:59 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:59:26 am'],
                    [new Date(2018,03,23),666479192,'Friday, March 23, 2018 @ 5:08:06 am'],
                    [new Date(2018,03,23),666479192,'Friday, March 23, 2018 @ 6:13:59 pm'],
                    [new Date(2018,03,23),666781422,'Friday, March 23, 2018 @ 8:16:16 pm'],
                    [new Date(2018,03,23),666781422,'Friday, March 23, 2018 @ 8:55:16 pm'],
                    [new Date(2018,03,23),667196094,'Friday, March 23, 2018 @ 10:01:36 pm']
                ]);

                var options = {
                    title:'XP gains for the past " . ucfirst(replaceUnderscoreWithSpace(getRecordTimeframe($timeframe))) . "',
                    width: 800,
                    height: 600,
                    hAxis: {
                        title: 'Time',
                        gridlines: {
                            color: '#eee',
                            count: 15,
                        },
                        textStyle: {
                            color: '#eee',
                        },
                        baselineColor: '#eee',
                        format: 'M/d/yyyy',
                    },
                    vAxis: {
                        title: 'XP',
                        gridlines: {
                            color: '#eee',
                        },
                        textStyle: {
                            color: '#eee',
                        },
                        baselineColor: '#eee',
                    },
                    legend: 'none',
                    backgroundColor: {
                        fill: '#222',
                    },
                    titleTextStyle: {
                        color: '#fff', 
                        fontName: 'Open Sans',  
                        fontSize: 14,
                        bold: false,
                    },
                };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

                chart.draw(data, options);
            }
            google.charts.setOnLoadCallback(drawBasic);
        </script>

I've looked at the docs for Date() and can't find any indication of something being wrong.

Any help would be greatly appreciated

CertainPerformance CertainPerformance · Accepted Answer · 2018-03-24T05:21:54

The problem is that all of your dates are the same, so it has no idea how large to make the range. (1 day? 1 month? 70 years?) Pass different dates to the Date constructor so it has an idea of the range to display.

Also, note that giving the Date constructor a month of 03 results in April - you want 02 for March.

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

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time');
  data.addColumn('number', 'Gain');
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    [new Date(2018,02,23,2,33,23),665960845,'Friday, March 23, 2018 @ 2:33:23 am'],
    [new Date(2018,02,23,6,13,59),666479192,'Friday, March 23, 2018 @ 6:13:59 pm'],
    [new Date(2018,02,23,8,16,16),666781422,'Friday, March 23, 2018 @ 8:16:16 pm'],
  ]);

  var options = {
    title:'XP gains for the past " . ucfirst(replaceUnderscoreWithSpace(getRecordTimeframe($timeframe))) . "',
    width: 800,
    height: 600,
    hAxis: {
      title: 'Time',
      gridlines: {
        color: '#eee',
        count: 15,
      },
      textStyle: {
        color: '#eee',
      },
      baselineColor: '#eee',
      format: 'M/d/yyyy',
    },
    vAxis: {
      title: 'XP',
      gridlines: {
        color: '#eee',
      },
      textStyle: {
        color: '#eee',
      },
      baselineColor: '#eee',
    },
    legend: 'none',
    backgroundColor: {
      fill: '#222',
    },
    titleTextStyle: {
      color: '#fff', 
      fontName: 'Open Sans',  
      fontSize: 14,
      bold: false,
    },
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawBasic);

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

</div>

Google Visualization Line Chart - new Date() showing 100s of years on axis

1 Answers