Code Page with Pie Charts
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://...
Forum Discussion
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>
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>
- That looks awesome.
- I don't have any current use for the solution but thank you for posting the final code that ended up working for you.
- Looks good Adam!
What browser are you using? I couldn't get rid of the chart title and hamburger icon on IE - 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. - 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:
