ChartJS v2
ChartJS v2 is a set of Confluence user macros that enables you to put Chart.js 2.x diagrams on your Confluence pages.
Confluence (Server and Data Center) 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.
Download
https://github.com/glewe/confluence-user-macros/tree/master/src/chartjsv2
Installation
Create a Confluence user macro for each *.vtl file and paste the *.vtl code.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Troubleshooting
How do I create User Macros in Confluence
Note, 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
All 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.
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
Unfortunately, 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
Unfortunately, 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.
Last updated
