chart_pieCreate various types of charts using chart.js
TypeXAR
Developed by

Marius Dumitru Florea, slauriere

Active Installs27
Rating
Rate!
1 Votes
LicenseGNU Lesser General Public License 2.1
Compatibility

XWiki 8.4+

Installable with the Extension Manager

Description

Create various types of charts using Chart.js.

ChartJS Macro

{{chartjs}} macro allows you to use all the features of Chart.js inside a wiki page.

Usage

{{chartjs type="..." options="{...}"}}
{
  "labels": [...],
  "datasets": [...]
}
{{/chartjs}}

Parameters

NameDescriptionMandatoryDefault
type

The type of chart. Choose from: line, bar, radar, pie, doughnut, polarArea, bubble, scatter.

Yes
options

Advanced options specified as JSON. Checkout the Chart.js documentation for the available configuration options. In addition to the options that can be defined in the standard ChartJS library, the following options can be used in this macro:

  • "opacity": 0.8: makes it possible to define an opacity level for all the background colors.
  • "backgroundColors": ["#ff16e8", "#0018f4","#065d00"]: for charts of type line, bar, horizontalBar or radar, this option makes it possible to define one background color per data set or one per value, withtout the need to define the colors for each data set individually.
  • "afterValue": "%": suffixes the data label values with the given sign or string (e.g. "%", "€", etc.).
  • "options.scales.xAxes[0].ticks.afterValue: "%": (same for yAxes) suffixes the data labels with the given string.
  • "skipZeros": true: instructs the macro to not display values equalling to 0.
  • "tooltips": {"maxCharactersPerLine": 50}: in case of long data labels, this option makes it possible to display the full data label in the tooltips, on several lines.
  • "tooltips": {"position": {"left": 0.5, "bottom": 0.2}}: allows to position the tooltips at a specific position of the canvas computed as the canvas' width or height multiplied by the given value (of "left" or "bottom"). If no value is provided, the "average" positioner is used.
No
width

Width of the generated chart.

No
height

Height of the generated chart.

No
cssClass

Additional CSS class to be added to the chart container. It can be useful in particular for setting the canvas dimensions at the CSS level.

No

The content of the macro is in JSON format and matches the 'data' parameter from the Chart.js documentation. The content is mandatory.

Examples

