@s1seven/node-red-chartjs -- Getting Started

I have loaded the node-red-chartjs.

image

I created a simple flow based on the s1seven/node-red-chartjs documentation.

image

I am trying to get the example in the example to render on my test dashboard. So far I can't get it to show anything. The function output looks good to me, however no chart on the ui.

Here is the output from the the function:
image

Maybe some one can advise.

[{"id":"319bc1ab0a0be1da","type":"ui_template","z":"7f16363fe0d29b4f","group":"63b0eac674a63a21","name":"Chartjs","order":0,"width":0,"height":0,"format":"<script src=\"/resources/node-red-chartjs/chart.min.js\"></script>\n<script src=\"/resources/node-red-chartjs/chartjs-plugin-annotation.min.js\"></script>\n\n<div>\n    <canvas id=\"myChartScatter\" height=\"1\" width=\"1\"></canvas>\n</div>\n<script>\n    new Chart(document.getElementById('myChartScatter'), {\n      type: 'scatter',\n      data: {\n          datasets: [{\n              label: '{{{payload.legend}}}',\n              data: '{{{payload.data}}}',\n              showLine: false,\n              backgroundColor: 'rgb(255, 99, 132)',\n          }],\n      },\n      options: {\n          title: {\n              display: true,\n              text: '{{{payload.title}}} Content',\n          },\n\n          plugins: {\n              autocolors: false,\n              annotation: {\n                  annotations: {\n                      minLine: {\n                          type: 'line',\n                          borderColor: 'red',\n                          borderWidth: 1,\n                          label: {\n                              enabled: true,\n                              backgroundColor: 'red',\n                              borderColor: 'red',\n                              borderRadius: 10,\n                              borderWidth: 1,\n                              content: 'min',\n                              rotation: 'auto'\n                          },\n                          scaleID: 'y',\n                          value: {{{min}}}\n                      },\n                      maxLine: {\n                          type: 'line',\n                          borderColor: 'red',\n                          borderWidth: 1,\n                          label: {\n                              enabled: true,\n                              backgroundColor: 'red',\n                              borderColor: 'red',\n                              borderRadius: 10,\n                              borderWidth: 1,\n                              content: 'max',\n                              rotation: 'auto'\n                          },\n                          scaleID: 'y',\n                          value: {{{max}}}\n                      },\n                  }\n              }\n          },\n\n          scales: {\n              y: {\n                  beginAtZero: true,\n                  suggestedMax: {{{max}}} * 1.5,\n              },\n              x: {\n                  grid: {\n                      display: false,\n                  },\n              }\n          }\n      }\n  });\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":460,"y":120,"wires":[["8399e3bbc0928a13"]]},{"id":"63b0eac674a63a21","type":"ui_group","name":"Default","tab":"c3b459709757d3ab","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"c3b459709757d3ab","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Thanks in advance

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.