Does anyone know how to code a page to display pie charts sized so that 7 fit across the screen in one row?I am using a code page with the following:<table><tr><td><embed src="h t t p s://XXXXX.quickbase.com/db/XXXXX?a=q&qid=13&ifv=0" width=14%></td><td><embed src="h t t p s://XXXXX.quickbase.com/db/XXXXX?a=q&qid=11&ifv=0" width=14%></td> <td><embed src="h t t p s://XXXXX.quickbase.com/db/XXXXX?a=q&qid=9&ifv=0" width=14%></td> <td><embed src="h t t p s://XXXXX.quickbase.com/db/XXXXX?a=q&qid=15&ifv=0" width=14%></td> <td><embed src="h t t p s://XXXXX.quickbase.com/db/XXXXX?a=q&qid=10&ifv=0" width=14%></td> <td><embed src="h t t p s://XXXXX.quickbase.com/db/XXXXX?a=q&qid=12&ifv=0" width=14%></td> <td><embed src="h t t p s://XXXXX.quickbase.com/db/XXXXX?a=q&qid=14&ifv=0" width=14%></td></tr></table>The charts show up like this:The charts are there, they are just large and can only be partially viewed using the scroll bars:I get the same result using <iframe>.If i set the size to match the highcharts container (width: 588px & height: 600px), then the scroll bars go away and I see the whole chart, but that is too big to fit all 7 across the screen in one row.I can manually adjust width and height in the <svg> element and it changes the size of the pie chart, but have not figured out how to leverage that for my code page:

Added this as a webpage widget to a dashboard page with a button bar:

I was trying something similar this morning. You can use HTML table and iframe with CSS.<table><tr><td style="display: inline; float: left; height: 550px; width: 28%;"></><iframe src="https://myurl.quickbase.com/db/myurl?a=q&qid=5&ifv=0"; scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="display: inline; float: left; align: middle; transform: scale(0.70); height: 550px; width: 77%;"></iframe></td></tr></table>

Thanks Everett. When I use that code and sub in 14% for the width to make all 7 pies fit in one row it ends up looking like this:

Did you make any changes to the "transform: scale(0.70)" part?Without testing it myself I would just try a lower scale number and see if that even changes anything for you. You might need to make adjustments to the Height option too, I don't really have the reports to test this or I would try and get you a better answer.

Yes, it will make the chart smaller, but only the top left portion of the pie is visible:

Code Page with Pie Charts | Qrew Discussions

14 Replies

EverettPatterso
Qrew Captain
5 years ago

I was trying something similar this morning. You can use HTML table and iframe with CSS.

<table>
<tr>
<td style="display: inline; float: left; height: 550px; width: 28%;"></><iframe src="https://myurl.quickbase.com/db/myurl?a=q&qid=5&ifv=0"; scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="display: inline; float: left; align: middle; transform: scale(0.70); height: 550px; width: 77%;"></iframe></td>
</tr>
</table>
AdamKeever1
Qrew Commander
5 years ago
Thanks Everett. When I use that code and sub in 14% for the width to make all 7 pies fit in one row it ends up looking like this:
- AustinK
  Qrew Commander
  5 years ago
  Did you make any changes to the "transform: scale(0.70)" part?
  
  Without testing it myself I would just try a lower scale number and see if that even changes anything for you. You might need to make adjustments to the Height option too, I don't really have the reports to test this or I would try and get you a better answer.
- AdamKeever1
  Qrew Commander
  5 years ago
  Yes, it will make the chart smaller, but only the top left portion of the pie is visible:
- AdamKeever1
  Qrew Commander
  5 years ago
  I changed to ifv=1 from ifv=0 and got this:
AdamKeever1
Qrew Commander
5 years ago
After some manipulation i was able to come up with an interim page that has all of the pie charts and drilldown capability:

It could use some optimization, like small titles for the charts. Here is the code that provided this page:

<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>
- AlexCertificati
  Qrew Cadet
  5 years ago
  That looks awesome.
- AustinK
  Qrew Commander
  5 years ago
  I don't have any current use for the solution but thank you for posting the final code that ended up working for you.
- EverettPatterso
  Qrew Captain
  5 years ago
  Looks good Adam!
  
  What browser are you using? I couldn't get rid of the chart title and hamburger icon on IE
AdamKeever1
Qrew Commander
5 years ago
The transform-origin property shifts the pies up so the title and hamburger are out of frame and this puts the pies at the tippy top of the page. To get the pies down from the top and center the whole visualization, I created another code page to display the first code page in an iframe:

<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: 100%; height: 100%; transform: scale(0.70); transform-origin: 0% 60%;"></iframe>
- AdamKeever1
  Qrew Commander
  5 years ago
  Added this as a webpage widget to a dashboard page with a button bar: