Skip to main content
Question

Code Page with Pie Charts

  • July 15, 2019
  • 0 replies
  • 123 views
AdamKeever1
Forum|alt.badge.img+2
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:




    This topic has been closed for replies.

    EverettPatterso
    Forum|alt.badge.img+10

    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
    Forum|alt.badge.img+2
    • AdamKeever1
    • Author
    • Registered
    • July 16, 2019
    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:




    AdamKeever1
    Forum|alt.badge.img+2
    • AdamKeever1
    • Author
    • Registered
    • July 17, 2019
    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>

    AdamKeever1
    Forum|alt.badge.img+2
    • AdamKeever1
    • Author
    • Registered
    • July 17, 2019
    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>



    Terms & ConditionsAccessibility statement