Mapping inputs to a chart with chartjs

Mapping inputs to a chart with chartjs


Hey all,

What i’d like to do is have input fields where a user can type some numbers, and then map those numbers to points on a graph.

I ran across chartjs and started experimenting with it, but i’m not sure how to get the values from my inputs into the data points on the chart; if i put some default values in, that works, but i’m looking to either get the input to map to a data point after it’s been typed, or have a ‘Graph me’ button that takes all the inputs and re-renders the chart.

Is there any avenues you guys might recommend to map inputs to data points on a graph?

Below is my codepen;

Thank you!


You could use jquery to take the value from the inputs and apply then to a variable for use in your JS.

that’s prob the fastest way to d it,b ut you could also use react, angular or bind.js, or use plan vanilla javascript to do it


Thanks AB! Turns out the problem was that I was accessing the data object incorrectly; I managed to get it to plot with vanilla JS tied to a button that ran an update() function every time the user types in a number to an input value.

Thank you so much!