Как взять сгенерированное значение и вставить в график?

Question

Привет, я новичок в веб-дизайне, и некоторые из моих жаргонов могут быть неправильными. Я пытаюсь создать график для лекций, показывающий средний рейтинг каждой лекции. Я уже рассчитал среднее значение для каждой из 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> 

At the moment it looks like this

Как я могу использовать значения из базы данных для графика CanvasJS?

Answer 1

Это, как я хотел бы сделать это:

Во-первых, создать массив вне ваш while петли. Это будет держать общий набор данных для вашего графика. Итак:

$dataset = array(); 

Затем внутри ваш while цикл, создать другой массив. Этот массив сохранит название лекции и ее средний рейтинг. Этот массив будет иметь ассоциативные имена label и y (используется в вашем наборе данных диаграммы).

$lectureRating = array(); 

В конце цикла, вы затем добавить $lectureID и $lectureAvg в этом массиве. А затем добавьте его в массив $dataset.

$lectureRating['label'] = $lectureID; 
$lectureRating['y'] = $lectureAvg; 
array_push($dataset, $lectureRating); 

После цикла в то время как закончил $dataset массив должен иметь структуру, подобную:

Array[n] (
    [0] Array[2](
     ['label'] => "Lecture ID 1" 
     ['y'] => 4.3 
    ) 

    [1] Array[2](
     ['label'] => "Lecture ID 2" 
     ['y'] => 3.7 
    ) 

    // And so on 
) 

Теперь мы должны преобразовать это в JavaScript Object (JSON), так что JS можно интерпретировать , Это делается путем его кодирования.

$graphData = json_encode($dataset); 

Это превращает выше массив в нечто вроде этого (смотрите знакомо?):

[{"label": "Lecture ID 1", "y": 4.3}, {"label": "Lecture ID 2", "y": 3.7}] 

Это может затем быть выход в dataPoints объекта диаграммы.

data: [ 
    { 
     type: "column", 
     dataPoints: <?php echo $graphData; ?> 
    }