Page to display charts and image for visual reference

  • 0
  • 1
  • Question
  • Updated 3 days ago
  • In Progress
I worked out a way to compile icons generated by formula fields into a rich visual including an image and the result looks like this:


This does exactly what I needed; it shows a visual for a single record.

Now what I would like to accomplish is to show a similar visualization but rather than show the icons pertaining to an individual record, I would like to show pie charts that I have created for each of the joints in order to show the overall scoring of all records. It should look something like this:


This would be a great resource for our employees to be able to take initiative and help generate ideas to reduce ergonomic risk on jobs.

I imagine this being best tackled in a Page, but do not know how to go about starting. I have all of the pie charts created; the images in the above compilation are of the actual pie charts.

Any feedback would be greatly appreciated.
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
  • cautiously optimistic

Posted 1 month ago

  • 0
  • 1
Photo of Jeff Craig

Jeff Craig

  • 150 Points 100 badge 2x thumb

I am very much impressed and would like to display a similar approach.  I work in the safety industry and think this visual would be perfect to help bring awareness to our 2000 field employees.  How to go about making what you have; I don't know, but would be grateful if you could direct me in the right way.  Feel free to email me directly.  Great work.  I will be watching this thread.






Photo of Adam Keever

Adam Keever

  • 2,370 Points 2k badge 2x thumb
Hi Jeff. Thanks for the compliment. Here is the link to the original post:
https://community.quickbase.com/quickbase/topics/combine-fields-using-formula-rich-text

I would be glad to answer any questions you may have about setting up the formula rich text field to display the individual record visualization there.
Photo of Jeff Craig

Jeff Craig

  • 150 Points 100 badge 2x thumb
Adam,  Did you ever get the pie chart concept to work?
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
Not yet. I hope to spend some time on it this week.
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
I did get this working. The result is shown below. I can click any slice of any pie chart and drill down to a list of the records for each slice:



First I used a Code Page to bring the charts and image together:

<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<table>
<tr>
<td>
<iframe src="h t t p s://XXXX.quickbase.com/db/XXXX?a=q&qid=13&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 200%; height: 400px;  transform: scale(0.50); transform-origin:0% -20%; ">
</iframe>
</td>
<td>
<iframe src="h t t p s://XXXX.quickbase.com/db/XXXX?a=q&qid=11&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 200%; height: 400px;  transform: scale(0.50); transform-origin: 0% -20%; ">
</iframe>
</td>
<td>
<iframe src="h t t p s://XXXX.quickbase.com/db/XXXX?a=q&qid=9&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 200%; height: 400px;  transform: scale(0.50); transform-origin: 0% -20%; ">
</iframe>
</td>
<td>
<iframe src="h t t p s://XXXX.quickbase.com/db/XXXX?a=q&qid=15&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 200%; height: 400px;  transform: scale(0.50); transform-origin: 0% -20%; ">
</iframe>
</td>
<td>
<iframe src="h t t p s://XXXX.quickbase.com/db/XXXX?a=q&qid=10&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 200%; height: 400px;  transform: scale(0.50); transform-origin: 0% -20%; ">
</iframe>
</td>
<td>
<iframe src="h t t p s://XXXX.quickbase.com/db/XXXX?a=q&qid=12&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 200%; height: 400px;  transform: scale(0.50); transform-origin: 0% -20%; ">
</iframe>
</td>
<td>
<iframe src="h t t p s://XXXX.quickbase.com/db/XXXX?a=q&qid=14&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 200%; height: 400px;  transform: scale(0.50); transform-origin: 0% -20%; ">
</iframe>
</td>
</tr>
<tr>
<td colspan="7";>
<img src =h t t p s://XXXX.quickbase.com/up/XXXX/g/rn/eg/va/5%20joints_plus%20white%20header.jpg" width=100% style="display: inline; height: 60%; transform: scale(1.00); transform-origin: 0% 100%; ">
</td>
</tr>
<tr>
<td colspan="7";>
<iframe src ="h t t p s://XXXX.quickbase.com/db/XXXX?a=showpage&pageid=14&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 200%; height: 2200px;  transform: scale(0.085); transform-origin: 23% 6%; ">
</iframe>
</td>
</tr>
</table>

</body>
</html>

I had to add the last pie chart by itself to a Home Page and reference the Home Page in the above Code Page in order to get it centered and sized correctly; that's why the last item is a pageid instead of a qid. Not perfect, but it does the job.

Then I embedded that page in an iframe in another Code Page in order to position the chart / image combo:

<iframe src="h t t p s://XXXX.quickbase.com/db/XXXX?a=showpage&pageid=17&ifv=1"; scrolling="no"; frameborder="0"; style="display: inline; width: 85%; height: 100%; transform: scale(0.60); transform-origin: 0% 0%;"></iframe>

Then I used a webpage widget in a Home Page in order to add navigation buttons: