Skip to main content
Skip table of contents

Rendering Query Result Multiple Times (with only one macro)

Maybe you have added multiple PocketQuery macros to one page before. This can become expensive, because every PocketQuery macro will invoke the execution of the underlying query. If your use case involves the results of one query (i.e. SQL/REST results) being displayed in one page multiple times (possibly with different visualizations), this article might be interesting for you.

To illustrate this, we will be using one SQL query to our sample World database:

SQL
SELECT Name, Population
FROM Country
WHERE Continent = 'Europe'
ORDER BY Population DESC
LIMIT 10

This query will retrieve the first 10 Names and Populations of Countries in Europe. With the default template, the result will look like this:

Now imagine, that we want to display this information as chart next to the table, something like this:

Since this is a Column Chart from the Google Chart library our template is as simple as:

CODE
<script>PocketQuery.chart('ColumnChart');</script>

But what do we do if we want both the table and the chart? One solution would be to create two queries with the same SQL statement and two different templates. However, as mentioned, this will execute the same query twice (this might not be so bad in fact if you use the Caching feature described in section Caching Query Results here).

A better solution might be to just render both visualizations from within the same PocketQuery template:

HTML
<style>
.pocketquery-result {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}
</style>
 
$PocketQuery.template("default")
 
<script>
PocketQuery.chart('ColumnChart');
</script>

There's a few takeaways here:

  • We are using CSS for a horizontal layout. You could achieve this in many other ways, e.g. by using float or flex.

  • We are using the $PocketQuery.template Velocity helper (see section The PocketQuery Velocity Helper here) to include the default template. You might as well include the code itself (by clicking the "Add default template" link when creating the template). Or, you may want to start developing templates in a more modular fashion and start including them with this helper (if you haven't seen it before).

  • We render the default template AND the column chart. One after the other. With one query.

The result will look like this:

You may feel somewhat stunned by this complexity. Note however, that this is an individual advanced use-case that definitely requires a bit of coding. We think it is another showcase that almost anything can be achieved with the right combination of queries, templates, and converters (not used in this example).

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.