chart.jsでぐりぐり動くグラフを作る ref: https://qiita.com/yohm/items/586690bf36efa0838e37

file0.html

    <div class="slidecontainer" id="sliders">
      <input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_a">a : <span id="val_a">0</span><br/>
      <input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_b">b : <span id="val_b">0</span><br />
      <input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_c">c : <span id="val_c">0</span><br />
    </div>

file1.html

    <div class="chart-container" style="position: relative; height:40vh; width:80vw">
      <canvas id="myChart"></canvas>
    </div>

file2.html

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

file3.js

const xs = [];
for(let i=-20; i<21; i++) { xs.push(i*0.1); }    // xs = [-2.0, -1.9, -1.8, .... 2.0]  x:-2~2の範囲でプロットする
function calc_ys(xs,a,b,c) {             // yの座標を計算するための関数
  return xs.map(x => a*x*x+b*x+c);
}

file4.js

const ctx = document.getElementById("myChart").getContext('2d');
let myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: xs,            // x座標の配列
    datasets: [{
      label: 'ax^2 + bx + c',
      data: calc_ys(xs,0,0,0)     // y座標の配列（初期化するときには、a=b=c=0と仮にしている）
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min:-4, max:4           // yについて[-4,4]の範囲で描画するように固定。これがないと、データの値に応じて表示領域が変わってしまう。
        }
      }]
    }
  }
});

file5.js

var sliders = document.getElementById("sliders");
sliders.addEventListener("input", function() {
  let a = document.getElementById("slider_a").value;     // sliderの値を取得
  let b = document.getElementById("slider_b").value;
  let c = document.getElementById("slider_c").value;
  document.getElementById("val_a").textContent = a;      // 取得した値を"#val_a"のテキストに表示
  document.getElementById("val_b").textContent = b;
  document.getElementById("val_c").textContent = c;
  myChart.data.datasets[0].data = calc_ys(xs,Number(a),Number(b),Number(c));  // プロットのy座標のデータを新しいもので置き換える。
  myChart.update();                                      // 新しいデータを反映させる
}, false);