node-red-contrib-chartjs

node-red-contrib-chartjs

Chart.js Node-RED nodes

Description

This node permit to use Charts from Chart.js from Node-RED. The objective is create a new node-red path for each chart created, this path could be configured and updated at runtime.

Installation

npm install node-red-contrib-chartjs --save

Charts implemented

• Line Chart

• Vertical Bar Chart

• Horizontal Bar Chart

• Pie Chart

• Doughnut Chart

• Polar Area Chart

• Bubble Chart

• Radar Chart

Chart configuration

The Chart attributes are:

• Path: The Chart Url to be access. An example where path is TP01 could be:

http://localhost:1880/TP01

• Tittle: The chart title
• X Axis: The X axis label
• Y Axis: The Y axis label
• Payload: The chart dataset object

The Chart Payload attributes are:

• channel: The channel legend
• color: The chart color line
• dataset: The chart dataset

The Payload attributes are:

• x: x axis dataset value
• y: y axis dataset value

Check the node help to know the Dataset structure for each chart A Line Chart dataset could be like this:

{
    "channel": "Population",
    "color": "Green",
    "dataset": [
        {
            "x": "Europe",
            "y": 741
        },
        {
            "x": "Australia",
            "y": 24
        },
        {
            "x": "Africa",
            "y": 1.2
        },
        {
            "x": "America",
            "y": 325
        },
        {
            "x": "Asia",
            "y": 4.4
        }
    ]
}

Dependencies

Server side

• socker.io: socket.io server side
• serve-static: Serve static files
• cors: Node.js CORS middleware

Client side

• socker.io-client: socket.io client side
• jquery: multipurpose javascript library
• Chart.js: Simple yet flexible JavaScript charting for designers & developers

Example

Under example folder you have all json flows to be imported in your node-red instance and test the node.