Google使用MYSQL服务器中的Json绘制Linechart

Question

Currently trying to populate a google chart line chart with data retrieved with a query from mysql database via php. At present when I render the html page the page is blank with no graph to show. I am uncertain how to debug this or where I am going wrong as I am new to google charts and was following a tutorial on youtube. Please see my code below. Any help in debugging this would be greatly appreciated.

QUERY & RESULT:

$query =
"SELECT
 (
    UNIX_TIMESTAMP(
        moodLog_before.posted
    )
 ) AS 'day',
moodLog_before.moodBefore
FROM
moodLog_before
WHERE
moodLog_before.posted >= NOW() - INTERVAL 1 WEEK AND moodLog_before.userId  = '1'
ORDER BY
DAY ASC";

$result = mysqli_query($conn, $query);
$rows = array();
$table = array();

$table['cols'] = array(
array(
'label' => 'days',
'type' => 'datetime'
),
array(
'label' => 'moodBefore',
'type' => 'number'
)
);


while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$datetime = explode(".", $row["day"]);
$sub_array[] =  array(
  "v" => 'Date(' . $datetime[0] . '000)'
 );
$sub_array[] =  array(
  "v" => $row["moodBefore"]
 );
$rows[] =  array(
 "c" => $sub_array
);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);

JSON:

        day        moodBefore
     1563275830        2
     1563291561        7
     1563307202       10
     1563307497       11
     1563307497        8
     1563308533       14

GOOGLE CHART SET UP:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery /1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
 google.charts.load('current', {'packages':['corechart']});
 google.charts.setOnLoadCallback(drawChart);
 function drawChart()
 {
 var data = new google.visualization.DataTable(<?php echo $jsonTable;  ?>);

 var options = {
title:'Mood Logs',
legend:{position:'bottom'},
chartArea:{width:'95%', height:'65%'}
};


var chart = new   google.visualization.LineChart(document.getElementById('line_chart'));

chart.draw(data, options);
}
</script>

ERROR:

jsapi_compiled_default_module.js:151 Uncaught (in promise) Error: Container is not defined
at gvjs_dp (jsapi_compiled_default_module.js:151)
at gvjs_7L.gvjs_Tq [as constructor] (jsapi_compiled_default_module.js:239)
at gvjs_7L.gvjs_VL [as constructor] (jsapi_compiled_ui_module.js:1000)
at new gvjs_7L (jsapi_compiled_ui_module.js:1032)
at drawChart (moodLogs.php?row=1:97)

Answer 1

be sure to add your <div> element to the page...

<div id="line_chart"></div>