Как передать значения диаграмме (chart.js/morris.js)

Question

С помощью PHP я пытаюсь получить данные из базы данных MySQ и отображать их на диаграмме области (доход). Ниже мой PHP код:

$q = "SELECT `sales`, `quantity` FROM `sap` WHERE `d_channel`='$disC' AND `sales_org`='$plant' AND `date` BETWEEN '$fd' AND '$td'"; 
$result = mysqli_query($dbc,$q); 

$array = array(); 
while($row = mysqli_fetch_assoc($result)) 
{ 
    array_push(
     $array, 
     array(
      'x' => $row['sales'], 
      'y' => $row['quantity'], 
     ) 
    );     
} 

echo json_encode($array); 

И выход является:

[ 
    {"x":"101151.7","y":"10"}, 
    {"x":"14660.53","y":"20"}, 
    {"x":"505344","y":"50"} 
] 

Я передал массив намечать следующим образом:

<div id="morris-line-chart"></div> 

<script> 
    Morris.Line({ 
     // ID of the element in which to draw the chart. 
     element: 'morris-line-chart', 

     // Chart data records -- each entry in this array corresponds to a point 
     // on the chart. 
     data: <?php echo json_encode($array);?>, 

     // The name of the data record attribute that contains x-values. 
     xkey: 'cron_time', 

     // A list of names of data record attributes that contain y-values. 
     ykeys: ['images_processed'], 

     // Labels for the ykeys -- will be displayed when you hover over the 
     // chart. 
     labels: ['Images Processed'], 

     lineColors: ['#0b62a4'], 
     xLabels: 'hour', 

     // Disables line smoothing 
     smooth: true, 
     resize: true 
    }); 
</script> 

Но это дает ошибку " Uncaught TypeError: Не удается прочитать свойство «match» undefined » FYI Я использовал следующие ссылки

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 

Пожалуйста, помогите мне решить мою проблему.

Answer 1

Попробуйте изменить xkey и ykeys. Потому что ваши фактические cron_time и images_processed не существуют в ваших данных json.

xkey: 'x', // 'cron_time', 
ykeys: ['y'], //['images_processed'], 

Или изменить ключи в PHP и сохранить фактический Morris конфигурации:

array 
(
    'cron_time' => $row['sales'], 
    'images_processed' => $row['quantity'], 
) 

Вы должны также преобразовать ваш quantity в int или float:

(int)$row['quantity'] 
(float)$row['quantity']