Trying to display a simple pie chart based on 1 record

  • 0
  • 1
  • Question
  • Updated 7 months ago
  • In Progress
  • (Edited)
I want to display a simple pie chart based on just 1 record (selected through filter).

In this table, I have 5 fields:

Year
Month
Minutes Purchased
Minutes Used
Minutes Available (formula)

In Excel it looks like this:



Is it possible to produce this with Quick Base?
Photo of Daniel

Daniel

  • 178 Points 100 badge 2x thumb

Posted 7 months ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
Native pie charts aggregate data across multiple records not across multiple fields in one record.

This might surprise many of you but this can be done using one formula field that contains some JavaScript and uses the OEH (On Error HTML) technique. The basic idea is to write some simple JavaScript that generates the chart and process that JavaScript so that it can be set as the value of an onerror attribute of HTML <img> element. I don't have time at the moment to create a demo but I put it on my to do list for the weekend.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
Sorry for the delay in posting this answer. I decided to not use OEH technique and instead used the standard IOL technique to implement this demo. 

View [Record ID#] = 1

https://haversineconsulting.quickbase.com/db/bnn72zwa8?a=dr&rid=1

Add New Record
https://haversineconsulting.quickbase.com/db/bnn72zwa8?a=nwr

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=653

Notes:

(1) Fee free to create a record with four numeric values for [North], [East], [South] and [West] representing sale prices or quantities. When the record is saved a Pie Chart will display,

(2) The Pie Chart is based on this Highchart demo

https://www.highcharts.com/demo/pie-basic

(3) QuickBase uses the requirejs module loader library to load its JavaScript libraries on demand. This is the essential code that you need to use to access Highcharts in your own customizations
require(["highcharts"], function(Highcharts) {
  // access Highcharts variable
});
(4) You may notice slight differences in behavior (eg color scheme, sector highlighting) between QuickBase generated Pie Charts and this demo which was modeled after a Highcharts demo. All of these behaviors can be controlled to your liking using the appropriate Highchart configuration option.