Last modified by sequilox on 2024/02/19 00:12

  • Martin Bek
    Martin Bek, 2018/04/10 18:01

    Hi,
    is it possible to use json/xml as datasource? Or is there a way how to use data from sql query? I would prefer not to use tables...

  • Marius Dumitru Florea
    Marius Dumitru Florea, 2018/04/11 09:57

    Hi Martin,

    I'm not sure I understand your question. The documentation says:

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

    Moreover, the chartjs macro (like any other macro or wiki syntax in general) can be put inside a Velocity macro, so you can generate the JSON dynamically.

    {{velocity}}
    ...
    {{chartjs type="pie"}}
    $jsontool.serialize($javaMapThatHoldsTheData)
    {{/chartjs}}
    {{/velocity}}
  • Martin Bek
    Martin Bek, 2018/04/13 12:10

    That is exactly what I needed. My problem was the empty line between {velocity} and {chartjs} so I saw "inline" error. Thank you.

  • Nicolas Lemoine
    Nicolas Lemoine, 2018/07/16 11:41

    It seems that changing the background color or the border color doesn't work on a line chart. I tried:

    {{chartjs type="line"}}
    {
      "labels": [
        "2016-01-08",
        "2016-01-15",
        "2016-01-22",
        "2016-01-29",
        "2016-02-05",
        "2016-02-12",
        "2016-02-19",
        "2016-02-26",
        "2016-03-04",
        "2016-03-11"
      ],
      "datasets": [{
        "label": "The Label",
        "data": [3, 8, 12, 17, 17, 22, 25, 30, 35, 38],
        "backgroundColor": "rgb(239, 239, 239)"
      }]
    }
    {{/chartjs}}
    • Vincent Massol
      Vincent Massol, 2018/07/17 09:07

      Please use the XWiki forum to ask questions. Thx

  • Norbert Schwarz
    Norbert Schwarz, 2022/08/05 10:08

    Hi,
    I suggest to add an additional option "fills" (use like "backgroundColors") for tableToChartJS to get line charts without area fills.
    I modified the javascript extension JSX by adding

     // configure fills
     if (options.fills) {
    if (data.datasets.length == options.fills.length) {
                 // One fill value per dataset, from the options.
                 dataSet.fill = options.fills[index];
                } else {
                 // One fill per value, from the options.
                 dataSet.fill = options.fills;
                }
     }

    which manages the task by setting e.g. options='{ "fills" : [false,false] }' 

  • sequilox
    sequilox, 2024/02/12 17:20

    Hello everyone,

    first of all, thanks for the great extension.

    Unfortunately the included chart.js version is now outdated.

    Are there any plans for an update?

    Thanks a lot!

Get Connected