Keep Up To Date On Your Data With Auto-Refreshing Charts
Wednesday, December 15th, 2010Recently in QuickBase Straight Up, we provided you with some tips for enhancing QuickBase dashboards and pages with jQuery. Here, we offer another way to get the most from your dashboard, by embedding auto-refreshing charts in iframes. It’s not a beginner-level project — you’ll have to get your hands dirty with a little bit of HTML — but we think you’ll be very pleased with the results.
Of course, QuickBase lets you embed charts in dashboards by default, but these images are static and don’t give you the kind of real-time access to your data that you may require. By embedding a frame with a refresh interval of 30 seconds or a minute, you can get an effortless real-time view of the latest changes to your QuickBase data.
For instance, let’s say your widget business manages its sales orders through QuickBase. A large volume of orders come in every day, and you want an easy way to keep tabs on which products are in the highest demand for the current day. The first step is to create a chart report that presents the information in the format you want it. In this case, we’ll use a pie chart to show the daily distribution of widget sales.
Once you have created your chart, the next step is to obtain the URL of the chart image (which is distinct from the URL of the QuickBase page on which the image resides). How to do this varies from browser to browser, but the first step is to right-click on the image. If an option called “Copy Image Address” or “Copy Image URL” is available, select that. Otherwise, select “Open Image in New Window” and copy the URL from that new window. In Internet Explorer, you may need to select “Properties” and copy the URL from the Properties window. The URL should look something like this:
https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bfjqnbu8m&qid=5
&generate=image
There are a couple changes to make here. First, after the parameter called "generate", change "image" to "map". Next, we’ll want to add some size parameters to the end of the URL so that the image can fit nicely on the dashboard. This can be done by inserting "&width=600&height=400" at the end of the URL. Note that 600 by 400 is just our recommended size; feel free to experiment with those values until you find the ideal resolution for your needs.
Now it’s time to add the chart to your QuickBase dashboard. Navigate to your application’s dashboard and click the “Customize this Page” link in the upper-right-hand corner of the page. On the customization page, click the “Add New Section” button and select the “Text” option. Click the “HTML” button in the new section’s toolbar to switch to HTML editing mode.
Now, insert the following code into the section:
<html>
<head>
<meta http-equiv="refresh" content="30" />
</head>
<body>
<table>
<tr>
<td>
<iframe id="chart1" src="chart URL here" width="600" height="400" scrolling="no" marginwidth="0"
marginheight="0" frameborder="0">
</iframe>
</td>
</tr>
</table>
</body>
</html>
In the <head> section of the code, the number 30 represents the refresh interval of the page in seconds. You can change this value to whatever you choose. In the <body> section, replace “chart URL here” with the image URL from earlier, making sure to preserve the quotation marks in the original HTML. Also, change the iframe’s width and height parameters to match those specified in the image URL. If you’d like to add multiple charts to your dashboard, simply duplicate the portion of code from <tr> to </tr> and fill in the other image URLs.
Congratulations! You now have an auto-refreshing dashboard - or maybe more than one.
Have you come up with any inventive uses for your auto-refreshing dashboard? Let us know!
Happy clicking –
Eric Segal
The Data Collaborative
