Chart.min.js, chartjs-plugin-datalabels

Dashboard
1

Unbenannt
Unbenannt733×261 272 KB
Hello guys,
I tried to use the example but only the plugins doesn't work.
I tried to install this on my Raspberry pi3 but I doesn't work, too.
Can someone help me?
Thanks in advance!!!!

<!DOCTYPE html>
<html>

<head>
    <title>chart.js Multiple graphs</title>
    <meta charset="utf-8">

</head>

<body>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>-->

    <canvas id="barChartHeadcount" width="400" height="400"></canvas>
    <script>
       new Chart(document.getElementById("barChartHeadcount"), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{
      label: 'Billed',
      fill: false,
      backgroundColor: 'rgb(0, 197, 106)',
      data: [56, 63, 67]
    }, {
      label: 'Unbilled',
      fill: false,
      backgroundColor: 'rgb(255, 114, 107)',
      data: [1, 2, 3]
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Community Headcount'
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    responsive: true,
    scales: {
      xAxes: [{
        stacked: false
      }],
      yAxes: [{
        stacked: false
      }]
    },
    plugins: {
      datalabels: {
        align: 'end',
        anchor: 'end',
        backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderRadius: 4,
        color: 'white',
        formatter: function(value){
        	return value + ' (100%) ';
        }
      }
    }
  }
});
    </script>
</body>

</html>
2

That isn't a Node-RED widget. It's just an npm library.
While you can install it - nothing in Node-RED is going to know about it or use it.
I guess you could try the example you are showing and host that as a static web page, but only if you modify settings.js to expose a directory to serve up - and place the example code and this library into it.

3

@dceejay:
Thank you for the fast and detailed answer.
I'm not an expert and so I think your instruction is complicated for me.

Someone know a alternative in node red to display values/text from different variables like on the example?
Thanks!

4

Sorry - I'm not familiar with where that example comes from so I'm not sure what you are trying to do. You can generate graphs with multiple traces by sending data with different msg.topic set - or all at once by formatting the data correctly as per the docs - https://github.com/node-red/node-red-dashboard/blob/master/Charts.md

5

Furthermore, the error that you got in your screenshot meant that you weren't in the .node-red directory, but executing directly from your ~ folder aka /home/pi. So for future installs from the command line, keep in mind that you have to go to ~/.node-red (or your user directory if you don't use the default settings) first before trying to install a library/package.

6

Well - strictly speaking you only need to be in the ~/.node-red directory if you are installing a Node-RED node or widget - you may well want to run other node.js apps unrelated to Node-RED from elsewhere in your system. As that package is nothing to do with Node-RED it could in theory be installed wherever the user wants.

7

I agree there, but if the end goal is to try to load those from template nodes (whether regular or dashboard) or reference them in the settings file it seems most wise to me to have them in the node-red directory too. With this topic posted in the dashboard category that seems most related.

8

If they are being served as static pages they can be anywhere (as long as the settings.js points to the correct directory)

9

Good point, hadn't thought of it that way yet. I'm still too used to other languages when it comes to sandboxed environments with packages. Thanks for the lesson :slight_smile:

10

well - it's not clear from the question how the user wants to use it - Certainly just adding it won't make it work with Node-RED - so maybe they are looking for how to use it alongside instead ? Or maybe not - we just don't know yet :slight_smile:

11

First thank you @afelix, @dceejay for our help!
I like to use the shared example in my template node and display on my dashboard the chart with the datas.
At the end of my project I want to display not the value of the datapoint

formatter: function(value){
        	return value + ' (100%) ';

but the value of a other variable.
With my code I have just problems to display the value of the datapoint in the dashboard of the node red. The rest works fine. I have just installed the https://flows.nodered.org/node/node-red-contrib-chartjs.
I have tried to install the chartjs-plugin-datalabels too but in the false directory.... :confused: (thanks @afelix for your input)
When I try to install the chartjs-plugin-datalabels in the correct directory of the node red so it is possible that it works?
On this occasion a happy new year!
Thanks in advance.

12

Hello,
Where I have to save the downlaod file for example this and how can I access to this files in my template node?
Because the following not work?

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

I would like to use as example this on my dashboard.
Sorry, I'm not a expert....
Thanks in advance!!!