score:0

Accepted answer

i was able solve the issue using insertadjacenthtml, checkout the following:

var res_chartarray = [];

function addchart() {
  var res_chartpicker = document.getelementbyid("res_chartpicker");
  /* selection: bar, line, pie */

  /*apprends the div+canvas to the screen*/
  if (res_chartarray.length == 0)
    document.getelementbyid("res_div").innerhtml += "<div id='div_chart" + res_chartarray.length + "'>" + res_chartpicker.value + "<input type='button' value='delete' onclick='deletechart(this)'><br><canvas id='chart" + res_chartarray.length + "'></div>";
  else
    document.getelementbyid("div_chart" + (res_chartarray.length - 1)).insertadjacenthtml('afterend', "<div id='div_chart" + res_chartarray.length + "'>" + res_chartpicker.value + "<input type='button' value='delete' onclick='deletechart(this)'><br><canvas id='chart" + res_chartarray.length + "'></div>");

  var cur_ctx = document.getelementbyid('chart' + (res_chartarray.length)).getcontext('2d');

  res_chartarray.push(new chart(cur_ctx, {
    type: res_chartpicker.value,
    data: {
      labels: ["test"],
      datasets: [{
        label: "test1",
        data: [20]
      }]
    },
    options: {
      title: {
        display: true,
        text: "test"
      }
    }
  }));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js"></script>
<select onchange="addchart()" id="res_chartpicker">
  <option value="bar">bar</option>
  <option value="line">line</option>
  <option value="pie">pie</option>
</select>
<div id="res_div">
</div>


Related Query

More Query from same tag