Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

In this tutorial I will show you how to use Flot to create a graph which shows how many nodes have been created over a certain date range and how to seperate these by node type. The tutorial uses Drupal 6 but the prinicpal is the same for Drupal 5, you will just need to change the hook_menu reference.

Download Flot

Before we can start using Flot, we need to download the files.

Download either the .zip or .tar.gz from http://code.google.com/p/flot/downloads/list.

Create a module

We will create a custom module which will create a menu item under reports and set it up so only certain roles have access to the graph.

Create a folder in your sites/all/modules folder and call it whatever you want, I will call mine myflot.

Create a folder within your module folder and name it js. In this folder place the file called jquery.flot.pack.js which is located in the zip/tar.gz that you downloaded from the Flot website.

In this folder create a file called <modulename>.info and insert the following:

name = My Flot
description = Helps with minor modifications to Drupal workings
core = 6.x

Then create a file called <modulename>.module and enter the following code, changing wherever it says myflot to the name of your module. The code is fully commented.

<?php
 
/**
 * Create a new permission for viewing the graph.
 */
function myflot_perm() {
  return array('access flot graph');
}
 
/**
 * Create a menu entry to access the graph.
 */
function myflot_menu() {
  $items['admin/reports/flot'] = array(
    'title' => t('Node creation graph'),
    'page callback' => 'myflot_display_graph',
    'access callback' => 'user_access',
    'access arguments' => array('access flot graph'),
  );
  return $items;
}
 
/**
 * Create the graph and add the javascript.
 */
