title: How to link my charts on dashboard to MySQL database?
body: <p>I need to produce a dashboard that shows three types of graphs. And since I'm really new to this and still learning, I have try several methods. I come across few solution but all of the graphs are hard-coded and can't be called from database.</p>
  
  <p>Below is my source code:</p>
  
  <pre><code>&lt;?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);
  ?&gt;
  
  
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="icon" type="image/png" href="assets/img/favicon.ico"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
       &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;!-- Meta, title, CSS, favicons, etc. --&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;GOOD SERVICES DELIVERY&lt;/title&gt;
  
      &lt;meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
  
  
      &lt;!-- Bootstrap core CSS     --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;!-- Animation library for notifications   --&gt;
      &lt;link href="css/animate.min.css" rel="stylesheet"/&gt;
      &lt;!--  Light Bootstrap Table core CSS    --&gt;
      &lt;link href="css/light-bootstrap-dashboard.css" rel="stylesheet"/&gt;
      &lt;!--  CSS for Demo Purpose, don't include it in your project     --&gt;
      &lt;link href="css/demo.css" rel="stylesheet" /&gt;   
      &lt;!-- Bootstrap --&gt;
      &lt;link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;!-- Font Awesome --&gt;
      &lt;link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;!-- NProgress --&gt;
      &lt;link href="../vendors/nprogress/nprogress.css" rel="stylesheet"&gt;
      &lt;!-- iCheck --&gt;
      &lt;link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom Theme Style --&gt;
      &lt;link href="../build/css/custom.min.css" rel="stylesheet"&gt;
  
  
      &lt;!--     Fonts and icons     --&gt;
      &lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'&gt;
      &lt;link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" /&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="wrapper"&gt;
      &lt;div class="sidebar" data-color="azure" data-image="assets/img/sidebar-5.jpg"&gt;
  
      &lt;!--
  
          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
  
      --&gt;
  
          &lt;div class="sidebar-wrapper"&gt;
              &lt;div class="logo"&gt;
                &lt;p&gt; Hospital Tanah Merah&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;ul class="nav"&gt;
                  &lt;li class="active"&gt;
                      &lt;a href="dashboard.html"&gt;
                          &lt;i class=""&gt;&lt;/i&gt;
                          &lt;p&gt;Arrival &amp; Emergency&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="user.html"&gt;
                          &lt;i class=""&gt;&lt;/i&gt;
                          &lt;p&gt;Obstetrics &amp; Gynecology&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="table.html"&gt;
                          &lt;i class=""&gt;&lt;/i&gt;
                          &lt;p&gt;Wad&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
  
  
              &lt;li&gt;
              &lt;li&gt; &lt;a href="#pages-nav-list" data-toggle="collapse" aria-expanded="false"&gt;&lt;i class="icon-interface-windows"&gt;&lt;/i&gt;&lt;span&gt;&lt;p&gt;Ortopedik &amp; Medikal&lt;/p&gt;&lt;/span&gt;
                  &lt;div class="arrow pull-right"&gt;&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/a&gt;
                &lt;ul id="pages-nav-list" class="collapse list-unstyled"&gt;
                  &lt;li&gt; &lt;a href="wad1.html"&gt; Orthopedik &amp; Medical &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="#"&gt;Orthopedik&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="#"&gt;Medical&lt;/a&gt;&lt;/li&gt;
                      &lt;/a&gt; &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="icons.html"&gt;
                          &lt;i class=""&gt;&lt;/i&gt;
                          &lt;p&gt;Pediatric&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="maps.html"&gt;
                          &lt;i class=""&gt;&lt;/i&gt;
                          &lt;p&gt;Mortuary&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="main-panel"&gt;
          &lt;nav class="navbar navbar-default navbar-fixed"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="#"&gt;Bed Management System&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="collapse navbar-collapse"&gt;
  
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;p&gt;Log out&lt;/p&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="separator hidden-lg hidden-md"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
      &lt;!-- Start of Charts--&gt;
  
                &lt;!-- bar charts group --&gt;
                &lt;div class="col-md-6 col-sm-6 col-xs-12"&gt;
                  &lt;div class="x_panel"&gt;
                    &lt;div class="x_title"&gt;
                      &lt;h2&gt;Bar Chart Group &lt;small&gt;Sessions&lt;/small&gt;&lt;/h2&gt;
                      &lt;ul class="nav navbar-right panel_toolbox"&gt;
                        &lt;li&gt;&lt;a class="collapse-link"&gt;&lt;i class="fa fa-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;&lt;i class="fa fa-wrench"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Settings 1&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Settings 2&lt;/a&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a class="close-link"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="clearfix"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="x_content1"&gt;
                      &lt;div id="graph_bar_group" style="width:100%; height:280px;"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;!-- /bar charts group --&gt;
  
                &lt;!-- bar charts group --&gt;
  
                &lt;!-- /bar charts group --&gt;
              &lt;/div&gt;
  
              &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- End of Charts --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
      &lt;!--   Core JS Files   --&gt;
      &lt;script src="js/jquery-1.10.2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;!--  Checkbox, Radio &amp; Switch Plugins --&gt;
      &lt;script src="js/bootstrap-checkbox-radio-switch.js"&gt;&lt;/script&gt;
  
      &lt;!--  Charts Plugin --&gt;
      &lt;script src="js/chartist.min.js"&gt;&lt;/script&gt;
  
      &lt;!--  Notifications Plugin    --&gt;
      &lt;script src="js/bootstrap-notify.js"&gt;&lt;/script&gt;
  
      &lt;!-- Light Bootstrap Table Core javascript and methods for Demo purpose --&gt;
      &lt;script src="js/light-bootstrap-dashboard.js"&gt;&lt;/script&gt;
  
      &lt;!-- Light Bootstrap Table DEMO methods, don't include it in your project! --&gt;
      &lt;script src="js/demo.js"&gt;&lt;/script&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="../vendors/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;script src="../vendors/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- FastClick --&gt;
      &lt;script src="../vendors/fastclick/lib/fastclick.js"&gt;&lt;/script&gt;
  
      &lt;!-- NProgress --&gt;
      &lt;script src="../vendors/nprogress/nprogress.js"&gt;&lt;/script&gt;
  
      &lt;!-- morris.js --&gt;
      &lt;script src="../vendors/raphael/raphael.min.js"&gt;&lt;/script&gt;
      &lt;script src="../vendors/morris.js/morris.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom Theme Scripts --&gt;
      &lt;script src="../build/js/custom.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Morris.js --&gt;
  
      &lt;script&gt;
      $(document).ready(function(){
          Morris.Bar({
            element : 'graph_bar_group',
            data:[&lt;?php echo $chart_data; ?&gt;],
            xkey:'date',
            ykeys:['patient_seen_u','patient_seen_a'],
            labels:['Peratusan &lt; 60 minit','Jumlah kes'],
            barRatio: 0,2,
            hideHover:'auto'
            resize: true
          });
      }
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, I use the existing dashboard and only alter it a bit. My problem is the graph that get produced doesn't call for the data in the database, instead showing the embedded graphs. The picture of the dashboard is as follows;</p>
  
  <p><a href="https://i.stack.imgur.com/ZoQju.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZoQju.png" alt="enter image description here"></a></p>
  
  <p>So what should I do, since if I do the graph on a separate page, the graph does appear on the page with the data inside my database. Any help and suggestion is deeply appreciated.</p>
  
  <p>edit:</p>
  
  <p>Since it's hard to understand my question, here is what I have in my database</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>However, the displayed graph doesn't contain the data from my database. How can I fix this? Thank you in advance.</p>