ChartJS v2 Confluence User Macros

The Confluence ChartJS v2 Macro is a set of Confluence user macros that enables you to put Chart.js 2.x 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 v2I 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 v2

Chart.js is an open source charting script making use of the HTML5 canvas element. Several chart types are available, each of them animated, with a load of customization options and interactivity extensions. A major new feature in Chart.js 2.x is that you can display more than one data series in each diagram.

My Confluence macros here are based on ChartJS 2.x and support two datasets.

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 v2 Macro set

Using the Confluence ChartJS v2 Macro set you can have several charts on one page but you need the core 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 v2: Script (places the Chart.js Javasript on your page)

I created several Confluence user macros for the following chart types. You can include each one of them several times on a page.

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

ChartJS v2: Script

To use any of the Confluence ChartJS v2 Macros, this script (the core 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 v2: Bar Chart

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

  • Edit your page. Insert the macro “ChartJS v2: 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 v2: Bar 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 “MySixYearBarChartSingle”.
  • Enter a title in the field  “Chart Titles”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”.
  • Below that you will find the field “Dataset 1 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

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Show code...

ChartJS v2: Bar Chart (Double Dataset)

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

  • Edit your page. Insert the macro “ChartJS v2: 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 “MySixYearPieChartSingle”.
  • Enter a title in the field  “Chart Title”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”
  • Enter the “Dataset 1 Legend”.
  • Below that you will find the field “Dataset 1 values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “97,111,54,45,99,77”.
  • Enter the “Dataset 1 Colors” in hexadecimal format (see bottom of this page to find the right color values).
  • Check the “Show Second Dataset” box
  • Enter the “Dataset 2 Legend”.
  • Below that you will find the field “Dataset 2 values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “97,111,54,45,99,77”.
  • Enter the “Dataset 2 Colors” in hexadecimal format (see bottom of this page to find the right color values).
  • Save the macro and save the page.

Options

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Is covered by the Bar Chart macro. See there.

ChartJS v2: Bar Chart (Mixed)

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

  • Edit your page. Insert the macro “ChartJS v2: 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 v2: Bar 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 “MySixYearBarChartMixed”.
  • Enter a title in the field  “Chart Titles”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”.
  • Below that you will find the field “Dataset 1 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”.
  • Check the “Show Second Dataset” box
  • Below that you will find the field “Dataset 2 values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “97,111,54,45,99,77”.
  • Check the “Show Dataset 2 as a line”
  • Save the macro and save the page.

Options

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Is covered by the Bar Chart macro. See there.

ChartJS v2: Line Chart

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

  • Edit your page. Insert the macro “ChartJS v2: 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 v2: Line 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 “MySixYearLineChartSingle”.
  • Enter a title in the field  “Chart Titles”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”.
  • Below that you will find the field “Dataset 1 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

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Show code...

ChartJS v2: Line Chart (Double Dataset)

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

  • Edit your page. Insert the macro “ChartJS v2: 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 v2: Line 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 “MySixYearLineChartSingle”.
  • Enter a title in the field “Chart Titles”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”.
  • Below that you will find the field “Dataset 1 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

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Is covered by the Line Chart macro. See there.

ChartJS v2: 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 v2: 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 “MySixYearPieChartSingle”.
  • Enter a title in the field  “Chart Title”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”
  • Enter the “Dataset 1 Legend”.
  • Below that you will find the field “Dataset 1 values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “97,111,54,45,99,77”.
  • Enter the “Dataset 1 Colors” in hexadecimal format (see bottom of this page to find the right color values).
  • Save the macro and save the page.

Options

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Show code...

ChartJS v2: Pie Chart (Double Dataset)

  • Edit your page. Insert the macro “ChartJS v2: 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 “MySixYearPieChartSingle”.
  • Enter a title in the field “Chart Title”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”
  • Enter the “Dataset 1 Legend”.
  • Below that you will find the field “Dataset 1 values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “97,111,54,45,99,77”.
  • Enter the “Dataset 1 Colors” in hexadecimal format (see bottom of this page to find the right color values).
  • Save the macro and save the page.

Options

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Is covered by the Pie Chart macro. See there.

ChartJS v2: Pie Chart (Doughnut, Double Dataset)

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 v2: 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

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Is covered by the Pie Chart macro. See there.

ChartJS v2: Radar Chart

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

  • Edit your page. Insert the macro “ChartJS v2: 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 v2: 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 “MySixYearRadarChartSingle”.
  • Enter a title in the field  “Chart Titles”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”.
  • Below that you will find the field “Dataset 1 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

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Show code...

ChartJS v2: Radar Chart (Double Dataset)

  • Edit your page. Insert the macro “ChartJS v2: 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 v2: 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 “MySixYearRadarChartSingle”.
  • Enter a title in the field  “Chart Title”. For example “The Last Six Years”.
  • Scroll down until you see the field “Dataset Labels”. Let’s say you want to show values of the last six years. Enter “2012,2013,2014,2015,2016,2017”.
  • Below that you will find the field “Dataset 1 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”.
  • Check the “Show Second Dataset” box
  • Below that you will find the field “Dataset 2 values”. Enter the values for those years, separated by a comma. Enter as much values as you have labels. Example: “97,111,54,45,99,77”.
  • Save the macro and save the page.

Options

There are several more parameters you can adjust in this macro. Try them out until you reach the result you want.

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

Code

Is covered by the Radar Chart macro. See there.

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.

Download

8

Installation

Download the repository and unzip it. In there you will find a *.vtl file for each macro described above.
Create a Confluence user macro for each and paste the *.vtl code.

Support

Use the forum to post your questions and comments:
https://forum.lewe.com

Please cast your vote












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