Error Date type (Google visualization)

Question

This is my code for displaying the chart

$scope.course_chart = function(response){
        var data2 = new google.visualization.DataTable();
        data2.addColumn('date', 'pv_date');
        data2.addColumn('string', 'pageviews');

        _.each(response.result.rows, function(item){

            var formattedDate = item[0].slice(0, 4) + ", " + item[0].slice(4, 6) + ", " + item[0].slice(6, 8);

            var date_format = new Date(formattedDate);
            date_format = $filter('date')(date_format);

            data2.addRow([
                date_format,
                item[1]
            ]);

        });

        var chart = new google.visualization.AreaChart(document.querySelector('#course_chart'));
        chart.draw(data2, options2);

};

google.load('visualization', '1', {packages:['corechart'], callback: $scope.course_chart});

My date_format value is Sep 27, 2016

what is the requirement output for this data type "date" in google visualization?

I know nothing about that library but I'd expect you could provide dates as dates (not text). In JavaScript that means Date objects. — Álvaro González

WhiteHat WhiteHat · Accepted Answer · 2016-10-04T15:13:25

if you have column with data type: 'date'
then you must pass a date object --> new Date()

you can use any of the javascript date contructors

such as...

new Date(2016, 8, 26)
remember in javascript, months are zero based (8 = Sept)

or...

new Date('09/26/2016')
this creates the date from a string and does not set the format when displayed

adding rows to the data table...

data2.addColumn('date', 'pv_date');
data2.addRow(new Date(2016, 8, 26));

if you already have the date formatted, you can use object notation when adding rows
(v = value, f = formatted value)...

data2.addRow({
  v: new Date(2016, 8, 26)
  f: 'Sep 26, 2016'
});

you can also use the DateFormat provided by google

data2.addRow(new Date(2016, 8, 26));

var formatDate = new google.visualization.DateFormat({
  pattern: 'MMM d, yyyy'
});
formatDate.format(data2, 0);

finally, you can provide raw dates and let the axis format the dates
i.e. hAxis.format: 'MMM d, yyyy'...

here are a few examples using each scenario...

1. use hAxis.format

google.charts.load('current', {
  callback: function () {
    var data2 = new google.visualization.DataTable();
    data2.addColumn('date', 'pv_date');
    data2.addColumn('number', 'pageviews');

    data2.addRows([
      [new Date(2016, 8, 26), 100],
      [new Date(2016, 8, 27), 101]
    ]);

    var options = {
      hAxis: {
        format: 'MMM d, yyyy'
      }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data2, options);
  },
  packages:['corechart']
});

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

2. use DateFormat

google.charts.load('current', {
  callback: function () {
    var data2 = new google.visualization.DataTable();
    data2.addColumn('date', 'pv_date');
    data2.addColumn('number', 'pageviews');

    data2.addRows([
      [new Date(2016, 8, 26), 100],
      [new Date(2016, 8, 27), 101]
    ]);

    var formatDate = new google.visualization.DateFormat({
      pattern: 'MMM d, yyyy'
    });
    formatDate.format(data2, 0);

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data2);
  },
  packages:['corechart']
});

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

3. use Object notation {v: , f:}

google.charts.load('current', {
  callback: function () {
    var data2 = new google.visualization.DataTable();
    data2.addColumn('date', 'pv_date');
    data2.addColumn('number', 'pageviews');

    data2.addRows([
      [{v: new Date(2016, 8, 26), f: 'Sep 26, 2016'}, 100],
      [{v: new Date(2016, 8, 27), f: 'Sep 27, 2016'}, 101]
    ]);

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data2);
  },
  packages:['corechart']
});

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

also, for AreaChart, the columns after the first should be of type: 'number' -- not 'string'

Error Date type (Google visualization)

1 Answers