ChartJS Confluence User Macros

The Confluence ChartJS Macro is a set of Confluence user macros that enables you to put Chart.js diagrams on your Confluence pages. Confluence (server version) offers the option to create “User Macros”, little scripts that can be included in pages creating content on the fly. Chart.js is an open source charting script making use of the HTML5 canvas tag.

What is Confluence ?

ChartJS Confluence User MacrosI happen to be involved in the administration and operation of Atlassian applications. Confluence is Atlassian’s awesome Enterprise Wiki. I you haven’t heard of or used it yet, check it out. You can download a trial version right from their web site here: https://www.atlassian.com/software/confluence.

What is Chart.js

Chart.js is an open source charting script making use of the HTML5 canvas element. Six different chart types are available, each of them animated, with a load of customization options and interactivity extensions. I use the term “ChartJS” for the macros. The macros are based on ChartJS 1.5.

What is a Confluence User Macro ?

If you run your own Confluence instance you can, as an administrator, create custom “User Macros”, little scripts that can be included in pages creating content on the fly. With those macros you can create simple HTML code as well as utilize Velocity code accessing information from your Confluence database.

I will not address the basics of writing a user macro here. That is well documented in the Confluence documenation here.

Concept of the Confluence ChartJS Macro set

Using the Confluence ChartJS Macro set you can have several charts on one page but you need the Javascript only once on that page. That’s why I created a separate macro just for that script that you need to include only once.

  • ChartJS: Script (places the Chart.js Javasript on your page)

I took five of the six available chart types and created one macro each (except “Doughnut” which is included in the Pie Chart macro). You can include each one of them several times.

  • ChartJS: Bar Chart (creates a Chart.js bar chart)
  • ChartJS: Line Chart (creates a Chart.js line chart)
  • ChartJS: Pie Chart (creates a Chart.js pie or doughnut chart)
  • ChartJS: Radar Chart (creates a Chart.js radar chart)

ChartJS: Script

To use any of the Confluence ChartJS Macro, this script is needed once. You only need to include this macro once in your page, no matter how many of the other chart macros you use. During it’s execution, the script will check the chart type of each canvas element and process the corresponding code.

Options

No options.

Code

Show code...

ChartJS: Bar Chart

Include this macro in your page and use the configuration dialog to set your options and values.

  1. Edit your page. Insert the macro “ChartJS: Script” at the bottom of your page if not already done. You need the script macro only once on your page no matter how much other charts you include.
  2. Insert a “ChartJS: Bar Chart” macro at the position of your liking.
  3. In the macro dialog, enter a identifier for this chart. The identifier must be unique on your page. Don’t use any blanks. For example “MySixYearBarChart”.
  4. Enter a title in the field  “Chart Titles”. For example “The Last Six Years”.
  5. Scroll down until you see the field “Data Labels”. Let’s say you want to show values of the last six years. Enter “2010,2011,2012,2013,2014,2015”.
  6. Below that you will find the field “Data values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “123,245,99,105,186,123”.
  7. Save the macro and save the page.

Options

Bar Chart Macro DialogThere are several options you can adjust in this macro. Try them out until you reach the result you want.

Note: The Preview does not work in the options dialog since the script macro is separate and not available in the dialog itself.

Code

Show code...

ChartJS: Line Chart

Include this macro in your page and use the configuration dialog to set your options and values.

  1. Edit your page. Insert the macro “ChartJS: Script” at the bottom of your page if not already done. You need the script macro only once on your page no matter how much other charts you include.
  2. Insert a “ChartJS: Line Chart” macro at the position of your liking.
  3. In the macro dialog, enter a identifier for this chart. The identifier must be unique on your page. Don’t use any blanks. For example “MySixYearLineChart”.
  4. Enter a title in the field  “Chart Titles”. For example “The Last Six Years”.
  5. Scroll down until you see the field “Data Labels”. Let’s say you want to show values of the last six years. Enter “2010,2011,2012,2013,2014,2015”.
  6. Below that you will find the field “Data values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “123,245,99,105,186,123”.
  7. Save the macro and save the page.

Options

Line Chart Macro DialogThere are several options you can adjust in this macro. Try them out until you reach the result you want.

Note: The Preview does not work in the options dialog since the script macro is separate and not available in the dialog itself.

Code

Show code...

ChartJS: Pie Chart

The pie chart macro works a bit different than the other ones above. That is because a pie chart is not based on a coordinate matrix. There is no X or Y axis. You have to enter your
information about each slice differently.

  • Edit your page. Insert the macro “ChartJS: Script” at the bottom of your page if not already done. You need the script macro only once on your page no matter how much other charts you include.
  • Insert a “ChartJS: Pie Chart” macro at the position of your liking.
  • In the macro dialog, enter a identifier for this chart. The identifier must be unique on your page. Don’t use any blanks. For example “MySixYearPieChart”.
  • Enter a title in the field  “Chart Titles”. For example “The Last Six Years”.
  • Scroll down until you see the field “Slices”. You have to enter all information about each slice right here. Each slice block is separated by a semicolon. All slice properties are separated by a comma.
  • Each slice and its properties are specified in the format: Label, Value, Color, Highlight
    • Label: The text label of the slice.
    • Value: The numeric value of the slice, the amount that is.
    • Color: The color of the slice.
    • Highlight: The mouseover color of the slice.
  • In our example here, the first slice shall be: “2010,123,#F7464A,#FF5A5E”
  • The second slice shall be: “2011,245,#46BFBD,#5AD3D1”
  • The third slice shall be: “2012,99,#FDB45C,#FFC870”
  • The fourth slice shall be: “2013,105,#9E023D,#AF134E”
  • The fifth slice shall be: “2014,186,#A1B334,#B2C445”
  • The sixth slice shall be: “2015,123,#3456E5,#457FF6”
  • The string you need to enter in the “Slices” field is therefore:
    2010,123,#F7464A,#FF5A5E; 2011,245,#46BFBD,#5AD3D1; 2012,99,#FDB45C,#FFC870; 2013,105,#9E023D,#AF134E; 2014,186,#A1B334,#B2C445; 2015,123,#3456E5,#457FF6
  • Save the macro and save the page.

Options

Pie Chart Macro DialogThere are several options you can adjust in this macro. Try them out until you reach the result you want.

Note: The Preview does not work in the options dialog since the script macro is separate and not available in the dialog itself.

Code

Show code...

ChartJS: Pie Chart (Doughnut)

A Doughnut Chart is a deviation of the Pie Chart. It shows an opening in the middle of the pie, just like the shape of a doughnut. You have to use the same macro “ChartJS: Pie Chart”
and enter the values just the same way. The only parameter you have to change in the macro is, tick the option “Show as Doughnut”.

The above macro will look like this as a Doughnut Chart.

Options

Pie Chart Macro Dialog (Doughnut Option)There are several options you can adjust in this macro. Try them out until you reach the result you want. Make sure you tick the “Show as Doughnut” option.

Note: The Preview does not work in the options dialog since the script macro is separate and not available in the dialog itself.

Code

Is covered by the Pie Chart macro. See there.

ChartJS: Radar Chart

A Radar Chart shows your data in a spider web like matrix.

  • Edit your page. Insert the macro “ChartJS: Script” at the bottom of your page if not already done. You need the script macro only once on your page no matter how much other charts you include.
  • Insert a “ChartJS: Radar Chart” macro at the position of your liking.
  • In the macro dialog, enter a identifier for this chart. The identifier must be unique on your page. Don’t use any blanks. For example “MySixYearRadarChart”.
  • Enter a title in the field  “Chart Titles”. For example “The Last Six Years”.
  • Scroll down until you see the field “Data Labels”. Let’s say you want to show values of the last six years. Enter “2010,2011,2012,2013,2014,2015”.
  • Below that you will find the field “Data values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “123,245,99,105,186,123”.
  • Save the macro and save the page.

Options

Radar Chart Macro DialogThere are several options you can adjust in this macro. Try them out until you reach the result you want. Make sure you tick the “Show as Doughnut” option.

Note: The Preview does not work in the options dialog since the script macro is separate and not available in the dialog itself.

Code

Show code...

Troubleshooting

How do I create User Macros in Confluence

conf-usermacrosNote, if you are running an Atlassian Cloud version of Confluence, you cannot create User Macros. For good reasons (security), Atlassian has disabled that feature in their cloud. You can only create User Macros when you run Confluence on your own server.

Go to Administration – General Configuration -> User Macros.

I don’t know the color values

HSL Color PickerAll of the above macros offer the option to change colors. Most fields require the hex value of a color, some require the decimal values. Hex or decimal, both input formats define
the vlaue for Red, Green and Blue (RGB). The lowest value for each color is decimal 0 (hex 0), the highest is decimal 255 (hex F). Any combination of those three create a specific color.
If all three are 0, the color is black. If all three are 255, the color is white.

Other examples are (R,G,B):

  • 0,0,0 => Black
  • 255,0,0 => Bright Red
  • 0,255,0 => Bright Green
  • 0,0,255 => Bright Blue
  • 255,255,255 => White

Every other combination is one of 16.5 million color shades in between.

There is a free online service that makes it very easy for you to select a color and know the corresponding decimal or hex value of it.

  HSL Color Picker

My chart does not show

In most of the cases when the chart does not show, it is because you have included several chart macros but you did not give each one a unique identifier on your page. Remember, each Confluence ChartJS macro, no matter what type, needs to have a unique identifier on your page. Do not just use the default value.

Another reason could be that the amount of labels and values differ in the macro that is not displayed. Also, make sure that all commas and semicolons – the separators – are set right.

My chart does not show in the macro preview

Unfortuantely that is just so. The reason is that not all necessary code is available to the macro dialog because the ChartJS: Script macro is separate.

My chart does not show inside another macro

Unfortuantely that is just so. In some cases, the ChartJS macros do not work embedded in other Confluence macros. The Expand macro is one of them. This is a known bug at Atlassian, the creator of Confluence.

My data are external, e.g. in Excel

Unfortunately the chart macros cannot read label and data information from external sources. It is required to enter them in the macro dialog. In many cases you will have data prepared in Excel. We have created a sample Excel file of the above used example that shows how the label, value and pie entries can be prepared with a fairly simple formular.

369

Download

368





Your Rating
software image
Author Rating
1star1star1star1stargray
Aggregate Rating
5 based on 4 votes
Software Name
Confluence Chart.js Macro
Operating System
Confluence
Software Category
Add-ons
Price
EUR 0
Landing Page