How to change Chart options in amCharts using javascript?

Question

I'm looking to control hidden value in amCharts line graph options so I could hide and show graphs using some other control like radiobutton or dropdownlist.

Link to amChart - htps://www.amcharts.com/dataviz-tip-12-show-four-lines-line-chart/

I am trying to set value of "hidden" which is either true or false under graphs option using javascript.

Answer 1

you can build the AmCharts "graphs" property dynamically in an array,
then use the array within makeChart

see following working snippet,
checkboxes are used to toggle each graph / series.
the chart is drawn on the 'change' event of each checkbox.
then the "graphs" are built, using hidden, based on the checkbox checked property.

window.addEventListener('load', function () {
  // get checkboxes, add change event listener
  var checkboxes = document.getElementsByName('graph');
  Array.prototype.forEach.call(checkboxes, function(checkbox) {
    checkbox.addEventListener('change', drawChart);
  });

  // draw chart
  drawChart();

  function drawChart() {
    // build graphs
    var graphs = [];
    Array.prototype.forEach.call(checkboxes, function(checkbox) {
      graphs.push({
        "type": "line",
        "title": checkbox.value,
        "valueField": checkbox.value,
        hidden: !checkbox.checked
      });
    });

    // make chart
    var chart = AmCharts.makeChart("chart_div", {
      "type": "serial",
      "theme": "light",
      "dataProvider": [
        {"Date":"1/1/2017","Index I":13.80,"Index II":11.27,"Index III":8.75,"Index IV":12.30,"Index V":10.60,"Index VI":14.42},
        {"Date":"2/1/2017","Index I":15.49,"Index II":14.05,"Index III":6.26,"Index IV":13.37,"Index V":9.25,"Index VI":18.92},
        {"Date":"3/1/2017","Index I":16.51,"Index II":18.77,"Index III":3.22,"Index IV":18.02,"Index V":11.02,"Index VI":24.78},
        {"Date":"4/1/2017","Index I":20.36,"Index II":22.35,"Index III":4.74,"Index IV":22.93,"Index V":7.69,"Index VI":20.99},
        {"Date":"5/1/2017","Index I":25.64,"Index II":24.02,"Index III":1.09,"Index IV":19.08,"Index V":13.39,"Index VI":25.43},
        {"Date":"6/1/2017","Index I":22.21,"Index II":21.83,"Index III":6.15,"Index IV":23.07,"Index V":16.72,"Index VI":23.14},
        {"Date":"7/1/2017","Index I":18.81,"Index II":23.23,"Index III":5.21,"Index IV":19.67,"Index V":13.97,"Index VI":25.71},
        {"Date":"8/1/2017","Index I":21.98,"Index II":19.23,"Index III":11.10,"Index IV":17.73,"Index V":14.70,"Index VI":31.29},
        {"Date":"9/1/2017","Index I":18.10,"Index II":25.12,"Index III":7.33,"Index IV":19.89,"Index V":20.07,"Index VI":36.57},
        {"Date":"10/1/2017","Index I":18.30,"Index II":25.56,"Index III":13.22,"Index IV":17.05,"Index V":16.68,"Index VI":39.10},
        {"Date":"11/1/2017","Index I":22.17,"Index II":25.02,"Index III":16.85,"Index IV":15.03,"Index V":19.65,"Index VI":43.62},
        {"Date":"12/1/2017","Index I":22.74,"Index II":25.02,"Index III":18.35,"Index IV":12.48,"Index V":24.32,"Index VI":43.62}
      ],
      "graphs": graphs,  // <-- add graphs array here
      "categoryField": "Date",
      "legend": {}
    });
  }
});

label {
  cursor: pointer;
}

.select {
  white-space: nowrap
}

#chart_div {
  height: 260px;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div>Select Graphs</div>
<div class="select">
  <input type="checkbox" name="graph" id="graph-0" value="Index I" checked />
  <label for="graph-0">Index I</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-1" value="Index II" checked />
  <label for="graph-1">Index II</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-2" value="Index III" checked />
  <label for="graph-2">Index III</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-3" value="Index IV" />
  <label for="graph-3">Index IV</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-4" value="Index V" checked />
  <label for="graph-4">Index V</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-5" value="Index VI" />
  <label for="graph-5">Index VI</label>
</div>
<div id="chart_div"></div>