morrisJS Bar chart population using PHP and mysql

Question

I'm struggling with getting data to populate my MorrisJS bar chart using data from my mySQL database. Could anyone assist in getting it to display on my bar chart?

Below is my current code and pages.

    <?php
$link = mysql_connect('127.0.0.1', 'root', 'password')
   or die('Could not connect: ' . mysql_error());

mysql_select_db('database') or die('Could not select database');

$dataArray=array();

//get data from database
$sql="SELECT * FROM table";
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());
if ($result) {
  while ($row = mysql_fetch_assoc($result)) {
      $Version=$row["Version"];
      $Live=$row["Live"];
      $Preprod=$row["Preprod"];
      //add to data areray
      $dataArray[$Version]=$count;
  }
}
?>

index.php (main page)

div id="morris-bar-chart"></div>
  <?php include ('database.php') ?>

<script src="../js/morris-data.js"></script> <----- script on index.php page linking to morris chart page.

morris.js page

 Morris.Bar({
    element: 'morris-bar-chart',
    data: [{


while ($row = mysql_fetch_assoc($result)) {
        y:<?=$row['versions']?>,
        Live:<?=$row['Live']?>,
        PreProd: <?=$row['Preprod']?>
    }, {

          ],
    xkey: 'y',
    ykeys: ['Live', 'PreProd'],
    labels: ['Live', 'PreProd'],
    hideHover: 'auto',
    resize: true
});

Hope this all makes sense. Thanks in advance.

Answer 1

I think the while is the problem.

Morris expects data line-wise, e.g. { y: '2007', a: 75, b: 65 },

I've adjusted the PHP code part in the morris.js script a bit.

• Normally, you can not execute PHP within a JS file. Except, when you added a rule to the server, that JS files should be processed by PHP, too.

• The normal way to fetch the data would be an AJAX query to a PHP script, which returns the json_encoded($result). And then add it to Morris with the setData() function.

• But this should work, too: generate the JS file by PHP. You could rename the morris-data.js to morris-data.js.php. The file needs <?php header("Content-type: application/javascript"); ?> at the top. And then adjust your <script include to match the new filename.

File morris-data.js.php

<?php header("Content-type: application/javascript"); ?>

Morris.Bar({
  element: 'morris-bar-chart',
  data: [        
  <?php 
      while ($row = mysql_fetch_assoc($result)) {

        // output a line like:
        // { y: '123', Live: 123,  PreProd: 123 },
        sprintf(
            "{ y: '%s', Live: %s, PreProd: %s },",
            $row['version'], 
            $row['Live'],
            $row['Preprod']
        );
      } 
  ?>
  ],
  xkey: 'y',
  ykeys: ['Live', 'PreProd'],
  labels: ['Live', 'PreProd'],
  hideHover: 'auto',
  resize: true
});

that should render something like (see also the bar chart example)

data: [       
    { y: '1.2.3', Live: 20,  PreProd: 23 },
    { y: '1.2.4', Live: 30,  PreProd: 24 },
    { y: '1.2.5', Live: 40,  PreProd: 25 },
    { y: '1.2.6', Live: 50,  PreProd: 26 }
],

(I'm not sure what the last part in the database.php file is supposed to do. Maybe you can drop that (the code inside the if($result)). But maybe its for calculations..)