how can chart js call datasets base on value from select option?

trying to get value from select option dynamically then use the value to create new chart depend on value

doesn't work

"new Chart(context).Bar(callchart);"

but this works

"new Chart(context).Bar(keyboard);"

when you call it statically

@foreach($item_name as $in) item_name}}" value=""> @endforeach

var Mouse= { labels: ['January','February','March'],

datasets: [
    {
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [30,120,90]
    },
]
};

var keyboard = { labels: ['March', 'Apr', 'May'],

datasets: [
    {
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [50,100,140]
    },
]
};

var Spoon ={ labels: ['June', 'July', 'August'],

datasets: [
    {
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(220,220,220,1)",
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [1,2,3]
    },
]
};

var context = document.querySelector('#graph').getContext('2d');

if(window.bar != undefined) window.bar.destroy();

window.bar = new Chart(context).Bar(keyboard);

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

//GETING VALUE FROM SELECT OPTION

var callchart =this.value;

var context = document.querySelector('#graph').getContext('2d');

if(window.bar != undefined) window.bar.destroy();

//CREATING CHART USING VALUE FROM SELECT OPTION

window.bar = new Chart(context).Bar(callchart);

});

Uncaught TypeError: Cannot read property 'length' of undefined

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2WsCyOZ
via IFTTT