Discussions

 View Only
Expand all | Collapse all

Code Page with Pie Charts

  • 1.  Code Page with Pie Charts

    Posted 07-15-2019 19:58
    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:

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1797513/RackMultipart20190715-113611-ms6tj8-image_inline.png?1563221511">

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1797515/RackMultipart20190715-114785-w8eb1n-image_inline.png?1563221586">


  • 2.  RE: Code Page with Pie Charts

    Posted 07-15-2019 20:43

    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>


  • 3.  RE: Code Page with Pie Charts

    Posted 07-15-2019 21:11
    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:






  • 4.  RE: Code Page with Pie Charts

    Posted 07-15-2019 22:53
    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.


  • 5.  RE: Code Page with Pie Charts

    Posted 07-16-2019 16:07
    Yes, it will make the chart smaller, but only the top left portion of the pie is visible:



  • 6.  RE: Code Page with Pie Charts

    Posted 07-16-2019 16:18
    I changed to ifv=1 from ifv=0 and got this:



  • 7.  RE: Code Page with Pie Charts

    Posted 07-16-2019 17:17
    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.


  • 8.  RE: Code Page with Pie Charts

    Posted 07-16-2019 20:09
    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>



  • 9.  RE: Code Page with Pie Charts

    Posted 07-16-2019 20:57
    That looks awesome.


  • 10.  RE: Code Page with Pie Charts

    Posted 07-16-2019 21:36
    I don't have any current use for the solution but thank you for posting the final code that ended up working for you.


  • 11.  RE: Code Page with Pie Charts

    Posted 07-16-2019 21:50
    Looks good Adam!


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




  • 12.  RE: Code Page with Pie Charts

    Posted 07-16-2019 22:05
    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.


  • 13.  RE: Code Page with Pie Charts

    Posted 07-17-2019 13:45
    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%:

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1797971/RackMultipart20190717-81540-6jnreu-image_inline.png?1563370753">

    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:
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1797978/RackMultipart20190717-46909-psqg3d-image_inline.png?1563370967">

    Here is the legend:
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1797979/RackMultipart20190717-83953-9tt9tv-image_inline.png?1563371054">

    Here is the chart title:


  • 14.  RE: Code Page with Pie Charts

    Posted 07-17-2019 14:09
    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>





  • 15.  RE: Code Page with Pie Charts

    Posted 07-17-2019 14:28
    Added this as a webpage widget to a dashboard page with a button bar: