November 8, 2004

Create a data dashboard with PHP and a browser

Author: Rob Reilly

How many times have you needed a quick and dirty method of displaying data, in a "dashboard" format, that everybody could easily view? Everybody has a Web browser, so why not use that for your dashboard? PHP and Apache make it easy. Here's how you can take a text file, evaluate the content using PHP, then display results on a browser dashboard.

You'll need a networked Linux box with Apache and PHP loaded as your data collection server. My server is on old 200MHz Pentium desktop box with 128MB of memory and SUSE Linux 8.2 Pro installed. A recycled desktop machine can easily serve dashboard pages for 20 or 30 people.

I made sure that I had SSH loaded so that the box could run headless and keyboard-less once everything was set up. SSH, with X Window forwarding enabled, lets you log in and edit your scripts with GUI-based editors.

I'm not going to go into the security issues of running an Apache Web server on the Internet here, but you should use appropriate security measures for your situation. Since I was using my server behind a firewall on a small network, I simply changed the Web directory to allow write permission for myself. As root, I created a php directory under /www and chowned it to rreilly (myself as the user). I then chmoded the permissions of the /www/php directory to 664 -- quick and dirty.

The client side was a hundred times easier. All I needed was a current browser on a network connected machine. I had a laptop running SUSE Linux and Mozilla, and an old Windows 98 machine also running Mozilla (Windows version).

If you are going to edit your scripts and view your dashboard from Windows clients, I'd suggest that you load Putty so you can log into the server using SSH. You can then use vi to edit your PHP scripts.

Read a file and browse it

The basis for this whole exercise was being able to read a text file and do some operations on the data. To begin, create the following program on the server running Apache and PHP and save it as widgetproj1.php in your /www/php directory (or whatever Apache root directory you are using). Take care -- you'll chase your tail for a while if you mistakenly name it with a .htm extension:


<HTML>
<HEAD></HEAD>
<BODY>

<?PHP

$filename = "/www/php/widgetdata.txt" ;
$filepointer = fopen($filename, "r");
$array = file($filename);
fclose($filepointer);

print ("<strong>Web-based Widget Dashboard - $filename</strong><br><br>");

for ($n=0; $n < count($array); $n++) {
      print("$array[$n] <br>");
      }
?>

</BODY>
</HTML>

In the same directory, create a file called widgetdata.txt with this data:


5  10/23/04 10:24 am
10 10/23/04 11:04 am
3  10/23/04 03:30 pm
13 10/24/04 09:45 am
27 10/25/04 04:30 pm
15 10/26/04 02:10 pm
7  10/27/04 06:37 am

Now that you have a sample PHP script and a data file, let's see how it works.

Use a networked browser and type in the script's URL -- e.g. http://192.168.3.13/php/widgetproj1.php. The script opens the /www/php/widgetdata.txt file for reading and assigns it a file pointer. The file command assigns a pointer to the $array. We then print a heading, then step through the array with a for loop, printing each line. The data simply appears verbatim, with a bold title listing the file name in the browser window, as shown here.

A basic dashboard

But we can do better. I modified the script to show a color-coded square, indicating whether my widgets were below, at, or above an arbitrary value of 10. Here's the new code that I saved as /www/php/widgetproj2.php:


<HTML>
<HEAD></HEAD>
<BODY>

<?PHP

$filename = "/www/php/widgetdata.txt";
$filepointer = fopen($filename, "r");
$array = file($filename);
fclose($filepointer);

print ("<strong>Web Based Widget Dashboard - $filename</strong><br><br>");
print ("<u>Widget Production Color Code <br></u>");

print ("Below 10 widgets per hr. = <font color=\"#FF1221\">Red</font><br>");
print ("10 widgets per hr. = <font color=\"#2D13FF\">Blue</font><br>");
print ("Exceeding 10 widgets per hr. = <font color=\"#13FF07\">Green</font><br><br>");

print("<u>Code Widgets  Date    Time</u><br><br>");

for ($n=0; $n < count($array); $n++) {
      $string = $array[$n];
      $widgets = substr($string,0, 2);
      $date = substr($string,3, 9);
      $time = substr($string,11,19);

      if ($widgets < 10) {
          print("<img src=\"redbutton.jpg\" width=\"25\" height=\"26\">");
      }

      elseif ($widgets == 10) {
          print("<img src=\"bluebutton.jpg\" width=\"25\" height=\"26\"> ");
      }

      else {
          print("<img src=\"greenbutton.jpg\" width=\"25\" height=\"26\"> ");
      }

      print("&nbsp;&nbsp;&nbsp;&nbsp; $widgets &nbsp;&nbsp;&nbsp;&nbsp; $date &nbsp;&nbsp; $time <br>");
}

?>

</BODY>
</HTML>

First I added some lines of text at the beginning to give context to the dashboard. I added the substr() function to break up each line of data into values that could be tested. I then added if, else, and elseif statements that printed color-coded JPG files according to my conditions. You could easily use any other type of graphic, button, or icon. If the value was less than 10, output a red square. If the value was 10, output a blue square. Finally, if the value was greater than 10, output a green square. The actual data was then printed after each square and prior to the next loop.

In my browser I typed http://192.168.3.13/php/widgetproj2.php and was greeted with colored squares denoting the various levels.

There's one area that might cause you problems. Make sure to "esc" the double quotes around the values in the print statements; that is, use a \ in front of the double quotes. Otherwise, you'll get a crazy "unexpected T_STRING" error that you'll never figure out.

What's next

You can make your dashboard even fancier by connecting to an SQL database. Other possibilities include sending data from shop floor machines or sensors over a serial line and writing it into a file. Then every time the Web page is reloaded, new data could be displayed.

You could set up simple tracking systems with data created using cron and standard shell tools like ls, grep, and awk. For that matter, you could even input your data with vi or any other text editor. Remember, quick and dirty to get the job done.

By carefully boiling your data down into dashboards that give high level go/no-go results, you won't spend valuable time interpreting numbers and figures. I wish I had had PHP, Apache, and Linux 10 years ago when I was doing metrics and project reporting in corporate America. It would have made my life considerably easier.

Rob Reilly is a consultant who specializes in helping clients communicate effectively. Many of his published articles explain the use of Linux, portable computing, and presentation technology, especially as how it relates to communication in business. His stories appear in various high-end Linux and business media outlets.

Category:

  • PHP
Click Here!