Chartjs-Create a line chart using an user input table from a data table in chart.js

by

0👍

✅

I’ve found a problem with the procedure of getting values:
The values you are passing to the data.alpha and data.beta are from inputs and not the td element as your code shows:

<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox"/></td>

And the mode of getting values won’t work with input fields, you have to get the value and not innerText as you’ve done here:

data.alpha.push(table.rows[i].cells[1].innerText.replace(',',''))
data.beta.push(table.rows[i].cells[2].innerText)

You should use the following to get the value from the input:

data.alpha.push(table.rows[i].cells[1].childNodes[0].value.replace(',',''))
data.beta.push(table.rows[i].cells[2].childNodes[0].value)

Using childNodes returns all the children of the parent element in this case the td tag. The childNodes[0] returns the first child of the parent element which is the input tag then the childNodes[0].value returns the value of the input field.

You can also replace this with the datasets you are using to get a more friendly output:

datasets: [{label: "Pie Chart", data: data.alpha, backgroundColor: "#138bc2", borderColor: "#777777"}]

The label will show beside the chart instead of the current undefined value which is showing.
The backgroundColor and borderColor are self-explanatory 😉

Leave a comment