Chartjs-How to filter dropdown based on the choice of another dropdown in JS?

by

0👍

You can edit the existing dropdown options, or you can create new options, with some basic commands. Here’s an example, though I had to comment out the chart.js stuff, since that’s not part of the Fiddle.

I also took the opportunity to move your arrays into variables for easy reuse, and to make your code look better. I didn’t name them very well, since I didn’t know what those values actually mean.

var ctx = document.getElementById('myChart').getContext('2d');

var array0 = [0, 0, 0, 0, 0, 0];
var array1 = [3, 6, 10, 12, 19, 25];
var array2 = [14, 28, 80, 20, 60, 45];
/*
var myChart = new Chart(ctx, {
                        type:'line',
                        data : {
                        
                        labels: ['Boston','Worcester','SpringField','Cambridge','Lowell','New Bedford'],
                        datasets : [{
                          label:'#trips',
                          data: array1,
                          backgroundColor:'green',
                          borderWidth:4,
                          borderColor:'#777',
                          hoverBorderWidth:3,
                          hoverBorderColor:'#000'
                          
                        },{
                          label:'#rides',
                          data: array2
                        }],
                
                        },
  options:{
    title:{
      display:true,
      text:'Line chart',
      fontSize:15
    },
    legend:{
      position:'bottom',
      labels:{
        fontColor:'red'
      }
    
  },
    layout:{
      padding:{
        left:50,
        right:0,
        top:0,
        bottom:0
      }
    },
    tooltips:{
      enabled:true
    }
  }
});
*/

$('#dataset').on('change', function(){
var select = document.getElementById("dataset2"); // I renamed the 2nd dropdown

// this loop removes previously added options, so you don't get duplicates or options not valid for the selection
for (var i = 0; i < select.options.length; i++) 
{ 
 if (select.options[i].value == "opt3" || select.options[i].value == "opt4" || select.options[i].value == "opt5")
 {
   select.remove(i); // remove at array location i
 }
}

  if(this.value=="1")
  {
  /*
    myChart.data.datasets[0].data = array1;
    myChart.data.datasets[1].data = array0;
    myChart.update();
*/
    var option = document.createElement('option');
    option.text = "testing one";
    option.value = "opt5";
    select.add(option, 0); // put this at the first location in the list
  }
  else if(this.value=="2")
  {
  /*
    myChart.data.datasets[0].data = array0;
    myChart.data.datasets[1].data = array2;
    myChart.update();
    */
    var option = document.createElement('option');
    option.text = "testing";
    option.value = "opt3";
    select.add(option, 1); // put this at the second location in the list
  }
  else if(this.value=="3")
  {
  /*
    myChart.data.datasets[0].data=array1;
    myChart.data.datasets[1].data=array2;
    myChart.update();
    */
    var option = document.createElement('option');
    option.text = "testing again";
    option.value = "opt4";
    select.add(option, 2); // put this at the third location in the list
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://github.com/chartjs/Chart.js"></script>
<div class="container-fluid">
      <div class="row">
        <div class="col-4">
          <div class="form-group mt-3 mb-3">
          <label for="dataset">Select Factor</label>
      <select class="form-control" id="dataset">
         <option id="opt1" value="1">one</option>
        <option id="opt2" value="2">two</option>
        <option id="opt3" value="3">three</option>
      </select>
        </div>
        </div>
        <div class="col-4"></div>
        <div class="col-4">
          <div class="form-group mt-3 mb-3">
            <label for="dataset">Select Options</label>
      <select class="form-control" id="dataset2">
        <option id="opt1" value="4">Tp</option>
        <option id="opt2" value="5">Hy</option>
      </select>
    </div>
        </div>
        <div class="col-4"></div>
      </div>
      <div class="row">
        <div class="col"></div>
        <div class="col-12">
          <canvas id="myChart"></canvas>

Leave a comment