Tom Fotherby's Blog

The Google Charts API is great but it can’t handle date-based data. Lets say you want to plot some values over a timespan, how do you do it? One way is to sample the data at regular time intervals and plot it as normal. But if the timestamps you want to plot are not regular, the trick is to convert each date into a day offset and plot the offset whilst still labelling the axis with the date text.

This is an example of plotting date-based data on the X-axis:

In, PHP you set the first date as 0 and then work out the day difference for each subsequent date. At the same time you need to store the text label for that date.

 $data):
           if ($firstDate == "")
              $firstDate = strtotime($date);

           $dayDiff = round((strtotime($date)-$firstDate) / (60 * 60 * 24));

           if ($dayDiff > $maxDay)
              $maxDay = $dayDiff;

           $googleChartDataX .= $dayDiff . ",";
           $googleChartDataY .= $data. ",";
           $googleChartLabsX .= "|". date("d/M/y",strtotime($date));
   endforeach;

   $axisScale    = "&chds=0,$maxDay,".min($dataSet).",".max($dataSet);
   $axisLabels   = "&chxt=x,y,x,y&chxl=0:{$googleChartLabsX}|1:|".min($dataSet)."|".((min($dataSet)+max($dataSet))/2)."|".max($dataSet)."|2:||Time scale||3:||Data values|";
   // Display a red line with a black dot at each point
   $dataLabels   = "&chm=D,FF0000,0,-1,1|o,000000,0,-1,4";
   $dataPoints   = "&chd=t:".substr($googleChartDataX,0,-1)."|".substr($googleChartDataY,0,-1);

   echo "";
?>

I created a small WordPress plugin that uses the above code to graph custom field data over time.

Our house is sprinkled with little geeky elements:

Subtle:
Not so subtle: (If you can spot 5 geeky things in this photo, you yourself are a geek…)
VERY subtle: (hint: Gnome Logo, “Perl”)
Not so subtle: (The doormat says “welcome” in ASCII Binary. The laptop is running Ubuntu Linux with Compiz snow flakes to add a Christmasy feel.)