Jquery get element value and then set it into chart js

Question

here is my input field that can add with users (it is repetitive fields), and my chart that created with chart.js

I want to show user input value in chart. user fill the input element.

I want to replace dynamically user input value with chart column after click on a simple button.

here is my code:

 anychart.onDocumentLoad(function() { var chart = anychart.column([ ["Winter", 2], ["Spring", 7], ["Summer", 6], ["Fall", 10] ]); // set chart title chart.title("chart title"); // set chart container and draw chart.container("container").draw(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://cdn.anychart.com/css/latest/anychart-ui.css" rel="stylesheet"/> <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <table class="acf-table"> <tbody> <tr> <td class="example"> <input type="text" value="99"> </td> </tr> <tr> <td class="example"> <input type="text" value="67"> </td> </tr> <tr> <td class="example"> <input type="text" value="45"> </td> </tr> <tr> <td class="example"> <input type="text" value="87"> </td> </tr> </tbody> </table> <div id="container"></div>

Answer 1

you have to

• use anychart.data.set()
• convert array to object key value using dataSet.mapAs()
• add input event to the input element
• and to update .set(index, [object key name], newValue)

 anychart.onDocumentLoad(function() { var dataSet = anychart.data.set([ ["Winter", 2], ["Spring", 7], ["Summer", 6], ["Fall", 10] ]); var chart = anychart.column(); // set chart title chart.title("chart title"); // set data var column = chart.column(dataSet); var view = dataSet.mapAs({ key: 0, value: 1 }); // set chart container and draw chart.container("container").draw(); // update on input $('.example input').each(function(index, item) { $(item).on('input', function() { console.log(view.get(index, 'key'), item.value) view.set(index, 'value', item.value) }) }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://cdn.anychart.com/css/latest/anychart-ui.css" rel="stylesheet" /> <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <table class="acf-table"> <tbody> <tr> <td class="example"> <input type="text" value="2"> </td> </tr> <tr> <td class="example"> <input type="text" value="7"> </td> </tr> <tr> <td class="example"> <input type="text" value="6"> </td> </tr> <tr> <td class="example"> <input type="text" value="10"> </td> </tr> </tbody> </table> <div id="container"></div>