Jquery get element value and then set it into chart js Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Jquery get element value and then set it into chart js without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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>
We are here to answer your question about Jquery get element value and then set it into chart js - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji