Positioning PocketQuery.chart

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

1 answer

1 accepted

This widget could not be displayed.

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.

  1. 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;
  2. 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.
  3. 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.

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.

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.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Sep 17, 2018 in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

594 views 7 6
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you