It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Positioning PocketQuery.chart

Henning Hauschel Jan 01, 2017

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

0 votes
Answer accepted
Carla Harth Jan 01, 2017

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.

Felix Grund Jan 02, 2017

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 Harth Jan 08, 2017

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
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published in Confluence

6 Awesome Ways to Apply Trello, JIRA and Confluence to your Project

I attended  Atlassian Summit 2019  and learned a lot from the presenters, attendees and knowledgeable Atlassian product managers. The presentations I attended focused on applying Agile, pla...

2,394 views 11 28
Read article

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you