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

Marius Dumitru Florea

Active Installs3
Rating
Rate!
0 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

NameDescription
typeThe type of chart. E.g.: line, bar, horizontalBar, radar, pie, doughnut, polarArea, bubble, scatter. This parameter is mandatory.
optionsAdvanced options specified as JSON. Checkout the Chart.js documentation for the available configuration options. This parameter is optional.

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"}}
{
  "labels": [
    "Bug",
    "Improvement",
    "New Feature"
  ],
  "datasets": [{
    "label": "CKEditor",
    "data": [23, 17, 5]
  }, {
    "label": "Diagram",
    "data": [34, 11, 6]
  }]
}
{{/chartjs}}

pie.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

NameDescription
typeThe type of chart. E.g.: line, bar, horizontalBar, radar, pie, doughnut, polarArea, bubble, scatter. This parameter is mandatory.
tableIdentifies the source table (where to read the data from).
optionsAdvanced options specified as JSON. Checkout the Chart.js documentation for the available configuration options. This parameter is optional.
multipleDataSetsWhether the specified table includes multiple data sets.
dataSetLabelThe index of the table column that represents the data set label.

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

Dependencies

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

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

Get Connected