2015-12-16 2 views
0

Я пытаюсь построить диаграмму аннотаций с диаграммой google. Однако я получаю сообщение об ошибке «Первый столбец должен быть датой или датой». Если бы я изменил тип диаграммы как область или строку, например, он отлично работает.Googlecharts - диаграмма аннотаций. Первый столбец должен содержать дату или дату.

Вот Javascript раздел «Просмотр страницы источника» содержание окончательного HTML страницы, на которой я ожидал график, который можно сделать

<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> 

Могу ли я запросить помощь, пожалуйста, чтобы выяснить проблему? Есть ли какие-либо придирки или что-то еще, чтобы получить эту работу, пожалуйста?

ОБНОВЛЕНО КОД

<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); 
      } 
      ; 

ответ

2

Да, вы должны бросить те strings в 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

+0

Здравствуйте crclayton - Большое спасибо за это. Просто немного сложно. Я получаю данные через PHP (PHP запрашивает базу данных и заполняет массив). Как я могу заставить typecasting работать с данными, хранящимися в массиве PHP «chart_array_1»? Пожалуйста, вы можете мне помочь? – usert4jju7

+0

Если я не ошибаюсь, вы должны просто назначить результат запроса 'PHP' переменной' data', а затем изменить его аналогично с JavaScript. См. Мой комментарий в ответе. –

+0

Это круто. Получил это, чтобы работать. Большое спасибо. Но график не является сюжетом. Такая же проблема, как в вашем JSFIDDLE. Я получаю ошибку, а [jc] не является функцией. – usert4jju7