{{chartjs type="pie"
  options="{~"backgroundColors~": [~"#ff16e8~", ~"#0018f4~",~"#065d00~"]}"}}
{
  "labels": [
    "Bug",
    "Improvement",
    "New Feature"
  ],
  "datasets": [{
    "label": "CKEditor",
    "data": [23, 17, 5]
  }, {
    "label": "Diagram",
    "data": [34, 11, 6]
  }]
}
{{/chartjs}}

pie.png

{{chartjs type="pie"
  options="{~"backgroundColors~": [~"#ff16e8~", ~"#0018f4~",~"#065d00~"],
            ~"legend~": {~"display~": false},
            ~"layout~": {
            ~"padding~": {
              ~"left~": 50,
              ~"right~": 50,
              ~"top~": 50,
              ~"bottom~": 50
              }
            },
            ~"plugins~": {~"datalabels~":
            {~"anchor~":~"end~", ~"align~": ~"end~"}}}"}}
{
  "labels": [
    "Bug",
    "Improvement",
    "New Feature"
  ],
  "datasets": [{
    "label": "CKEditor",
    "data": [23, 17, 5]
  }]
}
{{/chartjs}}

pie-with-labels.png

Table to ChartJS Macro

Draw charts using Chart.js and the data from a table.

Usage

(% id="myTable" %)
|=Header1|=Header2
|label|numeric value
...

{{tableToChartJS type="..." table="myTable" /}}

Parameters

NameDescriptionMandatoryDefault
type

The type of chart. Choose from: line, bar, radar, pie, doughnut, polarArea, bubble, scatter.

Yes
multipleDataSets

Whether the specified table includes multiple data sets.

Nofalse
table

Identifies the source table.

Yes
dataSetLabel

The index of the table column that represents the data set label.

No
options

Advanced chart options specified as JSON. Please refer to the documentation of the same 'option' parameter of the ChartJS macro.

No
width

Width of the generated chart.

No
height

Height of the generated chart.

No
cssClass

Additional CSS class to be added to the chart container.

No

This macro doesn't have any content.

Examples

Single Data Set

(% id="singleDataSet" %)
|=Issue Type|=Count
|Bug|23
|Improvement|17
|New Feature|5

{{tableToChartJS type="polarArea" table="singleDataSet" /}}

polarArea.png

Multiple Data Sets

(% id="multipleDataSets" %)
|=Issue Type|=CKEditor|=Diagram
|Bug|23|34
|Improvement|17|11
|New Feature|5|6

{{tableToChartJS type="doughnut" table="multipleDataSets" multipleDataSets="true" /}}

doughnut.png

(% id="multipleDataSetsLine" %)
|=Month|=2016|=2017
|January|65|61
|February|59|73
|March|80|82
|April|81|69
|May|56|70
|June|55|58
|July|40|47

{{tableToChartJS type="line" table="multipleDataSetsLine" multipleDataSets="true"/}}

line.png

(% id="multipleDataSetsRadar" %)
|=Month|=2016|=2017
|Eating|65|28
|Running|40|100
|Cycling|55|27
|Coding|56|96
|Designing|81|19
|Sleeping|90|40
|Drinking|59|48

{{tableToChartJS type="radar" table="multipleDataSetsRadar" multipleDataSets="true"/}}

radar.png

(% id="multipleDataSets" %)
|=Issue Type|=Project|=Count
|Bug|CKEditor|23
|Bug|Diagram|34
|Improvement|CKEditor|17
|Improvement|Diagram|11
|New Feature|CKEditor|5
|New Feature|Diagram|6

{{velocity}}
#set ($stackedBarOptions = {
  'scales': {
    'xAxes': [{
      'stacked': true
    }],
    'yAxes': [{
      'stacked': true
    }]
  }
})
{{tableToChartJS type="horizontalBar" table="multipleDataSets" multipleDataSets="true" dataSetLabel="1"
  options='$jsontool.serialize($stackedBarOptions)'/}}
{{/velocity}}

stackedHorizontalBar.png

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v1.1.6

  • Closed CHARTJS-21 Add an option for specifying the relative position of the tooltip with respect to the chart width or height

v1.1.5

  • Closed CHARTJS-20 In TableToChartJS, when a table data contains a suffix such as a percent, it needs to be cleaned up during the data parsing process

v1.1.4

  • Closed CHARTJS-19 Add possibility to add a suffix to data values (typically a percent or a currency sign)
  • Closed CHARTJS-18 Tooltip error when "tooltip.maxCharactersPerLine" is set and label is not a string
  • Closed CHARTJS-17 Ability to pass options in the macro content itself rather than as a macro parameter

v1.1.3

  • Closed CHARTJS-16 Add ability to display tooltips on multi-lines

v1.1.2

  • Closed CHARTJS-15 For hidden tables, the data table is not added to the canvas anymore
  • Closed CHARTJS-14 Add an option to include the legend items in the data labels
  • Closed CHARTJS-13 It should be possible to include line feeds in labels
  • Closed CHARTJS-12 With Google Chrome, semi-transparent background colors display unexpectedly when the chart width is low

v1.1.1

  • Closed CHARTJS-11 Custom data labels should be present only in the case of pies and doughnuts

v1.1

  • Closed CHARTJS-10 Display data set label in tooltip in the case of pie or doughnut with multiple data sets
  • Closed CHARTJS-9 Add parameter for attributing a specific CSS class to the chart container
  • Closed CHARTJS-8 Add parameters allowing to define the width or height of a chart
  • Closed CHARTJS-7 Ability to mention that the values should be suffixed by a percent sign
  • Closed CHARTJS-6 Ability to replace some data labels by others
  • Closed CHARTJS-5 Ability to skip the representation of dataset values equaling to 0
  • Closed CHARTJS-4 Add ability to specify colors and opacity via the options parameter
  • Closed CHARTJS-3 When table is hidden, move it to the canvas and show it, for accessibility purpose
  • Closed CHARTJS-2 Add a dependency to the datalabels-plugin
  • Closed CHARTJS-1 Upgrade the ChartJS dependency to version 2.7.3

v1.0

    Dependencies

    Dependencies for this extension (org.xwiki.contrib:application-chartjs-ui 1.1.6):

    Tags:
    Created by Marius Dumitru Florea on 2017/08/01 16:51
        

    Get Connected