Need help with JavaScript (Chart.js) Parse error

JavaScript
1

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.

2

you havent put the options into a variable, or attached it to the Chart.

3

Thanks so much for your comments. My apologies for the late response, but I never received a notification of your post.

I tried as you suggested - with many variations of same - and still generate an error. Here is the latest:

unexpecte grab
unexpecte grab800×513 61.6 KB

Where to/not include , or ; in script is probably my downfall and may be the problem in this case as well.

After much refactoring, here is the final html/script:

<!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
                            }]
                    };
                    var graphTarget = $("#chart");
                    var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata
                    });

                    options: {
                            //responsive: false
                            plugins: {
                                title: {
                                    display: true
                                    position: 'top'
                                    align: 'center'
                                    text: 'SitePoint Help'
                                }
                            }
                        }
                });
            }
        }
        </script>

</body>
</html>

And here is a link to this webpage.

While the parsing errors are gone, there is still a catch: the options: title: {…} is nowhere to be seen on the webpage. I will continue …

Thanks again for your help.

4

I tried this as well and the title still failed to appear:

var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata,
                        options: {
                            //responsive: false
                            plugins: {
                                title: {
                                    display: true,
                                    position: 'top',
                                    align: 'center',
                                    text: 'SitePoint Help'
                                }
                            }
                        }
                        
                    });

This did generate errors, but placing a ‘,’ after true, top and center eliminated them.

Thanks!

6

Problem solved. I followed guidelines for adding a title and used plugins: as seen next:

plugins
plugins1000×221 33.3 KB

Once I removed the ‘plugins: {…}’ namespace, the title appeared. Live and learn.

Thanks!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.