Using the Node-Red Chart Node

The chart node is used to display input data in various chart forms.(line, pie, bar etc).

The input data is usually time based but doesn’t need to be.

The input data can be real time or inserted from a database or log file

Displaying Real Time Data

This is relatively easy to do and is the default behaviour meaning that there is virtually no configuration to do.

You use the msg.payload to pass the data to the chart as a number and the msg.topic property to pass in the data series name.

You can display multiple lines on the same chart.

There is no need to pass in a time stamp as this is taken from the input message time. However you can specify a time stamp using the millisecond past the epoch format which you get using:

let d= new Date();
let timestamp=d.getTime();

So use:

{topic:"temperature", payload:22}

or

{topic:"temperature", payload:22, timestamp:1520527095000}

For multiple time series use a msg object of the form:

{topic:"temperature", payload:22}
{topic:"humidity", payload:66}

You can use the colour selection boxes to set the colour of the line chart for each data series.

Usually there is no need to set the max/min as it will be set dynamically based on the incoming data. Use the show legend to display the series name contained in the topic property on the graph.

The x axis label format can be changed in the configuration node, but I haven’t found a way of adding a label to the Y axis.

This video shows you how to display real time data and uses simple inject nodes to create the data.

Displaying Bar Charts

Besides the line char bar charts are another common format

You can see in the example above that the x axis contains the month names passed in the msg.label property.

The actual data is shown below:

msg.payload=[{
    "series": ["temp1", "temp2", "temp3" ],
    "data": [ [5,6,9], [3,8,5], [6,7,2] ],
    "labels": [ "Jan", "Feb", "Mar" ]
}];

You should notice that the payload is an array containing an array of of three objects-series, data and labels. All objects contain an array.

The data object is an array of arrays. If you look at the data in the first array [5,6,9] 5 is for Jan,6 is Feb and 9 is March. The bar chart for the data is shown above. Notice how it corresponds to the to the series labels.

The first array [5,6, 9] is the data for the series named temp1.

Displaying Time Related Stored Data

Displaying time related stored data is a little more tricky than real time data as you need to get the stored data into the correct form which is an array of objects.

The graph below shows 3 plots called A, B and C

The data that generates the above plot is show below:

Again we have 3 data plots (A,B,C) and even though we add labels they aren’t used. Each data plot has three values contained in a object e.g.

{“x”: 1504029640317, “y”: 7 }

The x property contains the unix type time stamp (in ms) and the y property contains the value at that time.

Here is a video that covers the above.

 

Creating a Chart from as CSV file

Arising from my chart videos I had a question from a viewer that had data stored in a csv file and needed to display it on a chart.

The chart looks like the one below:

I created a video describing the process- Creating a Chart from A CSV File In Node-Red

Flows used in videos and csv file

 

Creating a Chart from JSON Data

Another common format for storing data is JSON and You can see how to read JSON data files and create a chart in the above video starting at 5:36.

Flow used in video

Quick Review questions

Answers at the end

Q1 -If in the bar chart example we were to plot for 6 months from Jan to June what would the data field look like

1. “data”: [ [5,6,9], [3,8,5], [6,7,2],[2,7,2] ,[5,7,1] ,[5,8,2]],
2. “data”: [ [1,3,5,5,6,9], [1,2,3,3,8,5], [2,4,6,6,7,2] ],

Q2 -If in the stored time series example we were to plot for 40 data points for each data series (A,B,C) how long would each array be.

1. 3
2. 120
3. 40

Resources

Chart node documentation on github with examples

RelatedTutorials

• Using the UI Dashboard Template Node (Widget)
• Using the Node-Red Template Node
• Using the Node Red Status Node

Answers

Q1=1 and Q2 =3