Code Page with Pie Charts

  • 0
  • 1
  • Question
  • Updated 1 month ago
  • In Progress
  • (Edited)
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:




Photo of Adam Keever

Adam Keever

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

Posted 1 month ago

  • 0
  • 1
Photo of Everett Patterson

Everett Patterson

  • 1,058 Points 1k badge 2x thumb

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>
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
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:




Photo of AustinK

AustinK

  • 2,214 Points 2k badge 2x thumb
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.
(Edited)
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
Yes, it will make the chart smaller, but only the top left portion of the pie is visible:

Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
I changed to ifv=1 from ifv=0 and got this:

Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
Adding  transform-origin: 00% 00%; gave me this so I am getting closer:



All i need now is to get rid of the white space between the title and the pie.
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
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>

Photo of AustinK

AustinK

  • 2,214 Points 2k badge 2x thumb
I don't have any current use for the solution but thank you for posting the final code that ended up working for you.
Photo of Everett Patterson

Everett Patterson

  • 1,058 Points 1k badge 2x thumb
Looks good Adam!


What browser are you using? I couldn't get rid of the chart title and hamburger icon on IE


Photo of AustinK

AustinK

  • 2,214 Points 2k badge 2x thumb
What version of IE do you use? Edge is more current if you are forced to use it.

If I had to use IE I would get really comfortable using https://caniuse.com/ to search for the features that work and the ones that do not. It isn't perfect but it can let you know if what you are trying to do is even possible in that browser.
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
I use Chrome. I had to adjust the  transform-origin: 0% -20%; property to shift the charts up to where the title and hamburger icon were out of the frame. Not ideal, but it worked for this example. Here is what it looks like when I change the -20% for the vertical transform to 0%:



The javascript .hide() function works to hide elements (I have used it with the IOL technique from Dan Diebolt), but I don't know how to add that in to my HTML CSS page.

Here is the code for the hamburger icon in the console:


Here is the legend:


Here is the chart title:
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
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>



(Edited)
Photo of Adam Keever

Adam Keever

  • 2,430 Points 2k badge 2x thumb
Added this as a webpage widget to a dashboard page with a button bar: