nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Positioning PocketQuery.chart

Henning Hauschel

Hello.

First of all: Thanks to Scandio for PocketQuery. This add-on is awesome.

I´d like to setup a customer-dashboard in confluence, using multiple charts, based on some customer-data. The chart should be on the left side. On the right side I´d like to show some associated data in a table.

The charts are all based on a single select-statement, therefore I use only one template, which includes the different charts.

So far, I couldn´t find a way to get this to work. E.g. I´ve tried using the containerID but had no chance to use this inside a <div>

Thx for your support.

Best, Henning

Accepted answers

Carla Roocks (Scandio)

Hi Henning,

Glad to hear you're happy with Pocket Query!

This layouting issue is not trivial. I can offer you three quick fixes, which are not completely clean, but work.

Add some javascript to the template, that moves the generated chart div into the container you want it to have in:
```
&lt;script&gt;$('.pocket-chart').appendTo("#my-chart-cell")&lt;/script&gt;
```
Use two separate templates, one for the chart and one for the table (which means using two queries) and use the Confluence page layouts to build your dashboard.

Use CSS to float the generated divs into the right position:

&lt;script&gt;PocketQuery.chart()&lt;/script&gt;
$PocketQuery.template("default")


&lt;style&gt;
table.pocketquery-table {
	width: 50%;
	float: right;
}
.pocket-chart {
	width: 50%;
	float: left;
}
&lt;/style&gt;

I don't know of any way to set the target div directly without creating the Google visualization manually from scratch - which could also be an option, of course. Maybe our main PocketQuery developer @Felix Grund (Scandio) can come up with a more elegant way.

In any case, we will consider to offer a parameter for the target div in future versions of the plugin. Thank you for the idea!

Best regards

Carla

P.S.: The fastest way to get support is using the official PocketQuery label "addon-de.scandio.confluence.plugins.pocketquer" (without "y" at the end). It has the most watchers.

All comments

Carla Roocks (Scandio)

Hi Henning,

Glad to hear you're happy with Pocket Query!

This layouting issue is not trivial. I can offer you three quick fixes, which are not completely clean, but work.

Add some javascript to the template, that moves the generated chart div into the container you want it to have in:
```
&lt;script&gt;$('.pocket-chart').appendTo("#my-chart-cell")&lt;/script&gt;
```
Use two separate templates, one for the chart and one for the table (which means using two queries) and use the Confluence page layouts to build your dashboard.

Use CSS to float the generated divs into the right position:

&lt;script&gt;PocketQuery.chart()&lt;/script&gt;
$PocketQuery.template("default")


&lt;style&gt;
table.pocketquery-table {
	width: 50%;
	float: right;
}
.pocket-chart {
	width: 50%;
	float: left;
}
&lt;/style&gt;

In any case, we will consider to offer a parameter for the target div in future versions of the plugin. Thank you for the idea!

Best regards

Carla

P.S.: The fastest way to get support is using the official PocketQuery label "addon-de.scandio.confluence.plugins.pocketquer" (without "y" at the end). It has the most watchers.

Felix Grund (Scandio)

Hi Henning! All rendered PocketQuery templates will be in one div with class "pocketquery-view-container". So if you really need to use the Confluence page layout and split PocketQuery output into two sections, you'll need to use one of the approaches @Carla Harth described. In that case I would try to move the container with JavaScript after it was rendered (1. above). Or you could avoid using two Confluence page layout sections and do the layout in the PocketQuery with CSS. That would mean that the PQ container with class pocketquery-view-container takes the full width and you split the contents inside in two columns by CSS (3. above). Using two different queries (2. above) will work two, but you'll have to live with the overhead of executing two SQL queries instead of one. I can't come up with other ways then the 3 described above.

Carla Roocks (Scandio)

Hi Henning,

did my answer help? If it did, it would be great if you could accept it as the answer to your question!

If it didn't, please feel free to ask for further details.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

pocketquery