Я пытаюсь получить значение из опции выбора динамически, а затем использовать значение для создания новой диаграммы в зависимости от значения.
Не работает:
new Chart(context).Bar(callchart);
Но это работает:
new Chart(context).Bar(keyboard);
при статическом вызове.
<select>
@foreach($item_name as $in)
<option id="{{$in->item_name}}" value="{{$in->item_name}}">{{$in->item_name}} </option>
@endforeach
</select>
<canvas id="graph" width="800px" height="400px"></canvas>
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);
});
</script>
Uncaught TypeError: Невозможно прочитать свойство 'length' из неопределенного