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)
