javascript - 生成された値を取得してグラフに挿入するにはどうすればよいですか?

Question

こんにちは、私は Web デザインの初心者で、専門用語の一部が間違っている可能性があります。各講義の平均評価を示す講義のグラフを作成しようとしています。18回の講義それぞれの平均をすでに計算しています。ここで、それぞれの値を取得し、グラフに値として挿入します。

講義をクエリして出力する方法は次のとおりです。

<?php
    ini_set('display_errors', 1);
    include ('connection.php');
    $queryLecture = "SELECT DISTINCT lectureID FROM LectureReview ORDER BY lectureID";
    $resultLecture = $mysqli->query($queryLecture);

    while ($rowLecture = $resultLecture->fetch_assoc()) {
        echo "<div class=\"row\">";
        echo "<div class=\"box\">Lecture{$rowLecture['lectureID']}:</div>";
        $lectureID = $rowLecture['lectureID'];

        $mysqli2 = new mysqli($hostname, $username, $password, $database);
        $stmt = $mysqli2->prepare("SELECT AVG( lectureReview ) AS lectureAvg FROM LectureReview WHERE lectureID = ?");

        $stmt->bind_param('i', $lectureID);
        $stmt->execute(); 
        $stmt->bind_result($lectureAvg); 
        $stmt->fetch();

        echo "<div class=\"box\">Average Lecture Rating: {$lectureAvg}</div>";
        echo "</div>";
    }
?>

次に、OnLoadこれを行います：

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme1",
    title:{
        text: "Average Lecture Score"              
    },
    animationEnabled: true,   
    data: [              
        {
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "column",
            dataPoints: [
                { label: "Lecture 1", y: 4.5 },
                { label: "Lecture 2", y: 4.5 },
                { label: "Lecture 3", y: 5.0 },
                { label: "Lecture 4", y: 5.0 },
                { label: "Lecture 5", y: 5.0 },
                { label: "Lecture 6", y: 5.0 },
                { label: "Lecture 7", y: 5.0 },
                { label: "Lecture 8", y: 5.0 },
                { label: "Lecture 9", y: 5.0 },
                { label: "Lecture 10", y: 5.0 },
                { label: "Lecture 11", y: 5.0 },
                { label: "Lecture 12", y: 5.0 },
                { label: "Lecture 13", y: 5.0 },
                { label: "Lecture 14", y: 5.0 },
                { label: "Lecture 15", y: 5.0 },
                { label: "Lecture 16", y: 5.0 },
                { label: "Lecture 17", y: 5.0 },
                { label: "Lecture 18", y: 5.0 },
            ]
        }
    ]
});
chart.render();

そして私のターゲットコンテナ：

<div id="chartContainer"
    style="height: 300px; width: 90%; position: absolute; padding-top:50px;">
</div>

現時点ではこんな感じ

データベースの値を CanvasJS グラフに使用するにはどうすればよいですか?