November 25, 2014
Hot Topics:

Play it Cool: Creating Reports from Stored Data

  • September 20, 2006
  • By Steve Schafer
  • Send Email »
  • More Articles »

Thermal problems have been a major bane of computers since the very first computer was plugged into AC power. Despite server rooms with raised white flooring and high-end Leibert air conditioners, and over-clocked gaming rigs with water-cooling on the chipsets, heat continues to be a problem that computer administrators and technicians can't ignore.

Note: This series of articles uses Linux as the operating system of choice, with scripts written for the shell (Bash) and in Perl. For the tasks outlined within this series, I found Linux to be ideal. If you are using a different programming platform, or if you are unable to replicate these methods on Linux, you should still gain value from these articles. Where possible, I will point out analogous possibilities in Windows and other operating systems.

In Review

In the last few articles, you concentrated on collecting data—primarily from the serial-connected thermometer—and storing the data in various formats. This article shows you how to report on that stored data.

Note: Keep in mind that the concepts outlined in this article can be utilized to display various types of data, not just the data previously collected by the temperature-related scripts.

A CSS-Based Homegrown Solution

Despite the multitude of software available on the Internet, occasionally only a homegrown solution will work for what you need. Fortunately, Web scripting languages and CSS are both robust enough to support a graphing application to trend your data.

Using <div> tags for bar graphs

The <div> (short for "division") HTML tag is used primarily to contain blocks of related text. However, because you can tailor the size and ornamentation of each <div>, it's fairly trivial to use <div> tags to create bars in a bar graph. Consider the HTML document shown in Figure 1. The HTML code I used to create that document is shown in Listing 1.



Click here for a larger image.

Figure 1: <div> tags can be used to create the bars of a graph.

Listing 1: Code used to create the bar graph (sample-graph.html)

<html>
<head>
   <style type="text/css">
      .container { height: 200px;
                   width: 400px;
                   border: thin solid black;
                   padding: 0px;
                   margin: 0px;
      }

      .bar { float: left;
             vertical-align: baseline;
             width: 10px;
             border: none;
             border-left: 1px solid blue;
             border-right: 1px solid blue;
             border-top: 1px solid blue;
             padding: 0px;
             margin: 0px;
             position: relative;
             display: block;
      }

   </style>
</head>
<body>
<div class="container">
   <div class="bar" style="line-height: 100px; top:  95px;"></div>
   <div class="bar" style="line-height: 170px; top:  25px"></div>
   <div class="bar" style="line-height:  75px; top: 120px"></div>
   <div class="bar" style="line-height: 100px; top:  95px;"></div>
   <div class="bar" style="line-height: 170px; top:  25px"></div>
   <div class="bar" style="line-height:  75px; top: 120px"></div>
   <div class="bar" style="line-height: 100px; top:  95px;"></div>
   <div class="bar" style="line-height: 170px; top:  25px"></div>
   <div class="bar" style="line-height:  75px; top: 120px"></div>
   <div class="bar" style="line-height: 100px; top:  95px;"></div>
   <div class="bar" style="line-height: 170px; top:  25px"></div>
   <div class="bar" style="line-height:  75px; top: 120px"></div>
   <div class="bar" style="line-height: 100px; top:  95px;"></div>
   <div class="bar" style="line-height: 170px; top:  25px"></div>
   <div class="bar" style="line-height:  75px; top: 120px"></div>
</div>
</body>
</html>

The concept is straightforward:

  1. Create a container DIV for the graph (to delimit the graph and allow it to be positioned where it's needed on the page).
  2. Create a bar DIV definition to display the bars as 10px wide with a blue border (top and sides only).
  3. Insert the requisite bars in the container, modifying the line-height and top attributes to size each bar correctly and position it along the bottom of the container.

Of course, due to some idiosyncratic behaviors of CSS, you need to do a little fudging here and there to align the bars correctly within the container. Simply supplying a bottom alignment attribute and floating each against the left margin won't do.

Note: An extensive example of using CSS to create bar graphs is available on the Apples to Oranges site: http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55.

Scripting a Dynamic graph

In Part 2 of this series, I showed how the temperature readings could be appended to a simple textual log, in a format including the date, time, and temperature reading:

2006-07-26      15:30      73.7

Parsing that information and creating a simple bar graph is trivial in a scripting language such as PHP. A sample application for displaying a subset of the data (one day's worth) is shown in Listing 2, and a sample of its output is shown in Figure 2.

Listing 2: Graphing one day's worth of temperature data (daygraph.php)

<?php

//Ratio temperature into 200px-high grid

function temp_ratio($temp) {
   // Get amount if temperature is above 50 degrees
   $temp = $temp - 50;
   // Ratio against 50 into 200-high grid
   $ratio = intval($temp * 200 / 50);
   // Return ratio
   return $ratio;
}

// Start page, define styles and grid
print <<<HTML
<html>
<head>
<style type="text/css">

   .container { height: 200px;
                width: 580px;
                border: thin solid black;
                position: absolute;
                display: block;
                margin: 0; padding: 0;
                top: 20px; left: 20px;
                z-index: 0; }

   .hline { width: 576px;
            border: none;
            border-bottom: 1px dotted gray;
            margin: 0px; padding: 0px;
            line-height: 35px; }

   .vline { width: 24px;
            border: none;
            border-right: 1px dotted gray;
            margin: 0px; padding: 0px;
            vertical-align: baseline;
            line-height: 195px;
            float: left; }

   .bar { width: 0px;
          margin: 0px; padding: 0px;
          border: 1px solid blue;
          float: left;
          vertical-align: baseline;
          position: relative;
          display: block;
          z-index: 1; }

</style>
</head>

<body>
<div class="container" style="z-index: 3;">
<!-- Horizontal gridlines (~25 degrees) -->
   <div class="hline" style="line-height: 16px;
         border-bottom: none;"></div>
   <div class="hline"></div>
   <div class="hline"></div>
   <div class="hline"></div>
   <div class="hline"></div>
   <div class="hline"></div>
</div>

<div class="container" style="z-index: 3;">
   <!-- Vertical gridlines (hour) -->
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
   <div class="vline"></div><div class="vline"></div>
</div>

<!-- Container for graph -->
<div class="container">

HTML;

// Open data file
$fp = fopen("/home/sschafer/todaytemp.log","r");

// Read each line (Format: date time temp)
while (!feof($fp)) {
   // Get next line of log
   $reading = fgets($fp,1024);

   // Third value is temp
   $x = explode(" ",$reading);
   $temp = $x[2];

   // Include a little sanity checking
   // to weed out data artifacts
   if ($temp >= 50 && $temp <= 90) {
      // Ratio the temp into our graph
      $temp = temp_ratio($temp);
      // Adjust for margins, etc.
      $top = 200 - $temp - 5;
      // Print graph bar
      print "<div class="bar" style="line-height: {$temp}px; ";
      print "top: {$top}px; border-color: blue; "></div> n";
   }
}

// Close data file
fclose($fp);

// Close html file
print <<<HTML
</div>
</body>
</html>

HTML;

?>



Click here for a larger image.

Figure 2: A sample of the reporting script's output.

Notice that this example assumes that one day's worth of data is stored in todaytemp.log—the simplest case to show the basics of how such a script would work. A filtering algorithm could be added to the script to parse a larger file with more data. Also, a pager routine could be implemented to move between portions of data. Of course, if the data were stored in a database, you could use targeted queries to obtain just the data necessary to display the desired graph.

The graphs output by this script also make use of CSS layers to superimpose gridlines (vline- and hline-classed DIVs) over the graph to aid in reading it.





Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel