As a visual drag flow for the Internet of Things, Node-Red is really easy to get started with. For those of you who haven’t started yet, take a look at my previous articles

  • Internet of Things platform Node-RED series (1) : Introduction and installation of Node-Red

  • Internet of Things platform Node-RED series (2) : The operation of node-Red panel

  • Internet of Things platform Node-RED series (3) : The use of Node-Red public nodes

  • Internet of Things platform Node-RED series (4) : The use of Node-Red function nodes

  • Internet of Things platform Node-RED series (5) : the use of Node-Red sequence nodes

  • Internet of Things platform Node-RED series (6) : Use of Node-Red parsing nodes

  • Internet of Things platform Node-RED Series (7) : Use of Node-Red storage nodes

  • Internet of Things platform Node-RED Series (8) : Use of Node-Red network nodes

  • Node-red series (9) : The use of dashboard nodes in node-red panel

  • Node-red series (10) : Node-red panel Provides dashboard Node configurations

Last time I gave you a brief introduction to how the dashboard is formatted, how the ICONS are used, and a brief introduction to all the nodes. Panels that can be formed. In this article I’ll show you how to customize a dynamic chart using the Chart node. Monitors the CPU usage of a device in real time.

Let’s cut the crap and get straight to the dry stuff.

Here’s the idea

First, a inject node is used to trigger the whole stream periodically and output it to a function node, which is used to generate random numbers. To make the graph look less ugly, the distribution of random numbers is between 80 and 100. If the distribution is from 0 to 100, the graph will be very steep in a short period of time, not very realistic, and not very beautiful. So we choose the CPU value between 80 and 100. The js code of the specific function node is

msg.payload = Math.floor( Math.random()*20) +80
return msg;
Copy the code

It is then followed by a Chart node. So the design can pass payload as the value of the Y-axis into the chart node. Below are the configuration parameters of the Chart node.

Firstly, each chart node should belong to a Group and a Tab. Secondly, select Auto for size, so that the chart will be automatically spread across the whole Group.

Label is the title of the chart. It will appear at the top of the chart.

Type is the Type used to select the chart. Currently, there are 6 types of charts to choose from, respectively

  • The chart shows the Line chart
  • The Bar chart shows that
  • Bar chart (H
  • The Pie chart fan
  • Polar area chart sector
  • This is the Radar chart

Note that the configuration of each chart type is not consistent. Pay attention to the distinction.

Y-axis Specifies the range of the Y-axis. Min = 0, Max = 100 because CPU usage is specified

LegendWhether to show legend is the type declaration of each legend. Click to hide the legend.

Series Colours The colour of legends, if there are more than one legend, will be displayed in order of that colour. You can click to modify it.

An association diagram of nodes

Complete stream configuration JSON file

[{"id": "f6f2187d.f17ca8"."type": "tab"."label": "Flow 1"."disabled": false."info": ""
    },
    {
        "id": "8f70d77.d5e5a28"."type": "ui_toast"."z": "f6f2187d.f17ca8"."position": "top right"."displayTime": "3"."highlight": ""."sendall": true."outputs": 0."ok": "OK"."cancel": ""."raw": false."topic": ""."name": ""."x": 380."y": 1020."wires": []}, {"id": "10c76dea.46e882"."type": "ui_template"."z": "f6f2187d.f17ca8"."name": ""."order": 0."width": 0."height": 0."format": "<div ng-bind-html=\"msg.payload\"></div>"."storeOutMessages": true."fwdInMessages": true."resendOnRefresh": true."templateScope": "local"."x": 710."y": 1080."wires": [[]]}, {"id": "1962 ed44. 5 d0a13"."type": "inject"."z": "f6f2187d.f17ca8"."name": ""."props": [{"p": "payload"
            },
            {
                "p": "topic"."vt": "str"}]."repeat": "1"."crontab": ""."once": false."onceDelay": 0.1."topic": ""."payload": "1"."payloadType": "num"."x": 250."y": 480."wires": [["51 be0023. 18998"]]}, {"id": "51 be0023. 18998"."type": "function"."z": "f6f2187d.f17ca8"."name": "Generate 80-100 random numbers"."func": "msg.payload = Math.floor( Math.random()*20)+80\n\nreturn msg;"."outputs": 1."noerr": 0."initialize": ""."finalize": ""."x": 480."y": 480."wires": [["91bc92f5.d25f3"]]}, {"id": "91bc92f5.d25f3"."type": "ui_chart"."z": "f6f2187d.f17ca8"."name": "CPU Usage"."group": "baf29ced.1c3cc"."order": 0."width": 0."height": 0."label": "CPU Usage"."chartType": "line"."legend": "true"."xformat": "HH:mm:ss"."interpolate": "linear"."nodata": ""."dot": false."ymin": "0"."ymax": "100"."removeOlder": 1."removeOlderPoints": ""."removeOlderUnit": "3600"."cutout": 0."useOneColor": false."useUTC": false."colors": [
            "#1f77b4"."#aec7e8"."#ff7f0e"."#2ca02c"."#98df8a"."#d62728"."#ff9896"."#9467bd"."#c5b0d5"]."outputs": 1."useDifferentColor": false."x": 790."y": 480."wires": [[]]}, {"id": "baf29ced.1c3cc"."type": "ui_group"."name": "Fizz_Group"."tab": "7123a3ae.91856c"."order": 1."disp": true."width": "12"."collapse": false
    },
    {
        "id": "7123a3ae.91856c"."type": "ui_tab"."name": "Fizz_Tab"."icon": "dashboard"."disabled": false."hidden": false}]Copy the code

The final rendering