Skip to content

masalinas/node-red-contrib-chartjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

node-red-contrib-chartjs

A Node-RED node to provide charts for plotting things on. Implemented by Chart.js

Charts RED Dashboards

Description

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

For the latest updates see the CHANGELOG.md

Installation

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

Charts implemented

  • Line Chart

linea_chart

  • Multi Line Chart MultiLinearChart

  • Vertical Bar Chart

vertical_chart

  • Horizontal Bar Chart

horizontal_chart

  • Pie Chart

pie_chart

  • Doughnut Chart

dought_chart

  • Polar Area Chart

polar_chart

  • Bubble Chart

bubble_chart

  • Radar 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 dataset attributes are:

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

Read node help to check the dataset structure for each chart. The Line Charts dataset could be multi serial graphs like this:

[{"channel": "Population",
  "color": "Blue",
  "dataset": [{
      "x": "Europe",
      "y": 741
  },
  {
      "x": "Australia",
      "y": 24
  },
  {
      "x": "Africa",
      "y": 1.2
  },
  {
      "x": "America",
      "y": 325
  },
  {
      "x": "Asia",
      "y": 4.4
  }]},
  {"channel": "Economy",
    "color": "Green",
    "dataset": [{
        "x": "Europe",
        "y": 12
    },
    {
        "x": "Australia",
        "y": 13
    },
    {
        "x": "Africa",
        "y": 3
    },
    {
        "x": "America",
        "y": 22
    },
    {
        "x": "Asia",
        "y": 18
    }]}
]                

NOTE: The new multiserial linear chart implementation is compatible with the previous one versions

The rest of the charts dataset are not multiserial graphs. An example 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

Client side

  • socker.io-client: Socket.io client side
  • jquery: Multipurpose javascript library
  • bootstrap4: Build responsive, mobile-first projects on the web
  • popper.js: A kickass library used to manage poppers in the web applications
  • Chart.js: Simple yet flexible JavaScript charting for designers & developers
  • jsPDF: The leading HTML5 client solution for generating PDFs

Example

Under example folder you have a json flow to be imported in your node-red instance to test the nodes.