node-red-contrib-chart-image

Generate a chart in image form using Chart.js

Details:

A chart image buffer will be generated using the chart.js definition object found in msg.payload. See the chart.js documentation for more info on defining a chart.

Canvas Size:

Setting msg.width and/or msg.height to the desired size in pixels will override the node configuration.

Default Color Pallet:

If no backgroundColor or borderColor is defined for a dataset, Chartjs assigns the global default color of rgba(0,0,0,0.1). To make life a little easier, this node changes that behavior to assign each dataset a color from preset pallet, which includes 32 colors. If you define your own colors in a dataset, that color will be used, you do have to define both backgroundColor and borderColor if both are to be displayed. for line charts, use fill:false to prevent the use of backgroundColor.

Plugins:

This node includes chartjs-plugin-datalabels and chartjs-plugin-annotations. Each can be defined as you would according to their documentation. You can also define the chart background color by defining a chartArea object under the options scope.

chartArea: {
    backgroundColor: 'white'
}

• NOTE: chartjs-plugin-datalabels registers itself automatically when imported. This node looks for a display:true object in the datalabels definition to register or unregistert the plugin. This prevents datalabels showing up aninvited.

eg:

msg.payload = {
   options: {
          plugins: {
              datalabels: {
                  display:true
              }
          }
      }
}

Additional plugins can be used by installing the desired plugin in the Node-RED install directory and following the settings.js example to import the module into your Node-RED instance.

functionGlobalContext: {
        // os:require('os'),
        // jfive:require("johnny-five"),
        // j5board:require("johnny-five").Board({repl:false}),
		myMuchNeededPlugin: require('chartjs-plugin-yourplugin')
    },

From there, you can pass it to your chart vie msg.plugins.

msg.plugins = {
    myMuchNeededPlugin: global.get('myMuchNeededPlugin')
};

Then you just need to define the plugin options in your chart definition object.

Resources

• Chart.js documentation
• charjs-code-canvas documentation
• chartjs-plugin-datalabels documentation
• chartjs-plugin-annotations

Please report bugs, suggest improvements!

https://github.com/gemini86/node-red-contrib-chart-image/issues

If you find this node useful,