function myflot_display_graph($timechange = NULL) {
  $output = '';
  // Set some date ranges for users to select how many days to view.
  $options = array('-1 day', '-2 days', '-3 days', '-4 days', '-5 days', '-6 days', '-1 week', '-2 weeks', '-3 weeks', '-4 weeks', '-2 months');
  $links = array();
  foreach ($options as $time) {
    $links[] = l($time, 'admin/reports/flot/'. strtotime($time));
  }
  // Place the links inside a collapsed fieldset.
  $fieldset = array(
    '#title' => t('Date select'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
    '#value' => theme('item_list', $links),
  );
  $output .= theme('fieldset', $fieldset);
  // Add the Javascript file for Flot.
  drupal_add_js(drupal_get_path('module', 'myflot') .'/js/jquery.flot.pack.js', 'module', 'header', FALSE);
  // We set the amount of time to look back on if the time isn't already set.
  if (!$timechange) $timechange = strtotime('-2 weeks');
  $start = date('Y-m-d', $timechange);
  $last = date('Y-m-d');
  $iter8 = $start;
  $dates = array();
  // The first thing we do is create an array with a value of 0 for every day from the start to the end date. This is to make sure there is data set for every day, otherwise you will get an inaccurate graph.
  while ($iter8 < $last) {
    $key = myflot_unix($iter8);
    $dates["$key"] = 0;
    $iter8 = date('Y-m-d', strtotime($iter8 . ' +1 day'));
  }
  // We get a list of all the node types that have nodes already created and published.
  $sql = "SELECT DISTINCT n.type FROM {node} n WHERE n.status = %d";
  $query = db_query($sql, 1);
  $node_types = array();
  while ($data = db_fetch_object($query)) {
    $node_types[$data->type] = $data->type;
  }
  // We set up a variable to contain the hightest number of nodes created for a node type, this way we can extend the graph up a bit.
  $maxcount = 0;
  // Cycle through each node type, counting how many nodes were created of that type grouped by the date created.
  foreach ($node_types as $node_type) {
    $node_data["$node_type"] = $dates;
    $sql = "SELECT COUNT(1) as count, FROM_UNIXTIME(n.created, '%%Y-%%m-%%d') as time FROM {node} n WHERE n.type = '%s' AND n.status = %d AND n.created > %d GROUP BY FROM_UNIXTIME(n.created, '%%Y-%%m-%%d') ORDER BY n.created ASC";
    $query = db_query($sql, $node_type, 1, myflot_unix($start, FALSE));
    while ($data = db_fetch_object($query)) {
      // If the count is higher than the existing highest count, we increase the maxcount variable.
      if ($data->count > $maxcount)  $maxcount = $data->count;
      // We set the key to the Unix timestamp in UTC that Flot requires.
      $key = myflot_unix($data->time);
      // Update the array with the count.
      $node_data["$node_type"]["$key"] = $data->count;
    }
  }
  // Now we have all the data we need in an array, we need to get it set up for the Javascript. You can find out more about this in the Flot API documentation.
  $flot = array();  
  foreach ($node_data as $label => $js_data) {
    $vals = array();
    foreach ($js_data as $time => $count) {
      $vals[] = '['. $time .', '. $count .']';
    }
    $flot[] = '{ label: "'. $label .'", data: ['. implode(', ', $vals) .'] }';
  }
  $flot = implode(', ', $flot);
  // We increase the maxcount by 2 to increase the y-axis by 2 values so the top value doesn't hit the top.
  $maxcount += 2;
 
  // Now we add in the data to the graph and plot it.
  drupal_add_js('$(document).ready(function() {
    var datasets = ['. $flot .'];
 
    // This makes sure the colour stays the same whether we deselect the node type from the graph.
    var i = 0;
    $.each(datasets, function(key, val) {
      val.color = i;
      ++i;
    });
 
  // Define the function to show the tooltips when the mouse cursor is placed over a point on the graph.
  function showTooltip(x, y, contents) {
    $("<div id=\"tooltip\">" + contents + "</div>").css({
      position: "absolute",
      display: "none",
      top: y - 30,
      left: x + 15,
      border: "1px solid #ddd",
      padding: "3px",
      "background-color": "#f7f7f7",
      opacity: 0.90
    }).appendTo("body").fadeIn(200);
  }
 
  // A function to convert the timestamp used by Flot to a readable date format for humans.
  function showLocalDate(timestamp) {
    var newDate = new Date();
    newDate.setTime(timestamp);
    return newDate.toGMTString();
  }
 
  // Set up the checkbox inputs to select and deselect node types from appearing on the graph. You can add in some extra HTML if you wish to add more control to the styling.
  var choiceContainer = $("#choices");
  $.each(datasets, function(key, val) {
    choiceContainer.append("<div class=\"choice\"><input type=\"checkbox\" name=\"" + key + "\" checked=\"checked\">" + val.label + "</input></div>");
  });
  // When one of the checkboxes is click, update the graph.
  choiceContainer.find("input").click(plotAccordingToChoices);
 
  function plotAccordingToChoices() {
    // Start off with an empty array for our data.
    var data = [];
    // Select the checkboxes that are ticked and get the data out of the dataset variable and put in to the data variable defined above.
    choiceContainer.find("input:checked").each(function () {
      var key = $(this).attr("name");
      if (key && datasets[key])
        data.push(datasets[key]);
    });
    // Here we can set options for the graph.  For the x-axis we define it as "time" so that the dates appear rather than the Unix timestamp. For the y-axis we set the maximum value.
    var options = {
      xaxis: { mode: "time" },
      yaxis: { max: '. $maxcount .', tickDecimals: 0 },
      grid: { hoverable: true },  // We set hoverable to true to allow the tooltips
      legend: { noColumns: 4, container: $("#flot-legend") } // Create a legend so the user can easily see which series response to which colour.  We also set the container so it does not cover the graph.
    };
    // Create the graph
    $.plot($("#graph"), data, options);
 
    // Set up the tooltips on each point for when the user hovers the mouse over it.
    var previousPoint = null;
    $("#graph").bind("plothover", function (event, pos, item) {
      $("#x").text(pos.x.toFixed(2));
      $("#y").text(pos.y.toFixed(2));
      if (item) {
        if (previousPoint != item.datapoint) {
          previousPoint = item.datapoint;
          $("#tooltip").remove();
          var x = item.datapoint[0].toFixed(2),
               y = item.datapoint[1].toFixed(2);
          // Here you can set the text that appears in the tooltip.
          showTooltip(item.pageX, item.pageY, "<strong>Nodes:</strong> " + Math.round(y) + "<br /><strong>Date</strong> " + showLocalDate(x) + "<br /><strong>Node type:</strong> " + item.series.label);
        }
      }
      else {
        $("#tooltip").remove();
        previousPoint = null;            
      }
    });	
  }
  // When the page loads, initiate the graph.
  plotAccordingToChoices();
  })', 'inline', 'footer');
  // We need to set out the placeholders for our graph, legend and checkboxes.
  $output .= '<div id="graph" style="width:650px;height:480px;"></div>';
  $output .= '<div id="flot-legend" style="margin-top:10px;width:650px;"></div>';
  $output .= '<div id="choices" style="margin-bottom: 10px;"><h3>Show/hide node types</h3></div>';
  return $output;
}
 
