CODEWITHSUNDEEP
javascriptgoogle-visualization
usert4jju7
usert4jju7

Reputation: 1813

Googlecharts - Annotation Chart - First column must contain date or date time

I'm trying to plot an annotation chart with google chart. However, I get the error "First column must be date or datetime". If I were to change the chart type to be area or line for example, it works fine.

Here's the javascript section of the "View page source" content of the final HTML page on which I'm expecting a graph to be drawn

<script type="text/javascript">
            google.load('visualization', '1', {'packages':['annotationchart']});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
            // Create our data table out of JSON data loaded FROM server.
            var data_1 = google.visualization.arrayToDataTable([['ACTIVITY DATE TIME','ACTIVITY DURATION'],['2015-10-31 02:00:00',503],['2015-11-01 09:26:00',4],['2015-11-01 11:30:00',2],['2015-11-01 19:33:00',2],['2015-11-02 01:15:00',2],['2015-11-02 03:09:00',2],['2015-11-02 07:04:00',2],['2015-11-02 09:47:00',2],['2015-11-02 11:10:00',2]]);

            var options = {
                displayAnnotations: true    
            };

            var chart_1 = new google.visualization.AnnotationChart(document.getElementById('plot1'));
            chart_1.draw(data_1, options);
            }
            ;
        </script>

Could I request help please to figure out the problem? Is there any typecasting needed or anything whatsoever to get this working please?

UPDATED CODE

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

            function drawChart() {
            // Create our data table out of JSON data loaded FROM server.
            var data_1 = google.visualization.arrayToDataTable([<?php echo (implode(",", $chart_array_1)); ?>]);

            var options = {
                displayAnnotations: true
            };

            var chart_1 = new google.visualization.AnnotationChart(document.getElementById('plot1'));
            chart_1.draw(data_1, options);
            }
            ;

Upvotes: 1

Views: 2157

Answers (1)

Charles Clayton
Charles Clayton

Reputation: 17956

Yes, you have to cast those strings as Dates.

var data = [
  ['ACTIVITY DATE TIME', 'ACTIVITY DURATION'],
  ['2015-10-31 02:00:00', 503],
  ['2015-11-01 09:26:00', 4],
  ['2015-11-01 11:30:00', 2],
  ['2015-11-01 19:33:00', 2],
  ['2015-11-02 01:15:00', 2],
  ['2015-11-02 03:09:00', 2],
  ['2015-11-02 07:04:00', 2],
  ['2015-11-02 09:47:00', 2],
  ['2015-11-02 11:10:00', 2]
];

// or var data = [<?php echo (implode(",", $chart_array_1)); ?>]

for(var i = 1; i < data.length; i++)
    data[i][0] = new Date(data[i][0]); // converting strings to Dates

google.load('visualization', '1', {
  'packages': ['annotationchart']
});
google.setOnLoadCallback(drawChart);

function drawChart() {
  // Create our data table out of JSON data loaded FROM server.
  var data_1 = google.visualization.arrayToDataTable(data);

  var options = {
    displayAnnotations: true
  };

  var chart_1 = new google.visualization.AnnotationChart(document.getElementById('plot1'));
  chart_1.draw(data_1, options);
};

JSFiddle

Upvotes: 3

Related Questions