ChartJS 未显示我的 MySQL 数据 - 图表变为空白
[英]ChartJS not showing my MySQL data - Chart goes blank
问题描述
QUESTION: how do i get my chart to display the MYSQL table data?
问题：如何让我的图表显示 MYSQL 表数据？ if i put "subgrade_material" in my JS dataset for example, the chart goes blank and does not display.例如，如果我将“subgrade_material”放入我的 JS 数据集中，则图表变为空白且不显示。 So how do i get my MYSQL table values to display on the chart based on date (MONTH).那么如何让我的 MYSQL 表值根据日期（月份）显示在图表上。
My index.php file:我的 index.php 文件：
<?php include 'settings.php'; //include settings ?>
<body class="crm_body_bg">
<!-- main content part here -->
<section class="main_content dashboard_part">
<!-- menu -->
<div class="container-fluid no-gutters">
<div class="row">
<div class="col-lg-12 p-0 ">
<div class="header_iner d-flex justify-content-between align-items-center">
<div class="sidebar_icon d-lg-none">
<i class="ti-menu"></i>
</div>
<div class="serach_field-area">
<div class="search_inner">
<form action="#">
<div class="search_field">
<input type="text" placeholder="Search here..." >
</div>
<button type="submit"> <img src="img/icon/icon_search.svg" alt=""> </button>
</form>
</div>
</div>
<div class="header_right d-flex justify-content-between align-items-center">
<div class="profile_info">
<img src="../../img/<?php $ufunc->UserName(); //Show name who is in session user?>.jpg" alt="#">
<div class="profile_info_iner">
<div class="profile_author_name">
<h5><?php $ufunc->UserName(); //Show name who is in session user?></h5>
</div>
<div class="profile_info_details">
<a href="#">My Profile </a>
<a href="#">Settings</a>
<a href="../../includes/logout.php">Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ menu -->
<div class="main_content_iner ">
<div class="container-fluid p-0 sm_padding_15px">
<div class="row justify-content-center">
<div class="col-12">
<div class="dashboard_header mb_50">
<div class="row">
<div class="col-lg-6">
<div class="dashboard_header_title">
<h3>ECEMS v2.0 Administration Dashboard</h3>
<h6>Logged in as: <?php $ufunc->UserName(); //Show name who is in session user?></h6>
</div>
</div>
<div class="col-lg-6">
<div class="dashboard_breadcam text-right">
<p><a href="#">Dashboard</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-6">
<div class="white_box mb_30">
<div class="box_header">
<div class="main-title">
<h3 class="mb_25" >General Recyclables Processing Overview</h3>
</div>
</div>
<canvas id="general-recyclables"></canvas>
</div>
</div>
<div class="col-lg-6 col-xl-6">
<div class="white_box mb_30">
<div class="box_header">
<div class="main-title">
<h3 class="mb_25" >Printed Circuit Boards Processing Overview</h3>
</div>
</div>
<canvas id="general-recyclables2"></canvas>
</div>
</div>
<div class="col-lg-4 col-xl-4">
<div class="white_box mb_30">
<div class="box_header">
<div class="main-title">
<h3 class="mb_25" >Targets for <?php echo date('F Y'); ?></h3>
</div>
</div>
<h3>Target: 12000KG</h3>
<h3>Current Value: <?php
$dbConnection = new PDO('mysql:dbname=ecemsmaster;host=127.0.0.1;charset=utf8', 'ecemsmaster', 'ecemsmaster');
$dbConnection->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//The COUNT SQL statement that we will use.
$sql = "SELECT SUM(subgrade ++ castaluminium ++ copper ++ stainlesssteel ++ plastic ++ batteries ++ brass ++ cables ++ lowgradePCB ++ mediumgradePCB ++ highgradePCB) AS num FROM daily_recyclables where MONTH(date)=MONTH(curdate());";
//Prepare the COUNT SQL statement.
$stmt = $dbConnection->prepare($sql);
//Execute the COUNT statement.
$stmt->execute();
//Fetch the row that MySQL returned.
$row = $stmt->fetch(PDO::FETCH_ASSOC);
//The $row array will contain "num". Print it out.
echo $row['num'];
?> KG</h3>
<h3>Over/Under Target: -1000KG</h3>
<br>
</div>
</div>
<div class="col-lg-4 col-xl-4">
<div class="white_box mb_30">
<div class="box_header">
<div class="main-title">
<h3 class="mb_25" >Previous Month</h3>
</div>
</div>
<h3>Target: 12000KG</h3>
<h3>Previous Value: <?php
$dbConnection = new PDO('mysql:dbname=ecemsmaster;host=127.0.0.1;charset=utf8', 'ecemsmaster', 'ecemsmaster');
$dbConnection->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//The COUNT SQL statement that we will use.
$sql = "SELECT SUM(subgrade ++ castaluminium ++ copper ++ stainlesssteel ++ plastic ++ batteries ++ brass ++ cables ++ lowgradePCB ++ mediumgradePCB ++ highgradePCB) AS num FROM daily_recyclables where MONTH(date)=MONTH(curdate())-1;";
//Prepare the COUNT SQL statement.
$stmt = $dbConnection->prepare($sql);
//Execute the COUNT statement.
$stmt->execute();
//Fetch the row that MySQL returned.
$row = $stmt->fetch(PDO::FETCH_ASSOC);
//The $row array will contain "num". Print it out.
echo $row['num'];
?> KG</h3>
<h3>Over/Under Target: -1000KG</h3>
<br>
</div>
</div>
</div>
</div>
</div>
<?php
require '../../includes/global_footer.html'; //include Global Footer
?>
Here is my linegraph.js file:这是我的 linegraph.js 文件：
$(document).ready(function(){
$.ajax({
url : "http://www.ecems.co.za/ecemsv2/user/admin/data.php",
type : "POST",
success : function(data){
console.log(data);
var date = [];
var subgrade_material = [];
var castaluminium_material = [];
var copper_material = [];
var stainlesssteel_material = [];
var plastic_material = [];
var batteries_material = [];
var brass_material = [];
var cables_material = [];
for(var i in data) {
date.push("" + data[i].date);
subgrade_material.push(data[i].subgrade);
castaluminium_material.push(data[i].castaluminium);
copper_material.push(data[i].copper);
stainlesssteel_material.push(data[i].stainlesssteel);
plastic_material.push(data[i].plastic);
batteries_material.push(data[i].batteries);
brass_material.push(data[i].brass);
cables_material.push(data[i].cables);
}
var barChartData = {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
datasets: [
{
label: "Subgrade",
backgroundColor: "rgba(189,55,220,0.5)",
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
},
{
label: "Cast Aluminium",
backgroundColor: "rgba(89,155,120,0.5)",
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
},
{
label: "Copper",
backgroundColor: "rgba(100,105,20,0.5)",
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
},
{
label: "Stainless Steel",
backgroundColor: "rgba(2,15,12,0.5)",
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
},
{
label: "Brass",
backgroundColor: "rgba(99,99,120,0.5)",
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
},
]
};
var ctx = document.getElementById("general-recyclables").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "General Recyclables Overview By Month"
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
},
error : function(data) {
}
});
});
$(document).ready(function(){
$.ajax({
url : "http://www.ecems.co.za/ecemsv2/user/admin/data.php",
type : "POST",
success : function(data){
console.log(data);
var date = [];
var lowgradePCB = [];
var mediumgradePCB = [];
var highgradePCB = [];
for(var i in data) {
date.push("" + data[i].date);
lowgradePCB.push(data[i].lowgradePCB);
mediumgradePCB.push(data[i].mediumgradePCB);
highgradePCB.push(data[i].highgradePCB);
}
var barChartData = {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
datasets: [
{
label: "Low Grade PCB",
backgroundColor: "rgba(27,27,235,0.5)",
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
},
{
label: "Medium Grade PCB",
backgroundColor: "rgba(20,170,235,0.5)",
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
},
{
label: "High Grade PCB",
backgroundColor: "rgba(20,235,34,0.5)",
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
},
]
};
var ctx = document.getElementById("general-recyclables2").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Printed Circuit Board Processing Overview"
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
},
error : function(data) {
}
});
});
Here is my data.php file:这是我的 data.php 文件：
<?php
header('Content-Type: application/json');
//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'REDACTED');
define('DB_PASSWORD', 'REDACTED');
define('DB_NAME', 'REDACTED');
//get mysqliection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if(!$mysqli){
die("connection failed: " . $mysqli->error);
}
//query to get data from the table
$query = sprintf("SELECT recID,date,subgrade,castaluminium,copper,stainlesssteel,plastic,batteries,brass,cables,lowgradePCB,mediumgradePCB,highgradePCB FROM daily_recyclables");
//execute query
$result = $mysqli->query($query);
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
//free memory associated with result
$result->close();
//close mysqliection
$mysqli->close();
//now print the data
print json_encode($data);
?>
1 个解决方案
解决方案1
0 2021-10-15 13:38:55
Copy pasted your same exact 2 snippets and they work.复制粘贴您完全相同的 2 个片段，它们可以工作。 Below example.下面举例。 Check that you have named the canvas properly in the html: <canvas id="general-recyclables"></canvas> respectively for general-recyclables and general-recyclables2检查您是否已在 html 中正确命名画布： <canvas id="general-recyclables"></canvas>分别用于general-recyclables和general-recyclables2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <canvas id="general-recyclables"></canvas> <script> var barChartData = { labels: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], datasets: [ { label: "Subgrade", backgroundColor: "rgba(189,55,220,0.5)", data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] }, { label: "Cast Aluminium", backgroundColor: "rgba(89,155,120,0.5)", data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] }, { label: "Copper", backgroundColor: "rgba(100,105,20,0.5)", data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] }, { label: "Stainless Steel", backgroundColor: "rgba(2,15,12,0.5)", data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] }, { label: "Brass", backgroundColor: "rgba(99,99,120,0.5)", data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] } ] }; var ctx = document.getElementById("general-recyclables").getContext("2d"); var myBar = new Chart(ctx, { type: "bar", data: barChartData, options: { title: { display: true, text: "General Recyclables Overview By Month" }, responsive: true, scales: { xAxes: [ { stacked: true } ], yAxes: [ { stacked: true } ] } } }); </script>
Of course they will not be showing your MySql data but the array of data you put in in data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]当然，他们不会显示您的 MySql 数据，而是您放入data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]中的data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]数组data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
React-Chartjs-2：所有数据未显示在图表上 - React-Chartjs-2: All Data Not Showing on The Chart
ChartJS 不显示时间序列条形图的数据 - ChartJS not showing data for time series bar chart
ChartJs-饼图未显示 - ChartJs - pie chart not showing
Chart.js未显示图表 - Chartjs not showing chart
悬停时显示旧数据的 Chartjs 条形图 - Chartjs Bar Chart showing old data when hovering
CanvasJs动态图显示空白数据？ - CanvasJs dynamic chart showing blank data?
为什么 vue-chartjs 不显示我传递的数据？ - Why is vue-chartjs not showing my passed data?
在chartjs中分配折线图数据 - assigning line chart data in chartjs
使用 MySQL 数据更新 ChartJS - Update ChartJS with MySQL Data
ChartJS：图表未显示所有数据 - ChartJS: chart not show all data
相关标签