/**
 * Convert a date in the format Y-m-d to a Unix timestamp.
 */
function myflot_unix($time, $utc = TRUE) {
  list($year, $month, $day) = explode('-', $time);
  $time = mktime(0, 0, 0, $month, $day, $year);
  if ($utc) $time = $time * 1000;
  return $time;
}

For more information check out the Flot API documentation.

All drivers were installed correctly and the onboard sound was disabled.

But when viewing the supported formats for the playback device, it only listed 2 channels. Unfortunately I have been unable to change this, although I have got full 5.1 DTS and DD sound coming through to the receiver, by selecting S/PDIF pass-through in all the applications (even through I was using HDMI, not optical). The only problem with this is music comes through stereo only as WMP doesn’t pass-through stereo sound through as 5.1 in anyway and foobar doesn’t support pass-through, although there is a component you can download, but this wouldn’t work for my sound card as I think the DVD-A disc rips are 6 channel rather than 2.

I think the only way of getting proper 5.1 surround sound out of music, will be to buy another sound card and use another audio input in to the receiver.

Driver wise, I used the latest Catalyst package (9.6) and the Realtek ATi HDMI Audio driver (2.28). At this point I would also like to point out that the download speed from Realtek is diabolical. I ended up getting the filename of the file and searching on Google to find a mirror. Don’t be fooled by the other driver download sites, as they just directly link to the Realtek driver rather than a proper mirror.

Server

Before with MediaPortal I was able to set up multiple shares on a file server running Windows Vista. This has now been changed to running Windows Home Server. The initial steps to install WHS (Windows Home Server) were not as straight forward as I initially planned as installation requires all connected drives to be wiped. So I unplugged the 2 1TB data drives leaving the 500GB OS drive to be formatted. Installation of WHS was easy, as it normally is with Windows. I have no CD/DVD drive in my file server, so I had to resort to creating a bootable USB stick with the WHS CD files on it. This installed without problem.

Once WHS was up and running, it is just a matter of plugging a new hard drive in and WHS adds it to the array. Unfortunately this wipes all the data from the disk, so I had to connect them to another computer, copy the data to the computer, connect the drive to the file server, then add the drive to the array, then move the files from the other computer to the file server.

This was time consuming but worth it. I now have a 4TB array with lots of DVD backups as well as music and a backup of personal documents, which can be recovered if there is a problem with the other computers in the house.

HTPC configuration

First step was to reformat the HTPC and install Windows 7 RC. This went smoothly and works pretty much as expected. The only problem being the sound, but I will get on to that in another post.

I chose to use Windows Media Centre as the UI rather than MediaPortal this time as it has better support for a remote in the future which means I can hide the keyboard and mouse.

Using WMC provides a few problems.

• Metadata
• Thumbnails/Images
• MKV/Avi support

Metadata

To get the meta data for my films, I used browser. This is a great bit of software that allows you to get the synopsis as well as actors/genre/director(s) of each film as well as a smaller thumbnail and a large image to be used as a backdrop. It has full support for TV shows as long as you store all your videos in the right folder structure.

Thumbnails/Images

I opted for MediaBrowser which plugs straight in to WMC creating a new entry on the main navigation. MediaBrowser is currently free but looks to be becoming a commercial product on a yearly licence, but assuming it continues to improve, it should be worth it.

MKV/Avi support

I initially looked at passing on MKV files on to an external player which you can do within MediaBrowser, but in the end chose to use the Shark 007 codec pack which allows WMC to play MKV H264 files perfectly, with the ability to rewind/fastforward pause etc within WMC.

In my case it was caused by the Secure Pages module. To fix this add the following line to your Secure Pages configuration under Ignore pages:

*ajax*

imce*

Go back to your node add/edit page and you should now have the add button in IMCE.

Yslow has yet to be updated, neither has CSSViewer. The Web Developer Toolbar and Firebug are both up to date though.

Google Gears is also not available yet, but Google has released another addon for Firefox called Page Speed. Page Speed, much like Yslow, is used to evaluate the performance of webpages as well as giving suggestions on how to improve the performance.

Create a new module, I will call mine node_publish.

The first thing I will do is create a callback function that will be used to publish the node. To do this, I will first create a menu item using hook_menu().

function node_publish_menu() {
  $items['node/%/publish'] = array(
    'title' => 'Node published',
    'page callback' => 'node_publish_publish',
    'page arguments' => array(1),
    'access arguments' => array('administer nodes'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

This uses the menu path of node//publish, much the same way that node//delete and node//edit work. This will call the function node_publish_publish.

function node_publish_publish($nid) {
  if (is_numeric($nid)) {
    db_query("UPDATE {node} SET status = 1 WHERE nid = %d", $nid);
  }
  if (isset($_REQUEST['destination'])) {
    drupal_goto($_REQUEST['destination']);
  }
  else {
    drupal_goto('node/'. $nid);
  }
}

This function takes the nid out of the path and checks to make sure it is numeric, if it is we set the status to published for that node.

Once the node is published, we will redirect the user to another page. In this case I have looked to see if a destination is already set, if so go to it, otherwise return to the node view.

Now you can create a link to node//publish in any of your other modules or views which will publish the node. But this tutorial is going to expand to adding a button on to the node edit form to allow you to publish, rather than having to check the Published box then press Submit.

function node_publish_form_alter(&$form, $form_state, $form_id) {
  global $user;
  global $base_url;
  if (strstr($form_id, '_node_form') && $form['nid']['#value'] != '' && $form['options']['status']['#default_value'] == 0) {
    if (user_access('administer nodes')) {
      $form['buttons']['publish'] = array(
        '#type' => 'button',
        '#value' => 'Publish',
        '#submit' => FALSE,
        '#attributes' => array(
          'onclick' => 'return false;',
          'style' => 'display:none;',
        ),
      );
      drupal_add_js('$(document).ready(function() {
        $("#edit-publish").show();
        $("#edit-publish").click(function() {
          window.location = "'. $base_url .'/node/'. arg(1) .'/publish";
          return false;
        });
      });', 'inline', 'footer');
    }
  }
}

The above should be self explanatory to most people, but for those that it isn’t:

First we get the data for the $user object and the $base_url of the site. Then we check to make sure the form_id ends with _node_form as this will cover all nodes. We then make sure that the $form array doesn’t have an empty nid value, if it does then the form is for a new node and shouldn’t feature the publish button. We then check to make sure that the node isn’t already published, if it is there is no point in showing the publish button.

We then perform a check to make sure the user has access to publish nodes. If they have then we add in a simple button with an onclick attribute of return false, which will stop it acting like a submit button for users with javascript. For users without javascript the style attribute will remove the button from view allowing the user to use the checkbox and press submit.

The jQuery that we have firsts shows the button, as it is hidden by default, then set up a click function for the button. We direct the user to the publish page which will then take them to the node view. Alternatively you can modify the jQuery to do a POST action and publish the node in the background and also check the published box allowing further modification of the node.

In your content type, go to Display fields and set the Full node to <Hidden>. This will take the images out of the $content variable.

Then in your theme, copy the existing node.tpl.php and create a new identical file called node-album.tpl.php (the album part with be the content type name that you used from the tutorial.)

Below the content section, add the following PHP code:

<?php
$images = $node->field_images;
if (count($images) > 0):
  $rows = array();
  $images_per_row = 3;
  $i = 0;
  $row = 0;
  foreach ($images as $image) {
    $rows[$row][$i] = '<a class="gallery-thumbs" title="'. htmlspecialchars($image['data']['description']) .'" rel="lightbox[photo_gallery-'. $node->nid .']" href="'. imagecache_create_url('lightbox', $image['filepath']) .'">'. theme('imagecache', 'thumbnail', $image['filepath'], $image['data']['title'], $image['data']['title']) .(trim($image['data']['description']) != '' ? '<br /><small>'. $image['data']['description'] .'</small></a>' : '');
    $i++;
    if ($i == $images_per_row) {
      $row++;
      $i = 0;
    }
  }
?>
<table class="views-view-grid">
  <tbody>
    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $row_class = 'row-' . ($row_number + 1);
        if ($row_number == 0) {
          $row_class .= ' row-first';
        }
        elseif (count($rows) == ($row_number + 1)) {
          $row_class .= ' row-last';
        }
      ?>
      <tr class="<?php print $row_class; ?>">
        <?php foreach ($columns as $column_number => $item): ?>
          <td class="<?php print 'col-'. ($column_number + 1); ?>">
            <?php print $item; ?>
          </td>
        <?php endforeach; ?>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>
<?php else: ?>
  <p>No images in album</p>
<?php endif; ?>

The table code is a direct copy from views-view-grid.tpl.php so the code should look identical to the Album view.

Replace the following with your own settings:

imagecache_create_url('lightbox', $image['filepath'])

Change lightbox for the name of the imagecache preset that should open up within the lightbox.

theme('imagecache', 'thumbnail', $image['filepath'], $image['title'], $image['title'])

Change thumbnail to the name of the imagecache preset that should be displayed.

To add more columns to your grid, change the $images_per_row variable.

This tutorial was written with the following versions of Drupal and module:

• Drupal 6.11
• CCK (Content Construction Kit) 6.x-2.2
• Views 6.x-2.5
• Filefield 6.x-3.0
• Imagefield 6.x-3.0
• ImageAPI 6.x-1.6
• Imagecache 6.x-2.0-beta9
• Lightbox2 6.x-1.9

Note: These were the latest versions as of writing this tutorial.

Installation

Install Drupal as normal and extract each of the modules to /sites/all/modules directory.

Navigate to /admin/build/modules and enable the following modules:

• Content
• Filefield
• Imagefield
• ImageAPI
• ImageAPI GD2 (unless your server is configured for Imagemagick, then enable the ImageMagick module instead)
• ImageCache
• ImageCache UI
• Lightbox2
• Views
• Views UI

Once you have ticked all the modules, press Save configuration.

Imagecache

You may wish to create more presets, but for this tutorial we will just create 2, a thumbnail for each image and a larger lightbox image.

Navigate to /admin/build/imagecache and click Add new preset.

Set the preset Namespace to thumbnail. Click Add Scale and Crop, set the width to 300 and the height to 200.

Then create a new imagecache preset with the name lightbox. This time select Add Scale and set the width to 800 and the height to 600.

CCK Imagefield

We will need to create a content type that we will use for our albums.  To keep this simple, I am calling mine Album with the machine name album.

Navigate to /admin/content/types and click Add content type.

Under Submission form settings, set the Title field name to Album name and set the Body field label to description.

Save the content type.

Next to the Album content type click manage fields. In the Add New field area, set the label to Images and the field name to images (to make it field_images), for the Type of data to store, select File then for Form element select Image.  Press Save.

You may need to set the Permitted upload file extensions.  By default mine was set to txt.  Change this to jpg gif jpeg png.

Under Global settings, tick the Required box and set the Number of values to Unlimited.  Leave the List field disabled and set the Description field to Enabled.

Then press the Save field settings button.

Now click the Display fields tab at the top of the page.

Set the Label to Hidden and set both the Teaser and Full node to Lightbox2: thumbnail->lightbox.

Now under /node/add/album we can add some images to go in to our album.

For now create 3 or 4 albums.

Under /admin/content/node you should now have some nodes.

Views

Navigate to /admin/build/views and click the Add tab at the top of the page.  Set the view name to something like albums, leave the View type set to node and click Next.

Set the title to Albums. For Style set to Grid then chose 3 columns and set Alignment to Horizontal.

For Use pager set to Full pager.  Then for Items per page, set to a multiple of 3, I am going to use 9 to give us a 3×3 grid of images. If you wish, you can set Use AJAX to Yes to stop the whole page being loaded on the pager.

Add the following Filters:

• Node: Published = On
• Node: Type = Album

Under Fields select Content: Images (field_images), Node: Body and  Node: Title.

Set Label to None and change Format to thumbnail image and set the Show value to 1 value. Tick the box that says Link this field to its node, this will allow the image to be clickable. Press Update.

For node body, delete the text in the Label field and press Update.  If you have used long descriptions for your albums, you may wish to use the Trim this field to maximum length to limit the length of the description.

For title, delete the Label text and tick the box next to Link this field to its node, press Update.

At the moment Drupal has these fields in the wrong order, so you will need to click the up and down arrow next to the + button on fields.

And reorder the fields in to the following order: Image –> Title –> Body or if you wish you can keep them how they are.

Under Relationships, click the + button and select Content: Images (field_images) – fid.

Tick the box that says Require this relationship and set the Delta to 1.  This will check to make sure that the album contains at least 1 image.  Setting Delta to all will result in odd behaviour in the album due to duplicates.

If you wish you can add some sort criteria so that the newest albums appear first etc.

On the left select Page from the drop down and click Add display.

Under Path set to albums.

Press Save.

Now if you navigate to /albums you can see your gallery in action.

For your album nodes, you can modify them however you want to get the display you are looking for, whether you use Panels or create a custom node-album.tpl.php is up to you.

Update: I have now written a tutorial on creating a grid of images within an album using the node-album.tpl.php method.

You can fix this without hacking the email_registration.module file.

Fix

While logged in as an admin (if you can’t get in to the site to login, go to http://www.domain.com/user, as this will only load up the main user login form and not the block), go to Admin –> Site Building –> Blocks.  Click Configure next to User login.  Under Block type, select the radio button that says Standard. Then save the block.  Now try to visit the site as an anonymous user and it should be working.

Hack fix

Within the email_registration.module file, you will need to add some code to the module.

On lines 59-62, you will find the following:

case 'user_login_block':
  $form['name']['#title'] = t('E-mail');
  $form['#validate'] = array('email_registration_user_login_validate' => array()) + $form['#validate'];
  break;

You need to change it to this:

case 'user_login_block':
  if (!empty($form[‘#validate’)) {
    $form['name']['#title'] = t('E-mail');
    $form['#validate'] = array('email_registration_user_login_validate' => array()) + $form['#validate'];
  }
  break;

Save the module and it should work as expected.

The problem

Logintoboggan adds the ability to change the appearance of the user login block to show just a link rather than the form that Drupal usually ships with, this in turn means that there are no $form array elements for hook_form_alter to use.