[英]how do i take a generated value and insert into a graph?
Hi I'm new to web designing and some of my jargon may be wrong. 嗨,我是网页设计的新手,我的一些行话可能是错误的。 I'm trying to create a graph for lectures that shows the average rating each lecture gets.
我正在尝试为讲座创建一个图表,以显示每个讲座获得的平均评分。 I have already calculated the average for each of the 18 lectures.
我已经计算了18堂课的平均成绩。 Now I want to take the value for each one and insert it as the value in the graph.
现在,我要获取每个值,并将其作为值插入到图形中。
Here is how I query and output my lectures: 这是我查询和输出讲座的方式:
<?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>";
}
?>
Then, OnLoad
I do this: 然后,在
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();
And my target container: 而我的目标容器:
<div id="chartContainer"
style="height: 300px; width: 90%; position: absolute; padding-top:50px;">
</div>
At the moment it looks like this 目前看起来像这样
How can I use the values from the database for the CanvasJS graph? 如何将数据库中的值用于CanvasJS图?
This is how I would do it: 这就是我要做的:
Firstly, create an array outside your while
loop. 首先, 在
while
循环之外创建一个数组。 This is going to hold the total dataset for your graph. 这将保留图形的总数据集。 So:
所以:
$dataset = array();
Then, inside your while
loop, create another array. 然后, 在
while
循环中,创建另一个数组。 This array will store the lecture name and its average rating. 该数组将存储讲座名称及其平均评分。 This array will have the associative names
label
and y
(used in your chart dataset). 该数组将具有关联名称
label
和y
(在图表数据集中使用)。
$lectureRating = array();
At the end of the loop, you then add the $lectureID
and the $lectureAvg
to that array. 在循环的最后,您将
$lectureID
和$lectureAvg
到该数组。 And then add it to the $dataset
array. 然后将其添加到
$dataset
数组中。
$lectureRating['label'] = $lectureID;
$lectureRating['y'] = $lectureAvg;
array_push($dataset, $lectureRating);
After the while loop is finished the $dataset
array should have a similar structure to: 在while循环完成之后,
$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
)
We now need to transform this into a Javascript Object (JSON) so that the js can interpret it. 现在,我们需要将其转换为Javascript对象(JSON),以便js可以解释它。 This is done by encoding it.
这是通过编码完成的。
$graphData = json_encode($dataset);
This turns the above array into something like this (look familiar?): 这会将上面的数组变成这样(看起来很熟悉?):
[{"label": "Lecture ID 1", "y": 4.3}, {"label": "Lecture ID 2", "y": 3.7}]
This can then be output into the dataPoints
object of your chart. 然后可以将其输出到图表的
dataPoints
对象。
data: [
{
type: "column",
dataPoints: <?php echo $graphData; ?>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.