To plot a time series using the Drupal Flot module and Flot verions 0.8.x, you are going to need to patch the flot.module to load the new flot time library.


Find the section where the core flot library is loaded:

function template_preprocess_flot_graph(&$variables) {
. . .
  flot_add_js('core');
  if (isset($options->selection)) {
    flot_add_js('selection');
  }
  if ((isset($options->series->pie->show) && $options->series->pie->show) || (isset($options->pie) && $options->pie)) {
    $options = (object)((array)new flotStylePie() + (array)$options);
    flot_add_js('pie');
  }


You need to add this line:

  if ((isset($options->series->pie->show) && $options->series->pie->show) || (isset($options->pie) && $options->pie)) {
    $options = (object)((array)new flotStylePie() + (array)$options);
    flot_add_js('pie');
  }


Now find where the flot_add_js function is defined:

function flot_add_js($type = 'core') {
. . .
  if (!isset($added['orderBars']) && $type == 'orderBars') {
    drupal_add_js(drupal_get_path('module', 'flot') . '/js/jquery.flot.orderBars.js');
    $added['orderBars'] = TRUE;
  }
}


At the bottom of this function add the lines to load the Flot time library after the orderBars:

  if (!isset($added['orderBars']) && $type == 'orderBars') {
    drupal_add_js(drupal_get_path('module', 'flot') . '/js/jquery.flot.orderBars.js');
    $added['orderBars'] = TRUE;
  }
  if (!isset($added['time']) && $type == 'time') {
    drupal_add_js($path . '/jquery.flot.time.js');
    $added['time'] = TRUE;
  }


Now you can plot a time series. Here is some example code to plot a time series that I've included in a custom module function:

$j=0;
$d=array();
$now=time()*1000; // this is the reference point in time
$oneday=86400000; // milliseconds per day
for($i=0; $i < M_PI * 6; $i+=0.25) {
        $x=$i;
        $y=cos($i);
        $d[$j]=array(($x*$oneday)+ $now,$y);
        $j++;
}
$fd=new flotData($d);
$fd->label=t('cos(x)');
$options = new flotStyle();
$options->series->points->show=TRUE;
$options->series->lines->show=TRUE;
$options->xaxis = new stdClass();
$options->xaxis->mode = 'time';
$variables = array(
                'data'=>array($fd),
                'element'=>array('style'=> "width:100%;height:400px"),
                'zoom'=>TRUE,
                'legend'=>TRUE,
                'options'=>$options
                );
print theme('flot_graph', $variables);


For those not interested in looking under the hood of the flot module, a patch for it can be downloaded here: flot-08x_time_library-2449961-5.patch

Tags: