Examples

Examples of how to extend QuickBase

Embedding multiple charts and graphs in a dashboard text panel

This is an example of the editable html code that helps you insert multiple graphics within a single "Text" panel of a QuickBase dashboard.
 
 
 
This permits them to be displayed side by side.
 
1. Create the first view you like.
2. Right click on web page (keep off a graphic) and view the "Page Source" of the html code.  There will be a lot of html code.
3. Look through the code until you find something like the following:
 
<iframe src="https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bcj3fw3vi&qid=40&generate=map"
scrolling="no" frameborder="0" width="800px" height="650px" marginwidth="0px" marginheight="0px" id="iframeDundas" name="iframeDundas">
</iframe>
 
4. Highlight the complete <iframe tag all the way through to and include the </iframe> closing iframe tag.
5. We need to edit the text so that the size will be smaller and it won't overpower the dashboard.  See the red text below.  Make yours the same.
 
<iframe src="https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bcj3fw3vi&qid=40&generate=map&width=600&height=400"
scrolling="no" frameborder="0" width="600px" height="400px" marginwidth="0px" marginheight="0px" id="iframeDundas" name="iframeDundas">
</iframe>
 
6. Then create your second view and do the same.  You should now have two new and edited iframe statements.
7. Next cut and paste the edited iframe statement text into their respective places inside the Example HTML CODE below, replacing the like statement with this new code.
 
 
EXAMPLE HTML CODE
________________________________________
<!BEGIN GRAPHS-->
<table>
<tr>
<td>
 
<iframe src="https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bcj3fw3vi&qid=40&generate=map&width=600&height=400"
scrolling="no" frameborder="0" width="600px" height="400px" marginwidth="0px" marginheight="0px" id="iframeDundas" name="iframeDundas">
</iframe>
 
</td>
<td>
 
<iframe src="https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bcj3fw3vi&qid=40&generate=map&width=600&height=400"
scrolling="no" frameborder="0" width="600px" height="400px" marginwidth="0px" marginheight="0px" id="iframeDundas" name="iframeDundas">
</iframe>
 
</td>
</tr>
</table>

<!--END GRAPHS-->
________________________________________
 
8. Highlight and copy everything between the two horizontal lines. Include everything from <!BEGIN GRAPHS--> to and including <!--END GRAPHS-->
9. Go to your application's dashboard and "Customize this page".
10. Add a New Section and select Text.
11. Click the HTML button of that panel's editor so it will understand that we are pasting in html code instead of plain text.
12.Paste the code into the "Text" panel
13. Save the dashboard
 
If all went well, both of the charts or graphs should be side by side in that "Text" panel.

Tags:

Rate This

Your rating: None Average: 3.6 (5 votes)

© 1997-2012 Intuit Inc. All Rights Reserved.

Online Database VeriSign Secured Web Based Software TRUSTe Certification Online Database SSAE Audit