Chartjs-Is there a more optimized way to implement the change function of chart js upon changing the dropdowns?

$(document).ready(function() {
  var options = {
    type: "line",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
          label: "Ambient Temp",
          data: [4, 15, 16, 5, 30, 17],
          backgroundColor: "rgba(75, 192, 192, 0.2)",
          borderWidth: 1,
          borderColor: "rgba(75, 192, 192, 1)",
          yAxisID: 'left-y-axis'
        },
        {
          label: "Ambient Humidity",
          data: [3, 10, 25, 8, 12, 4],
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          borderWidth: 1,
          borderColor: "rgba(255, 99, 132, 1)",
          yAxisID: 'right-y-axis'
        },
        {
          label: "Booth Temp",
          data: [2, 19, 26, 8, 12, 28],
          backgroundColor: "rgba(153, 102, 255, 0.2)",
          borderWidth: 1,
          borderColor: "rgba(153, 102, 255, 1)",
          yAxisID: 'left-y-axis'
        },
        {
          label: "Booth Humidity",
          data: [1, 5, 28, 29, 14, 9],
          backgroundColor: "rgba(255, 159, 64, 0.2)",
          borderWidth: 1,
          borderColor: "rgba(255, 159, 64, 1)",
          yAxisID: 'right-y-axis'
        }
      ]
    },
    options: {
      animation: {
        tension: {
          duration: 1000,
          easing: "linear",
          from: 1,
          to: 0,
          loop: true
        }
      },
      scales: {
        yAxes: [{
          id: 'left-y-axis',
          position: 'left'
          // ticks: {
          //   reverse: false
          // }
        }, {
          id: 'right-y-axis',
          position: 'right'
        }]
      }
    }
  };
  var ctx = document.getElementById("myChart").getContext("2d");
  var chart = new Chart(ctx, options);

  function graphViews() {

    var dataVal = $('#dataSet option:selected').text();
    var optVal = $('#dataOption option:selected').text();
    var legendItem = chart.legend.legendItems

    legendItem.forEach(function(item, index) {
      if ((dataVal.toLowerCase().indexOf(item.text.toLowerCase().split(' ')[0]) > -1 || dataVal.toLowerCase() === 'all') &&
        (optVal.toLowerCase().indexOf(item.text.toLowerCase().split(' ')[1]) > -1 || optVal.toLowerCase() === 'all')) {
        chart.getDatasetMeta(index).hidden = false;
      } else {
        chart.getDatasetMeta(index).hidden = true;
      }

    });
    chart.update();
  }

  $("#dataSet").on("change", function() {
    graphViews();
  });

  $("#dataOption").on("change", function() {
    graphViews();
  });
});

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-2"></div>
    <div class="col-4">
      <div class="form-group mt-3 mb-3">
        <label for="dataSet">Select Data</label>
        <select class="form-control" id="dataSet">
          <option id="opt1" value="1">All</option>
          <option id="opt2" value="2">Ambient</option>
          <option id="opt3" value="3">Booth</option>
        </select>
      </div>
    </div>
    <div class="col-4">
      <div class="form-group mt-3 mb-3">
        <label for="dataOption">Select Options</label>
        <select class="form-control" id="dataOption">
          <option id="dt1" value="1">All</option>
          <option id="dt2" value="2">Temperature</option>
          <option id="dt3" value="3">Humidity</option>
        </select>
      </div>
    </div>
    <div class="col-2"></div>
  </div>
  <div class="row">
    <div class="col-2"></div>
    <div class="col-8">
      <canvas id="myChart"></canvas>
    </div>
    <div class="col-2"></div>
  </div>
  <div class="row">
    <div class="col-2"></div>
    <div class="col-8">
      <canvas id="mixedChart"></canvas>
    </div>
    <div class="col-2"></div>
  </div>
</div>