Create an Annotated Timeline with the Google Visualization API and QuickBase API

The Google Visualization API has a lot of really useful charts and graphs that, when combined with a web-based database like QuickBase, can really be powerful.

Google Annotated Timeline

Here’s a complete example of how to use the PHP SDK for QuickBase to get data from a QuickBase and use it side-by-side with the Google Visualization API to generate annotated time line. The example below is one I used to compare the total number of trials we get on our website with the number of inbound support cases we get.

You’re going to see some date manipulation going on here. QuickBase ouputs the ‘Date Created’ timestamp in milliseconds. I needed to turn this into a format that was easy for the Javascript date() function would be able to parse. I also wanted to normalize the dates so that I could group the total number of support cases by day.

<!--?php include('qb.php'); $quickbase = new QuickBase('','',true,'chljaara'); //replace chljaara with your table dbid $result = $quickbase-&gt;do_query('','123'); //replace 123 with your query id&lt;/p&gt;
&lt;p&gt;    $trials = array();&lt;/p&gt;
&lt;p&gt;    // build a 2d array for the Google chart&lt;br ?--> foreach ($result-&gt;table-&gt;records-&gt;record as $record)

$timestamp = round(((double)$record->f) / 1000, 0);
$date_string = date(“F j, Y”, $timestamp);

$case_type = (string) $record->f[1];

if(array_key_exists($date_string, $trials))
if(array_key_exists($case_type, $trials[$date_string]))
$trials[$date_string][$case_type] += 1;
$trials[$date_string][$case_type] = 1;
$trials[$date_string]= array();



Published byJosh McGinnis

Josh is a software engineer, leader, startup advisor for the LA Chamber of Commerce and consultant residing in the Los Angeles area. Josh is passionate about helping entrepreneurs and businesses reach their maximum potential.

1 Comment

  • Kevin

    November 6, 2012 at 7:57 pm Reply

    Is it possible to create a PHP page like this on external server, then load that into a QuickBase dashboard using $.load or $.get?

Post a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.