I am new to php and javascript and i am working on a project where i need to implement the graph in my webpage but i am getting this error morris.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'length') and I am unable to find the solution
html code
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../Css/AdminDashboard.css"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">2 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>4 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js">
</script>
</head>
<body><div class="bookingsGraph">
<div id="chart">
</div>
</div>
</body>
</html>
<script>
Morris.Line({
element: 'chart',
data: [<?php echo $chart_data; ?>],
xkey: 'date',
ykey: ['bookings'],
labels: ['Bookings'],
// hideHover: 'auto',
// stacked: true
});
</script>
php code
<?php
$connect = mysqli_connect("localhost", "root", "", "movietime");
$query = "SELECT COUNT(BookingId),BookingDate
FROM bookings
WHERE BookingDate='2019/12/13'";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ date:'".$row["BookingDate"]."', bookings:".$row["COUNT(BookingId)"]."}, ";
}
$chart_data = substr($chart_data, 0, -2);
?>
complete errror
morris.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at c.<anonymous> (morris.min.js:6:4567)
at c.<anonymous> (morris.min.js:6:4834)
at d.setData (morris.min.js:6:4865)
at c.d [as constructor] (morris.min.js:6:1739)
at new c (morris.min.js:6:13513)
at Object.c [as Line] (morris.min.js:6:13534)
at AdminDashboard.php:114:12
I have tried
Morris.Line({
element: 'chart',
data: [{date:'2019/12/13',bookings:'6'}],
xkey: 'date',
ykey: ['bookings'],
labels: ['Bookings'],
// hideHover: 'auto',
// stacked: true
});