I had a functioning chart until I added content to the options pane. Originally the options were as shown next:
options: {
responsive: false
}
I added some content as follows:
options: {
title: {
display: true,
text: 'World population per region (in millions)'
}
}
The error occurrs on the line beginning with ‘text’. The error is as follows:
'Unexpected token ‘:’. Parse error.
I think my error is due to some issue with my javascrip bracket syntax, which is confusing to me. That said, here is the entire webpage. Hopefully someone can spot my problem.
<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css"> </style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
<div class="container">
<h2>Talavera Tank Sensor Data</h2>
<canvas id="chart" style="width: 100%;
height: 65vh;
background: #d9d9d9;
border: 1px solid #555652;
margin-top: 10px;"></canvas>
<script>
$(document).ready(function () {
showGraph();
});
function showGraph()
{
{
$.post("data.php",
function (data)
{
console.log(data);
const dateTime = [];
const temp = [];
const humid = [];
for (var i in data) {
dateTime.push(data[i].dateTime);
temp.push(data[i].temp);
humid.push(data[i].humidity);
}
var chartdata = {
labels: dateTime, // x-axis labels ...
datasets:
[{
label: 'Temperature',
backgroundColor: 'red',
borderColor: '#46d5f1',
borderWidth: '1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
fill: false,
data: temp
},
{
label: 'Humidity',
backgroundColor: '#49e2ff',
borderColor: 'red',
borderWidth: '1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
fill: false,
data: humid
}]
}
options: {
title: {
display: true,
text: 'World population per region (in millions)'
}
}
var graphTarget = $("#chart");
var barGraph = new Chart(graphTarget, {
type: 'line',
data: chartdata
})
});
}
}
</script>
</body>
</html>
Any suggestions or comments will be greatly appreciated.
Thank you.