Load macro dynamically moves the charts

When I use this option in pocketquery the charts take aleatory different possitions... I've tried to "close" them using tables... but that's not working.

Is there any way to fix the charts to the possition it's suppose they have to stay?

Thanks in advance

7 answers

1 accepted

Hi Cuto!

I investigated in the recent issue. The thing is that if this worked before, it was kind of weird behaviour. If you included the "change params" template for one query, it should definitely only load this one query if you have dynamic load enabled. So it's intended behaviour that only your single query gets reloaded.

However, there is another strategy you can use: you'll have to separate your form from your queries and use this form to reload all your queries. For this you need some programming in JS and Velocity in a PocketQuery template. I'll demonstrate this with an example which is very similar to this thread.

I have two queries for my sample world database:

PopulationByContinent:

SELECT Name, Population
FROM Country
WHERE Continent = :Continent
ORDER BY Population DESC
LIMIT 5

PopulationByGNP:

SELECT Name, GNP
FROM Country
WHERE Continent = :Continent
ORDER BY Population DESC
LIMIT 5

I'm using a very simple bar chart template for both of these queries:

<script>
PocketQuery.chart('BarChart');
</script>

In the macros, I check the parameters Load macro dynamically and nothing else.

These queries both have a variable Continent so I want a form above those queries by which you can change the continent and the queries get reloaded. Since this form is for multiple queries, I need an own query and template that will generate that form. For my purpose, I query the Continents from the database and render them in a select box.

FormQuery:

SELECT DISTINCT Continent
FROM Country

Now the interesting part is definitely the template. Here I render a form and implement the JS logic to render the other templates.

<form id="my-pocketquery-form" class="aui">
    <div class="field-group">
        <label for="select-country">Choose Continent:</label>
        <select class="select" id="select-continent" name="select-continent">
            #foreach ($country in $result)
                <option value="$country.Continent" #if($country.Continent == 'Europe')selected="selected"#end>$country.Continent</option>
            #end
        </select>
    </div>
</form>
<script>
jQuery('#my-pocketquery-form select').change(function() {
    var newParameters = { Continent: jQuery('#select-continent').val() };
    jQuery('.pocketquery-dynamic-load').each(function() {
        var container = jQuery(this);
        var dataIndex = container.data('index');
        var data = PocketQuery.getDynamicLoadData(dataIndex);
        data.queryParameters = newParameters;
        PocketQuery.load({
            container: container,
            data: data
        });
    });
});
</script>

I embed a PocketQuery macro on top of my page:

image2016-3-9 17:33:56.png

The view will look like this:

image2016-3-9 17:34:38.png

When I change the value in the select box, both results will reload dynamically.

====================================

Additionally: you can also do all of this in a single query and template, so you'll have to embed only one PocketQuery macro. You can nest PocketQuery queries...

Query OneQueryToRuleThemAll:

SELECT DISTINCT Continent
FROM Country

Template OneTemplateToRuleThemAll:

 

<form id="my-pocketquery-form" class="aui">
    <div class="field-group">
        <label for="select-country">Choose Continent:</label>
        <select class="select" id="select-continent" name="select-continent">
            #foreach ($country in $result)
                <option value="$country.Continent" #if($country.Continent == 'Europe')selected="selected"#end>$country.Continent</option>
            #end
        </select>
    </div>
</form>
$PocketQuery.renderPocketQueryMacro("PopulationByContinent", {
    'page': $page,
    'parameters': {'Continent':'Europe'},
    'dynamicload': true
})
$PocketQuery.renderPocketQueryMacro("GNPByContinent", {
    'page': $page,
    'parameters': {'Continent':'Europe'},
    'dynamicload': true
})
<script>
jQuery('#my-pocketquery-form select').change(function() {
    var newParameters = { Continent: jQuery('#select-continent').val() };
    jQuery('.pocketquery-dynamic-load').each(function() {
        var container = jQuery(this);
        var dataIndex = container.data('index');
        var data = PocketQuery.getDynamicLoadData(dataIndex);
        data.queryParameters = newParameters;
        PocketQuery.load({
            container: container,
            data: data
        });
    });
});
</script>

====================================

Let me know if this helps!

Felix (Scandio) 

 

What to say Felix! I highly appreciate your efforts! If that working this approaches me to heaven!

I will test it tomorrow and I will let you know.

Is there any way I could take contact with you? Reporting, Confluence and JIRA are object at this moment of high interest in my job!

Regards

Sure, you can ask us anything Atlassian-related at atlassian[at]scandio[dot]de wink

Any one else has experienced this behaviour?

Sorry for the delay. I will dig in now...

After investigating, I can confirm that you found a bug in PocketQuery. I already implemented a fix and I wanted to ask you if you could test it? Please find a new PocketQuery version for testing here.

Hi Felix! Tried to reply yesterday... but the "anti-spam" measures of this site and my lack of "points" did not allow me...

2.06 - Snapshot fix the issue and there is a significant improvement in performance in displaying the charts.... BUT... I'am afraid that the dynamic parametters are affected and now once a parametter is modified only the chart displaying those parametters is updated being the others remaining static... what was not the case before...

Thanks a lot for your efforts Felix!

Hi Felix! Any advance related to the dynamic parametters issue of the 2.06 - Snapshot?

Thanks again!

 

Not so far, I have to reproduce the issue first and that needs some time.

Thanks for your dedication Felix! Everything you need helping you, please, do not hesitate!

Hi Cuto! Could you provide the storage format of your page? Tools > View Storage Format.

Hi Felix!

This is the result:

<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Time</ac:parameter></ac:structured-macro></p>
<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Tickets_Created_I_Count</ac:parameter><ac:parameter ac:name="parameters">E_Services=%&amp;B_Type=I,R,P&amp;D_Area=%&amp;C_Status=%&amp;A_Nodti=DTI,NODTI</ac:parameter><ac:parameter ac:name="allowgetparams">true</ac:parameter><ac:parameter ac:name="includechangetemplate">true</ac:parameter></ac:structured-macro></p>
<table>
<tbody>
<tr>
<td>
<p><strong>DTI/NODTI</strong></p>
<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Tickets_Created_I_Isdti</ac:parameter><ac:parameter ac:name="parameters">E_Services=%&amp;B_Type=I,R,P&amp;D_Area=%&amp;C_Status=%&amp;A_Nodti=DTI,NODTI</ac:parameter><ac:parameter ac:name="allowgetparams">true</ac:parameter></ac:structured-macro></p>
<p>&nbsp;</p></td>
<td>
<p>PAR TYPE</p>
<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Tickets_Created_I_Type</ac:parameter><ac:parameter ac:name="parameters">E_Services=%&amp;B_Type=I,R,P&amp;D_Area=%&amp;C_Status=%&amp;A_Nodti=DTI,NODTI</ac:parameter><ac:parameter ac:name="allowgetparams">true</ac:parameter></ac:structured-macro></p>
<p>&nbsp;</p></td>
<td>
<p><strong>PAR STATUS</strong></p>
<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Tickets_Created_I_Status</ac:parameter><ac:parameter ac:name="parameters">E_Services=%&amp;B_Type=I,R,P&amp;D_Area=%&amp;C_Status=%&amp;A_Nodti=DTI,NODTI</ac:parameter><ac:parameter ac:name="allowgetparams">true</ac:parameter></ac:structured-macro></p>
<p>&nbsp;</p></td>
<td colspan="1">
<p><strong>PAR PRIORITE</strong></p>
<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Tickets_Created_I_Priorite</ac:parameter><ac:parameter ac:name="parameters">E_Services=%&amp;B_Type=I,R,P&amp;D_Area=%&amp;C_Status=%&amp;A_Nodti=DTI,NODTI</ac:parameter><ac:parameter ac:name="allowgetparams">true</ac:parameter></ac:structured-macro></p>
<p>&nbsp;</p></td></tr></tbody></table>
<p><strong>PAR SERVICE</strong></p>
<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Tickets_Created_I_Departments</ac:parameter><ac:parameter ac:name="parameters">E_Services=%&amp;B_Type=I,R,P&amp;D_Area=%&amp;C_Status=%&amp;A_Nodti=DTI,NODTI</ac:parameter><ac:parameter ac:name="allowgetparams">true</ac:parameter></ac:structured-macro></p>
<p><strong>PAR ROOT_CAUSE</strong></p>
<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Tickets_Created_I_Root</ac:parameter><ac:parameter ac:name="parameters">E_Services=%&amp;B_Type=I,R,P&amp;D_Area=%&amp;C_Status=%&amp;A_Nodti=DTI,NODTI</ac:parameter><ac:parameter ac:name="allowgetparams">true</ac:parameter></ac:structured-macro></p>
<p><strong>PAR AREA</strong></p>
<p><ac:structured-macro ac:name="pocketquery"><ac:parameter ac:name="dynamicload">true</ac:parameter><ac:parameter ac:name="name">HD_Today_Tickets_Created_I_Area</ac:parameter><ac:parameter ac:name="parameters">E_Services=%&amp;B_Type=I,R,P&amp;D_Area=%&amp;C_Status=%&amp;A_Nodti=DTI,NODTI</ac:parameter><ac:parameter ac:name="allowgetparams">true</ac:parameter></ac:structured-macro></p>

 

Does this happen with the most recent Version 2.0.5?

Hi Felix! Could not reply yesterday because of the "3 points"... how to get "points" here???

Anyway, yes... I have the most recent version 2.0.5... but the issue is coming also from previous versions (I started with 2.0.1).

Thanks!

 

Hi Felix!

I've been testing and It works very well! With some changes I have now the possibility to modify several parametters avoiding that everything was updated every time I change only one parametter and I update the charts with a button.

It would be nice to have the possibility in charging the page without launching the default queries in the macros waiting the user to push the button... but I am convinced that this will come!!!

Thanks again!

Hi Cuto! Glad to hear it works! And yes, it will come! Just give us some time wink. By the way, we'd be very glad about a little review for PocketQuery at the Marketplace - if you haven't done so already.

And: I just released PocketQuery 2.0.6 that contains the fix with the move of the charts. You can replace the previous temporary version with it.

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Bridget Sauer
Published Thursday in Marketplace Apps

Calling all developers––You're invited to Atlas Camp 2018

 Atlas Camp   is our developer event which will take place in Barcelona, Spain  from the 6th -7th of   September . This is a great opportunity to meet other developers and get n...

73 views 0 5
Read article

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