Chart.js node - cannot GET TP01

General
1

Again, total newbie so pointers would be most welcome.

I've downloaded this -

...but am struggling to get it to work.

I've set up the flow as per the example on the page (I think) and put it on a 30 second trigger.

image
image.png1395Ă—793 46.5 KB

I then navigate to localhost:1880/TP01 and get

image

Am I approaching this the wrong way? The page says there should be some examples (I assume under Import --> Examples) but I can't find them.

2

I believe the TP01 is the value in channel so you should be using localhost:1880/Population

3

No, following the docs channel is how the data shows up in the legend. The path is set through the configuration of the node, with the path parameter.

@EdwardDM10 can you post your flow so we can see how you have configured this chart node? The value for path is the endpoint that you access in the browser. While the sample screenshots use “TP01”, you might have set this to something else.

The included example is located here: node-red-contrib-chartjs/example/dashboard.json at master · masalinas/node-red-contrib-chartjs · GitHub
As you can see it uses both the channel (for setting the legend) as well as the path to TP01.

On the other hand, this node has several open issues, one with a pull request that doesn’t have replies nor is merged. That issue mentions a deploy breaks the CSS and JS files needed to display the chart due to a change/fix Node-RED did. deploy breaks all supporting *.js and *.css files · Issue #15 · masalinas/node-red-contrib-chartjs · GitHub
So this might not be the best node to use in combination with NR 0.20.7

4 
[{"id":"98da9cdb.eeb67","type":"inject","z":"86ca3569.b8cc98","name":"30Seconds","topic":"","payload":"{     \"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         }     ] }","payloadType":"json","repeat":"30","crontab":"","once":false,"onceDelay":0.1,"x":506,"y":770,"wires":[["35635b96.038f74"]]},{"id":"35635b96.038f74","type":"chartjs-line","z":"86ca3569.b8cc98","name":"","path":"http://localhost:1880/TP01","charttitle":"A Title","xaxis":"X-Axis","yaxis":"Y-Axis","x":713.5,"y":731,"wires":[["6423fc7.1e6ae04"]]},{"id":"6423fc7.1e6ae04","type":"debug","z":"86ca3569.b8cc98","name":"DebugChartJS","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":957,"y":713,"wires":[]}]

Edited a few times

5

Ah, from comparing the example to what I have the issue seems to be the "path". I am using the whole 'http://localhost:1880/TP01' where as the examples just use 'TP01'.

image

That being said, I note what you say about the pull requests....

6

Without wishing to blow my own trumpet. If you get totally stuck with this, I've just posted a number of charting examples for uibuilder. You would have to write some code but the examples already have most of it in place.

The advantage is that you have examples to work off, you can create any kind of interface you like including having multiple charts on one page or splitting them into multiple pages if you like. And you can configure the charts just how you want them.

2 Likes
7

Nothing wrong with a bit of trumpet blowing!

I am extremely new to anything JS related (I mostly do PLCs). I will certainly have a look through.

8

Presumably you have already rejected the standard dashboard chart as not meeting your requirements.

9

Hi @Colin there is no real requirement yet. I am just dipping my toes in the water, as it were, to see what is possible.

I'd really like something that lets me drag a box around some data points to zoom in, and something that lets me export the chart and associated data points without being too complicated to set up (that is what prodded me towards Charts.js)

I've been playing with the standard chart, sliders to feed ymin and ymax etc, and it seems fine. I guess data export can be handled through another node.

10

Many who want more sophisticated charts use node-red to send the data to influxdb and use Grafana for the charts. With those you can look back at historical data, zoom in and out, etc.