如何将仪表板上的图表链接到MySQL数据库？
我需要制作一个显示三种图形的仪表板。由于我对此非常陌生并且还在学习，我尝试了几种方法。我遇到的解决方案很少，但所有的图都是硬编码的，不能从数据库中调用。
以下是我的源代码：
<?php
$connect = mysqli_connect("localhost", "root", "", "gsd");
$query = "SELECT * FROM emergency";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ date:'".$row["date"]."', patient_seen_u:".$row["patient_seen_u"].", patient_seen_a:".$row["patient_seen_a"]."}, ";
}
$chart_data = substr($chart_data, 0, -2);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GOOD SERVICES DELIVERY</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Animation library for notifications -->
<link href="css/animate.min.css" rel="stylesheet"/>
<!-- Light Bootstrap Table core CSS -->
<link href="css/light-bootstrap-dashboard.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link href="css/demo.css" rel="stylesheet" />
<!-- Bootstrap -->
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">
<!-- Fonts and icons -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="sidebar" data-color="azure" data-image="assets/img/sidebar-5.jpg">
<!--
Tip 1: you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple"
Tip 2: you can also add an image using data-image tag
-->
<div class="sidebar-wrapper">
<div class="logo">
<p> Hospital Tanah Merah</p>
</div>
<ul class="nav">
<li class="active">
<a href="dashboard.html">
<i class=""></i>
<p>Arrival & Emergency</p>
</a>
</li>
<li>
<a href="user.html">
<i class=""></i>
<p>Obstetrics & Gynecology</p>
</a>
</li>
<li>
<a href="table.html">
<i class=""></i>
<p>Wad</p>
</a>
</li>
<li>
<li> <a href="#pages-nav-list" data-toggle="collapse" aria-expanded="false"><i class="icon-interface-windows"></i><span><p>Ortopedik & Medikal</p></span>
<div class="arrow pull-right"><i class="fa fa-angle-down"></i></div></a>
<ul id="pages-nav-list" class="collapse list-unstyled">
<li> <a href="wad1.html"> Orthopedik & Medical </a></li>
<li> <a href="#">Orthopedik</a></li>
<li> <a href="#">Medical</a></li>
</a> </ul>
</li>
<li>
<a href="icons.html">
<i class=""></i>
<p>Pediatric</p>
</a>
</li>
<li>
<a href="maps.html">
<i class=""></i>
<p>Mortuary</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bed Management System</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<p>Log out</p>
</a>
</li>
<li class="separator hidden-lg hidden-md"></li>
</ul>
</div>
</div>
</nav>
<!-- Start of Charts-->
<!-- bar charts group -->
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Bar Chart Group <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content1">
<div id="graph_bar_group" style="width:100%; height:280px;"></div>
</div>
</div>
</div>
<!-- /bar charts group -->
<!-- bar charts group -->
<!-- /bar charts group -->
</div>
</div>
</div>
<!-- End of Charts -->
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- Checkbox, Radio & Switch Plugins -->
<script src="js/bootstrap-checkbox-radio-switch.js"></script>
<!-- Charts Plugin -->
<script src="js/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="js/bootstrap-notify.js"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="js/light-bootstrap-dashboard.js"></script>
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="js/demo.js"></script>
<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- morris.js -->
<script src="../vendors/raphael/raphael.min.js"></script>
<script src="../vendors/morris.js/morris.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>
<!-- Morris.js -->
<script>
$(document).ready(function(){
Morris.Bar({
element : 'graph_bar_group',
data:[<?php echo $chart_data; ?>],
xkey:'date',
ykeys:['patient_seen_u','patient_seen_a'],
labels:['Peratusan < 60 minit','Jumlah kes'],
barRatio: 0,2,
hideHover:'auto'
resize: true
});
}
</script>
</html>
正如您所看到的，我使用现有的仪表板，只是略微改变它。我的问题是生成的图形不会调用数据库中的数据，而是显示嵌入的图形。仪表板的图片如下;
那么我应该怎么做，因为如果我在单独的页面上执行图表，图表就会显示在包含数据库内部数据的页面上。非常感谢任何帮助和建议。
编辑：
由于我很难理解我的问题，这就是我在数据库中的内容
CREATE TABLE `emergency` (
`id` int(11) NOT NULL,
`date` date NOT NULL,
`patient_seen_u` double NOT NULL,
`patient_transfer_u` double NOT NULL,
`patient_refer_u` double NOT NULL,
`patient_seen_a` double NOT NULL,
`patient_transfer_a` double NOT NULL,
`patient_refer_a` double NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `emergency` (`id`, `date`, `patient_seen_u`, `patient_transfer_u`, `patient_refer_u`, `patient_seen_a`, `patient_transfer_a`, `patient_refer_a`) VALUES
(1, '2017-02-22', 13, 14, 17, 15, 16, 20),
(2, '2017-03-22', 12, 13, 11, 15, 15, 16),
(3, '2017-04-22', 10, 11, 9, 14, 13, 11),
(4, '2017-05-22', 9, 12, 11, 10, 15, 10),
(5, '2017-06-22', 10, 11, 12, 15, 14, 18);
但是，显示的图形不包含数据库中的数据。我怎样才能解决这个问题？提前谢谢。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？