[Guide] Integrating Chart.js and plugins

Tridium Niagara Skill Lab
1
# Chart.js integration guide for N4 > console.log("Hello, World");

Today we are going to add a chartjs and plugins to a niagara UX module.
I’m not going to go through the code of a widget and how to set up a basic chart. This is just an example of the integration and how to set up requirejs.

Getting chart.js

UMD is the buzzword here, as we are using require. Luckily for us, Chart.js comes in a UMD version that you can find on sites like CDNJS or jsDelivr.
As of this writing, jsDelivr is providing version 4.4.8 while CDNJS is providing
version 4.4.1

Either download the js file or create an empty chart.umd.min.js file in your project and paste the source code into that.
I have mine under [myModule-ux/src/ext/chartjs/chart.umd.min.js]
Also remember to be a good boy/girl and copy the license file to your project. It can be found here

Setting up gruntfile.js

Chart.js is one of those hip kids on the block, that uses the newest tech. Therefore it contains javascript features published after ECMAScript2019, which Tridium’s version the RequireJs optimizer doesn’t like. Or rather, Esprima, which the optimer uses, doesn’t like those features. To avoid build errors like

Error: Parse error using esprima for the file: ./build/es/src/ext/chart/chart.umd.min.js

we need to edit Gruntfile.js, so the optimizer doesn’t parse the library.

...},
requirejs: {
      src: {
        options: {
          paths: {
            'nmodule/myModule/ext/chartjs/chart.umd.min': 'empty:'
          }
        }
      }
},
{...

Using Chart.js in your widget

To use the library in your widget, you can simply add it to your define statement like this:

define([ 
  'baja!',
  'bajaux/Widget',
  'nmodule/myModule/ext/chartjs/chart.umd.min'
], function (
  baja,
  Widget,
  Chart
) {
  'use strict';
  ...

Plugins

Chart.js is awesome! And so are all the plugins that greatly extends it features.
To see what is available, go to this page.
Some of these modules don’t support umd, so we need to do some magic to make them work in the project.
This could be the annotation plugin or datalabels plugin.
If you download the minified version of annotation plugin and places it in the project, you will get some errors in the browser console, stating it can’t find references to chart.js and chart.js/helpers.

We Require(js) some Mapping

To make the references recognized by Require, we will start by mapping them.
To do that, we will make 2 files:

  • myModuleRequireJsConfig.js (placed in your “myModule-ux/src/rc” folder)
  • BMyModuleRequireJsConfig.java (placed in “myModule-ux/src/com/…/…/ux”)

The content of BMyModuleRequireJsConfig.java:

package com.myModule.myModule.ux;

import javax.baja.naming.BOrd;
import javax.baja.nre.annotations.NiagaraSingleton;
import javax.baja.nre.annotations.NiagaraType;
import javax.baja.sys.BSingleton;
import javax.baja.sys.Context;
import javax.baja.web.js.BIRequireJsConfig;
import javax.baja.web.js.JsInfo;
import javax.baja.sys.Sys;
import javax.baja.sys.Type;

@NiagaraType
@NiagaraSingleton

public class BMyModuleRequireJsConfig 
    extends BSingleton
    implements BIRequireJsConfig
{
    private BMyModuleRequireJsConfig() {};

    public  JsInfo getJsInfo(Context cs) { return jsInfo; }

    private static final JsInfo jsInfo =
        JsInfo.make(
            BOrd.make("module://myModule/rc/myModuleRequireJsConfig.js"),
            BMyModuleJsBuild.TYPE
        );
}

Remember to give slotomatic a spin.

The content of myModuleRequireJsConfig.js:

// eslint-disable-next-line no-unused-vars
function config(require, modulePrefix, isWebDevJs) {
    'use strict';

    require.map['nmodule/myModule'] = {
        'chart.js': 'nmodule/myModule/ext/chartjs/chart.umd.min',
        'chart.js/helpers': 'nmodule/myModule/ext/chartjs/helpers'
    }
  }

When you now run

grunt watch

you should be able to go to https://localhost/requirejs/config.js and see the content of myModuleRequireJsConfig.js somewhere in the code.

chart.js/helpers reference

As you can see in myModuleRequireJsConfig.js, we have now mapped chart.js/helpers to ‘nmodule/muModule/ext/chartjs/helpers’. That file doesn’t exist yet, so we need to create it.
When you have created the helpers.js file, you need to fill it in:

define([
    'chart.js' // same as 'nmodule/myModule/ext/chartjs/chart.umd.min'
], function (
    Chart
) {
    'use strict';

    return Chart.helpers;
});

Bonus info: Because we mapped ‘chart.js’ to ‘nmodule/myModule/ext/chartjs/chart.umd.min’, we no longer need to write the full path in our define statement, when trying to fetch the library.

Update widget define

We should now be able to use the plugin in the code… Remember that you need to register plugins in never versions of chartjs.

MySuperAwesomeChartThatCanPlotAnythingInTheWorldWidget.js

define([ 
  'baja!',
  'bajaux/Widget',
  'chart.js', // 'nmodule/myModule/ext/chartjs/chart.umd.min'
  'nmodule/myModule/ext/chartjs/chartjs-plugin-annotation.min'
], function (
  baja,
  Widget,
  Chart,
  annotationPlugin
) {
  'use strict';
  
  Chart.register(annotationPlugin);
  ...

Good luck creating some awesome charts! Post a few screenshots to show off :smiley:

4 Likes
2

Hell yeah! Awesome guide @Rosenthaler :folded_hands: I’m going to give this a go.

1 Like
3

This looks great - sick guide.

A video tutorial on this could be super useful!

1 Like