Custom node: chart in my editor

General
1

Hello everybody,

You guys helped me so well with my custom nodes so far! In the editor of my node I want to display a dynamic chart whichs depends on the node properties. I have absolutely no idea how to do this.

<!-- <script type="text/javascript"> part -->

<script type="text/x-red" data-template-name="custom-node">
    // script with <div>'s for the node property editors

    // <div> for chart. I was thinking about maybe using chart.js, however I have no idea how to integrate this in the node-red editor and I hope someone can help me with this.
    <div id="chart">
    </div>

</script>

<!-- <script type="text/x-red" data-help-name="custom-node"> part -->
2

The editor is NOT intended to be a dashboard... what is the use case for showing charts in an editor node ? How do they help you configure a node ?

1 Like
3

Yes. It will show the motion when you're configuring the node. So it would be very usefull.

4

OK - the geofence node - https://github.com/hardillb/node-red-node-geofence has a good example of including extra JS libraries - so you could look at that for inspiration. chart.js will add a few MB to your download though.

1 Like
5

Also, don't use an id of chart as there is already an element on the page with that id and it will clash and break things!

1 Like
6

I SOLVED IT!!!

The mistake that I made was actually really simple. I did not link the chart.js code in my settings file using httpStatic, but I solved that problem with this (Import JavaScript library into node-red) post.

So the httpStatic thing is very easy to do:

  1. create a directory with a beautiful name, like C:/node-red-static/chartjs and put your Chart.js files here
  2. go to your .node-red folder and open settings.js, set httpStatic to C:/node-red-static
  3. restart node-red
  4. load http://localhost:1880/chartjs/dist/Chart.js, you should see your Chart.js code here

In your html code link Chart.js using

<script src="http://localhost:1880/chartjs/dist/Chart.js"></script>

and my total html code is shown below. I hope this can help someone!

<script src="http://localhost:1880/chartjs/dist/chart.js"></script>
<script type="text/javascript">
	RED.nodes.registerType('test-chart',{
		category: 'test',
		color: '#a6bbcf',
		defaults: {
			name: {value:""},
			someProps: {value:0}
		},
		inputs:1,
		outputs:1,
		label: function(){ return this.name || 'test-chart';},
		oneditprepare: function(){
			var canvas = document.getElementById("myChart");
			var ctx = canvas.getContext("2d");
			//ctx.font = "30px Verdana";
			//ctx.fillStyle = "red";
			//ctx.textAlign = "center";
			//ctx.fillText("Hello World!", canvas.width/2, canvas.height/2);
			var myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
					datasets: [{
						label: '# of Votes',
						data: [12, 19, 3, 5, 2, 3],
						backgroundColor: [
							'rgba(255, 99, 132, 0.2)',
							'rgba(54, 162, 235, 0.2)',
							'rgba(255, 206, 86, 0.2)',
							'rgba(75, 192, 192, 0.2)',
							'rgba(153, 102, 255, 0.2)',
							'rgba(255, 159, 64, 0.2)'
						],
						borderColor: [
							'rgba(255, 99, 132, 1)',
							'rgba(54, 162, 235, 1)',
							'rgba(255, 206, 86, 1)',
							'rgba(75, 192, 192, 1)',
							'rgba(153, 102, 255, 1)',
							'rgba(255, 159, 64, 1)'
						],
						borderWidth: 1
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});
		}
	});
</script>

<script type="text/x-red" data-template-name="test-chart">
	<div id="test-chart">
	<canvas id="myChart" width="400" height="400"></canvas>
	</div>
</script>

<script type="text/x-red" data-help-name="test-chart">
	<p> helup </p>
</script>
1 Like