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();
});

user_4082344 · 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)
    })
  })
});

Jquery get element value and then set it into chart js

1 Answers