Sample Page Code
Last updated
Last updated
Having a sample page for an App, specifically when it provides page macros, is a very useful thing. It gives you a quick way to check on the App’s functionality when you get Incident reports about it from your users or after you upgraded your Confluence version.
This page describes a quick and easy way to create such a page and provides the complete code for it.
In order to us this code you need the free “Confluence Source Editor” plugin from Atlassian installed on your site. You can find it here:
https://marketplace.atlassian.com/apps/1210722/confluence-source-editor?hosting=server&tab=overview
It will add a little button to the page editor menu bar (top right) that allows you to directly edit the page’s source code.
Create a new page. Give it a title and save it (the Confluence Source Editor only works on existing/saved pages)
Add the sample image (see below) as an attachment to the page.
Edit the page again
Click the Confluence Source Editor button. A new editor window will open on top.
Paste the sample code (see below). Tip: Expand the code and double-click in it. That will select all the code to copy to your clipboard.
Apply the source code editor
Save the page
<ac:layout>
<ac:layout-section ac:type="two_equal">
<ac:layout-cell>
<h1 class="auto-cursor-target">Bar Chart</h1>
<ac:structured-macro ac:macro-id="14fa8a6b-83a6-4dec-bfb6-07958e558fe7" ac:name="chartjs-bar-chart" ac:schema-version="1">
<ac:parameter ac:name="FillLineArea">true</ac:parameter>
<ac:parameter ac:name="LegendPosition">bottom</ac:parameter>
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th colspan="1">Type</th>
<th colspan="1">Color</th>
<th>Apples</th>
<th>Oranges</th>
<th colspan="1">Bananas</th>
<th colspan="1">Mangos</th>
<th colspan="1">Grapes</th>
</tr>
<tr>
<td>Maximum</td>
<td colspan="1">bar</td>
<td colspan="1">red</td>
<td>19</td>
<td>29</td>
<td colspan="1">40</td>
<td colspan="1">34</td>
<td colspan="1">24</td>
</tr>
<tr>
<td>Minimum</td>
<td colspan="1">line</td>
<td colspan="1">blue</td>
<td>10</td>
<td>12</td>
<td colspan="1">20</td>
<td colspan="1">14</td>
<td colspan="1">4</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
<ac:structured-macro ac:macro-id="d132dbde-b795-4409-a80d-7959556a0e3f" ac:name="chartjs-bar-chart" ac:schema-version="1">
<ac:parameter ac:name="LegendPosition">bottom</ac:parameter>
<ac:parameter ac:name="Id">MyBarChartStacked</ac:parameter>
<ac:parameter ac:name="StackBars">true</ac:parameter>
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th colspan="1">Type</th>
<th colspan="1">Color</th>
<th>Apples</th>
<th>Oranges</th>
<th colspan="1">Bananas</th>
<th colspan="1">Mangos</th>
<th colspan="1">Grapes</th>
</tr>
<tr>
<td>Maximum</td>
<td colspan="1">bar</td>
<td colspan="1">red</td>
<td>19</td>
<td>29</td>
<td colspan="1">42</td>
<td colspan="1">34</td>
<td colspan="1">24</td>
</tr>
<tr>
<td colspan="1">Medium</td>
<td colspan="1">bar</td>
<td colspan="1">green</td>
<td colspan="1">10</td>
<td colspan="1">12</td>
<td colspan="1">20</td>
<td colspan="1">14</td>
<td colspan="1">95</td>
</tr>
<tr>
<td>Minimum</td>
<td colspan="1">bar</td>
<td colspan="1">blue</td>
<td>3</td>
<td>4</td>
<td colspan="1">9</td>
<td colspan="1">7</td>
<td colspan="1">3</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
</ac:layout-cell>
<ac:layout-cell>
<h1>Bubble Chart</h1>
<ac:structured-macro ac:macro-id="26b968b6-461f-4125-83c9-0743ab8ced4f" ac:name="chartjs-bubble-chart" ac:schema-version="1">
<ac:parameter ac:name="LegendPosition">left</ac:parameter>
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th>x</th>
<th>y</th>
<th>r</th>
<th colspan="1">Color</th>
</tr>
<tr>
<td colspan="1">2016</td>
<td colspan="1">-23</td>
<td colspan="1">-19</td>
<td colspan="1">12</td>
<td colspan="1">maroon</td>
</tr>
<tr>
<td colspan="1">2016</td>
<td colspan="1">-17</td>
<td colspan="1">-4</td>
<td colspan="1">16</td>
<td colspan="1">maroon</td>
</tr>
<tr>
<td colspan="1">2016</td>
<td colspan="1">13</td>
<td colspan="1">-13</td>
<td colspan="1">13</td>
<td colspan="1">maroon</td>
</tr>
<tr>
<td colspan="1">2016</td>
<td colspan="1">-16</td>
<td colspan="1">16</td>
<td colspan="1">16</td>
<td colspan="1">maroon</td>
</tr>
<tr>
<td>2017</td>
<td>12</td>
<td>-4</td>
<td>11</td>
<td colspan="1">blue</td>
</tr>
<tr>
<td>2017</td>
<td>-6</td>
<td>19</td>
<td>13</td>
<td colspan="1">blue</td>
</tr>
<tr>
<td>2017</td>
<td>23</td>
<td>12</td>
<td>16</td>
<td colspan="1">blue</td>
</tr>
<tr>
<td>2017</td>
<td>34</td>
<td>14</td>
<td>22</td>
<td colspan="1">blue</td>
</tr>
<tr>
<td>2018</td>
<td>-11</td>
<td>7</td>
<td>9</td>
<td colspan="1">olive</td>
</tr>
<tr>
<td>2018</td>
<td>9</td>
<td>8</td>
<td>10</td>
<td colspan="1">olive</td>
</tr>
<tr>
<td>2018</td>
<td>11</td>
<td>-11</td>
<td>11</td>
<td colspan="1">olive</td>
</tr>
<tr>
<td>2018</td>
<td>16</td>
<td>12</td>
<td>13</td>
<td colspan="1">olive</td>
</tr>
<tr>
<td>2019</td>
<td>6</td>
<td>23</td>
<td>17</td>
<td colspan="1">teal</td>
</tr>
<tr>
<td>2019</td>
<td>-12</td>
<td>-23</td>
<td>6</td>
<td colspan="1">teal</td>
</tr>
<tr>
<td>2019</td>
<td>-4</td>
<td>-21</td>
<td>12</td>
<td colspan="1">teal</td>
</tr>
<tr>
<td>2019</td>
<td>-22</td>
<td>17</td>
<td>14</td>
<td colspan="1">teal</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
</ac:layout-cell>
</ac:layout-section>
<ac:layout-section ac:type="single">
<ac:layout-cell>
<p>
<br/>
</p>
</ac:layout-cell>
</ac:layout-section>
<ac:layout-section ac:type="two_equal">
<ac:layout-cell>
<h1>Doughnut Chart</h1>
<ac:structured-macro ac:macro-id="a2c1f4ae-43bc-4d12-8286-22c72890cca3" ac:name="chartjs-pie-doughnut-chart" ac:schema-version="1">
<ac:parameter ac:name="ShowAsDoughnut">true</ac:parameter>
<ac:parameter ac:name="ChartTitle">My Chart.js Doughnut Chart</ac:parameter>
<ac:parameter ac:name="Id">MyDoughnutChart</ac:parameter>
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th>Apples</th>
<th>Oranges</th>
<th colspan="1">Bananas</th>
<th colspan="1">Mangos</th>
<th colspan="1">Grapes</th>
</tr>
<tr>
<td colspan="1">Color</td>
<td colspan="1">forestgreen</td>
<td colspan="1">orange</td>
<td colspan="1">darksalmon</td>
<td colspan="1">dodgerblue</td>
<td colspan="1">firebrick</td>
</tr>
<tr>
<td>Maximum</td>
<td>19</td>
<td>29</td>
<td colspan="1">40</td>
<td colspan="1">34</td>
<td colspan="1">24</td>
</tr>
<tr>
<td>Minimum</td>
<td>10</td>
<td>12</td>
<td colspan="1">20</td>
<td colspan="1">14</td>
<td colspan="1">4</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
</ac:layout-cell>
<ac:layout-cell>
<h1>Line Chart (straight lines)</h1>
<ac:structured-macro ac:macro-id="6f8fa262-738c-4413-a71f-2903a753caf0" ac:name="chartjs-line-chart" ac:schema-version="1">
<ac:parameter ac:name="StraightLines">true</ac:parameter>
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th colspan="1">Color</th>
<th>Apples</th>
<th>Oranges</th>
<th colspan="1">Bananas</th>
<th colspan="1">Mangos</th>
<th colspan="1">Grapes</th>
</tr>
<tr>
<td>Maximum</td>
<td colspan="1">dodgerblue</td>
<td>19</td>
<td>29</td>
<td colspan="1">40</td>
<td colspan="1">34</td>
<td colspan="1">24</td>
</tr>
<tr>
<td>Minimum</td>
<td colspan="1">red</td>
<td>10</td>
<td>12</td>
<td colspan="1">20</td>
<td colspan="1">14</td>
<td colspan="1">4</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
</ac:layout-cell>
</ac:layout-section>
<ac:layout-section ac:type="single">
<ac:layout-cell>
<p>
<br/>
</p>
</ac:layout-cell>
</ac:layout-section>
<ac:layout-section ac:type="two_equal">
<ac:layout-cell>
<h1>Pie Chart</h1>
<ac:structured-macro ac:macro-id="44bd2a04-6d99-49e7-afd5-e0d524a37d25" ac:name="chartjs-pie-doughnut-chart" ac:schema-version="1">
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th>Apples</th>
<th>Oranges</th>
<th colspan="1">Bananas</th>
<th colspan="1">Mangos</th>
<th colspan="1">Grapes</th>
</tr>
<tr>
<td colspan="1">Color</td>
<td colspan="1">forestgreen</td>
<td colspan="1">orange</td>
<td colspan="1">darksalmon</td>
<td colspan="1">dodgerblue</td>
<td colspan="1">firebrick</td>
</tr>
<tr>
<td>Maximum</td>
<td>19</td>
<td>29</td>
<td colspan="1">40</td>
<td colspan="1">34</td>
<td colspan="1">24</td>
</tr>
<tr>
<td>Minimum</td>
<td>10</td>
<td>12</td>
<td colspan="1">20</td>
<td colspan="1">14</td>
<td colspan="1">4</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
</ac:layout-cell>
<ac:layout-cell>
<h1>Line Chart (Filled)</h1>
<ac:structured-macro ac:macro-id="8255fcb7-bed4-49a3-8f84-d9a119bac289" ac:name="chartjs-line-chart" ac:schema-version="1">
<ac:parameter ac:name="FillLineArea">true</ac:parameter>
<ac:parameter ac:name="Id">MyLineChart2</ac:parameter>
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th colspan="1">Color</th>
<th>Apples</th>
<th>Oranges</th>
<th colspan="1">Bananas</th>
<th colspan="1">Mangos</th>
<th colspan="1">Grapes</th>
</tr>
<tr>
<td>Maximum</td>
<td colspan="1">dodgerblue</td>
<td>19</td>
<td>29</td>
<td colspan="1">40</td>
<td colspan="1">34</td>
<td colspan="1">24</td>
</tr>
<tr>
<td>Minimum</td>
<td colspan="1">red</td>
<td>10</td>
<td>12</td>
<td colspan="1">20</td>
<td colspan="1">14</td>
<td colspan="1">4</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
</ac:layout-cell>
</ac:layout-section>
<ac:layout-section ac:type="single">
<ac:layout-cell>
<p>
<br/>
</p>
</ac:layout-cell>
</ac:layout-section>
<ac:layout-section ac:type="two_equal">
<ac:layout-cell>
<h1>Polar Area Chart</h1>
<ac:structured-macro ac:macro-id="6ffbe95c-5ff0-4720-ba9f-7876c45536ae" ac:name="chartjs-polar-area-chart" ac:schema-version="1">
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th>Apples</th>
<th>Bananas</th>
<th>Mangos</th>
<th>Oranges</th>
<th>Cherries</th>
</tr>
<tr>
<td colspan="1">Color</td>
<td colspan="1">random</td>
<td colspan="1">orange</td>
<td colspan="1">darksalmon</td>
<td colspan="1">dodgerblue</td>
<td colspan="1">firebrick</td>
</tr>
<tr>
<td>Series</td>
<td>12</td>
<td>14</td>
<td>19</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
</ac:layout-cell>
<ac:layout-cell>
<h1>Radar Chart</h1>
<ac:structured-macro ac:macro-id="ce2b298d-67c4-4549-b91d-1ca6ff2e1cef" ac:name="chartjs-radar-chart" ac:schema-version="1">
<ac:parameter ac:name="LegendPosition">bottom</ac:parameter>
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<table class="wrapped">
<colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
<tbody>
<tr>
<th>Series</th>
<th colspan="1">Color</th>
<th>Apples</th>
<th>Bananas</th>
<th>Mangos</th>
<th>Oranges</th>
<th>Cherries</th>
<th colspan="1">Coconuts</th>
</tr>
<tr>
<td>Series1</td>
<td colspan="1">orange</td>
<td>12</td>
<td>10</td>
<td>19</td>
<td>7</td>
<td>8</td>
<td colspan="1">16</td>
</tr>
<tr>
<td colspan="1">Series2</td>
<td colspan="1">dodgerblue</td>
<td colspan="1">9</td>
<td colspan="1">11</td>
<td colspan="1">12</td>
<td colspan="1">14</td>
<td colspan="1">19</td>
<td colspan="1">10</td>
</tr>
</tbody>
</table>
<p class="auto-cursor-target">
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
</ac:layout-cell>
</ac:layout-section>
</ac:layout>