How can i use passed array to selected option then use it to update my chart data in js?

Trying to make dynamic data from controller pass to view in selected option then use it in js to update my chart data

//FROM CONTROLLER TRYING TO PASS ARRAY To select option then use that value to update datasets

$keyboard = array(1,2,3,4,5,6,7,8,9,10,11,12);
$mouse    = array(5,3,2,1,4,6,7,10,12,13,14);
$monitor  = array(5,4,3,2,1);

//SELECT OPTION

  <option value="{ json_encode($keyboard) }">Keyboard</option>
  <option value="{ json_encode($mouse) }">Mouse</option>
  <option value="{ json_encode($monitor) }">Monitor</option>

//CHART

        data: {
            labels:['January', 'February', 'March','April','May','June','July','August','September','October','November','December'],
            datasets: [{}]
        },
        options: {
          title: {
            display: true,
            text: ['ITEM REPORT']
        },
        legend: {
            display: false
            }
        }
    });

// This.value has the value of selected itemvalue { json_encode($) }

// example i want to get { json_encode($monitor) } which is array(5,4,3,2,1);

     $("select").on('change', function() {  

      var passdata = this.value;

        chart.data.datasets = [{data: [passdata]}]
        chart.update()
    });
});

https://jsfiddle.net/Lt27v6ru/2/ (this is link for jsfiddle)

via Chebli Mohamed