JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.mi"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--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 name="Item_Option">
<option value="{ json_encode($keyboard) }">Keyboard</option>
<option value="{ json_encode($mouse) }">Mouse</option>
<option value="{ json_encode($monitor) }">Monitor</option>
</select>
<canvas id="myChart" ></canvas>
JavaScript
$(document).ready(function () {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels:['January', 'February', 'March','April','May','June','July','August','September','October','November','December'],
datasets: [{}]
},
// Configuration options go here
options: {
title: {
display: true,
text: ['ITEM REPORT']
},
legend: {
display: false
}
}
});
$("select").on('change', function() {
// Getting $data for selected item like monitor which is array(5,4,3,2,1);
// This.value has the value of <option value="{ json_encode($) }"
var passdata = this.value;
chart.data.datasets = [{data: [passdata]}]
chart.update()
});
});