CODEWITHSUNDEEP
javascripthtmljquery
yasin taqizade
yasin taqizade

Reputation: 117

Jquery get element value and then set it into chart js

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>

Upvotes: 2

Views: 612

Answers (1)

uingtea
uingtea

Reputation: 6524

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>

Upvotes: 2

Related Questions