Skip to main content
Question

Summary Table w/Arrows

  • August 21, 2013
  • 0 replies
  • 17 views

Is it possible to create a summary table (similar to the attached image) using native quickbase? I would like to create a summary table that shows sales trends comparing current month to prior month....using Arrows (up or down).

The example in the attached image was create using google visualization.

https://code.google.com/apis/ajax/playground/?type=visualization#arrow_formatter

thanks
This topic has been closed for replies.

  • Quickbase Alumni
  • August 21, 2013
Yes it is simple to do. If you use the QuickBase API method API_GenResultsTable with the &jsa=1 parameter you will return an array of arrays (instead of the normal XML response). This array of array structure is very similar to the Google's data table data structure that you see as the argument to the addRows method:

data.addRows([
['Computer', {v: 12, f: '12.0%'}],
['Sports', {v: -7.3, f: '-7.3%'}],
['Toys', {v: 0, f: '0%'}],
['Electronics', {v: -2.1, f: '-2.1%'}],
['Food', {v: 22, f: '22.0%'}]
]);

Don't let the object notation {v: *, f:*} fool you as this is just the value of the data and a formatted version of the data. The chart would basically be the same (sans the extra formattting cues) if you used this data:

data.addRows([
['Computer', 12],
['Sports' , -7.3],
['Toys' , 0],
['Electronics', -2.1],
['Food', 22]
]);

So the bottom line is that the format Google needs the data in is similar to the format API_GenResultsTable&jsa=1 will return the data from QuickBase and can be cleaned up with one loop through the data. Now the more essential thing is that the above data is aggregate data. The raw data you get from the API will have multiple records for every category such as "Computer" for both the current and previous months. You would have to process this data to condense it to the aggregate form of data that feeds the Google Visualization. The easiest way to do this is with Underscore library which QuickBase itself uses. These are precisely the steps used to create the Vendelay Industries demo which uses Google Visualizations:

https://haversineconsulting.quickbase.com/db/bhf8pmjat