node-red-contrib-chartjs

node-red-contrib-chartjs

Chart.js Node-RED node

![Charts RED Dashboards]

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

Chart 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 path to be access
• Tittle: The tittle of the chart
• X Axis: The X axis name
• Y Axis: The Y axis name
• Payloas: The dataset to be drawed

The Chart Payload attributes are:

• channel: channel label legend name
• color: color of the chart line
• dataset: dataset array.

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": "TP01",
    "color": "Red",
    "dataset": [
        {
            "x": 1,
            "y": 10
        },
        {
            "x": 2,
            "y": 8
        },
        {
            "x": 3,
            "y": 15
        },
        {
            "x": 4,
            "y": 10
        },
        {
            "x": 5,
            "y": -2
        }
    ]
}

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.