Chart JS error update value horizontal line

General
1

<https://github.com/DiogoMesquitaInd/chartjs>

Hi everyone, my first question on the forum so I'm sorry if I'm doing something wrong.
I'm using the chartJS library inside HTML to work better later with Node-RED. However, I am not able to change the value that defines the height on the Y axis of the red horizontal line. I would like to update the value as soon as I press the button, it already works for the chart value but not for the red line. Thank you for any help.

the HTML code is in the repository above. Please any help will be very good. I know it's something simple, I'm looking.

2

What node are you putting your code in?
Hove you taken a look at node-red-contrib-chartjs?

If you try it, it is a little tricky. To open a chart you must use yourIP:1880/XXX where xxx is the PATH named in the node. and you have to open the browser to that path before injecting the data to the node.

For example, if you want to run Population Radar Chart (last example) and NR is running on 192.168.1.50, you would first open a window with http://192.168.1.50:1880/POR and then press the 'inject' button for that flow.

3

I'm sorry, I already looked at this node. But before using node-red I need to make it work in this html file. If any chartjs master can help. Thanks.

4

There is plenty of missing info here . @zenofmud asked where are you using this code?

This example is accessed via the browser at http://your-node-red-ip:1880/chart?y=100.
where y is the hieght you want the red line.

[{"id":"df0e482b.f561b8","type":"http in","z":"30af2d3e.d94ea2","name":"","url":"/chart","method":"get","upload":false,"swaggerDoc":"","x":240,"y":140,"wires":[["85667b0.dd41088"]]},{"id":"85667b0.dd41088","type":"template","z":"30af2d3e.d94ea2","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n   <head> \n      <title>chart.js 2.1</title> \n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> \n      <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js\"></script>\n      <script src=\"https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js\"></script>\n \n   </head> \n   <body> \n    <div>\n     <input type=\"number\" id=\"meta\">\n      <button onclick=\"updateChart()\">Botao</button>\n      <canvas id=\"linechart\" width=\"800\" height=\"450\"></canvas>\n    </div>\n    \n\n\n    <script>\n     let diogo = ''\nconst data =  {\n      labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],\n      datasets: [{ \n          data: [200,114,150,106,20,111,25,221,50,-60],\n          label: \"Africa\",\n          borderColor: \"#3e95cd\",\n          fill: false\n        }\n      ]\n    }\n\n    // config \n    const config = {\n      type: 'line',\n      data,\n      options: {\n      title: {\n        display: true,\n        text: 'World population per region (in millions)'\n      },\n      annotation: {\n        annotations: [{\n            drawTime: 'afterDraw', \n            id: 'a-line-1', \n            type: 'line',\n            value:{{payload.y}},\n            mode: 'horizontal',\n            scaleID: 'y-axis-0',\n            borderColor: 'red',\n            borderWidth: 5,\n        }]\n    }\n    }\n    };\n\n // render init block\n const myChart = new Chart(\n      document.getElementById('linechart'),\n      config\n    );\n\n    \n  function updateChart(linechart) {\n    myChart.config.data.datasets[0].data[0] = document.getElementById('meta').value;\n    myChart.options.annotation.annotations[0].value = document.getElementById('meta').value;;\n    //diogo =  document.getElementById(\"meta\").value;\n    myChart.update();\n  };\n        </script>\n\n   </body>\n</html>","output":"str","x":390,"y":160,"wires":[["f2e53274.36e308"]]},{"id":"f2e53274.36e308","type":"http response","z":"30af2d3e.d94ea2","name":"","statusCode":"","headers":{},"x":580,"y":160,"wires":[]}]

Without a clear understanding on where you want to use this code it is difficult to answer your question.

5

I apologize if I wasn't clear. Thanks for the help, after a lot of suffering I managed to solve it.

6

Would it be possible to share your solution ?
i tried your example also .. but didnt have your patience to research it further .. other priorities
was it an incompatibility between the versions of the annotations library and chartjs version ?

7

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