I'm making a graph, and I want to change the graph type by using a select statement. I'm trying to make a variable that changes when I change the value of my select tag using a function. The only problem is that i already have a function that changes the X axis of my graph. I tried to mix them but every time i try to show the graph on my site I get the following error:
Uncaught ReferenceError: changeX is not defined at HTMLSelectElement.onchange
It probably has something to do with the fact that I use 2 functions inside each other. Does anybody know how to fix this?
My code:
HTMl:
<div class='col-12 XDropDown'>
<select id="SelectXValue" onChange='changeX(this)'>
<option value="" selected disabled hidden>Kies de X as</option>
</select>
</div>
<div class='col-12 TraceType'>
<select id="Trace_Type" onChange='getValueGraph();'>
<option value="histogram">histogram</option>
<option value="scatter">scatter</option>
<option value="bar">bar</option>
</select>
</div>
Javascript:
var select = document.getElementById('SelectXValue');
for (let key of Object.keys(allColumns)) {
var opt = document.createElement('option');
opt.value = key;
opt.innerHTML = key;
select.appendChild(opt);
}
function getValueGraph() {
var graphid = document.getElementById('Trace_Type');
var tracetype = graphid.options[graphid.selectedIndex].value;
console.log(tracetype);
// Changes Xvalue variable when selecting a different value in the dropdown menu
function changeX(sel) {
var staticX = allColumns[sel.options[sel.selectedIndex].text];
// The traces we want to plot
var traces = [];
for (let key of Object.keys(allColumns)) {
// Building the trace for the specific column.
var trace = {
type: tracetype,
histfunc: 'sum',
// mode: "bar",
name: key,
x: staticX,
y: allColumns[key],
visible: 'legendonly',
};
traces.push(trace);
}
// print_r(traces);
var layout = {
title: '',
autosize: false,
width: 1500,
height: 750,
xaxis: {
showticklabels: true,
tickangle: 'auto',
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
showexponent: 'all',
tickmode: 'array',
ticktext: 'date',
},
yaxis: {
showticklabels: true,
tickangle: 45,
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
showexponent: 'all'
},
};
Plotly.newPlot('graph', traces, layout);
}
}
CodePudding user response:
You've placed your changeX
inside your getValueGraph
function.
This means changeX
is only available to be called within that function, and do cant be used as an onclick
handler.
Additionally, you set tracetype
in getValueGraph
and use it within changeX
, this needs to be accessible within both scopes.
Lets move both the changeX
function and the tracetype
variable decleration into the root scope.
var select = document.getElementById('SelectXValue');
for (let key of Object.keys(allColumns)) {
var opt = document.createElement('option');
opt.value = key;
opt.innerHTML = key;
select.appendChild(opt);
}
var tracetype
function getValueGraph() {
var graphid = document.getElementById('Trace_Type');
tracetype = graphid.options[graphid.selectedIndex].value;
console.log(tracetype);
}
// Changes Xvalue variable when selecting a different value in the dropdown menu
function changeX(sel) {
var staticX = allColumns[sel.options[sel.selectedIndex].text];
// The traces we want to plot
var traces = [];
for (let key of Object.keys(allColumns)) {
// Building the trace for the specific column.
var trace = {
type: tracetype,
histfunc: 'sum',
// mode: "bar",
name: key,
x: staticX,
y: allColumns[key],
visible: 'legendonly',
};
traces.push(trace);
}
// print_r(traces);
var layout = {
title: '',
autosize: false,
width: 1500,
height: 750,
xaxis: {
showticklabels: true,
tickangle: 'auto',
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
showexponent: 'all',
tickmode: 'array',
ticktext: 'date',
},
yaxis: {
showticklabels: true,
tickangle: 45,
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
showexponent: 'all'
},
};
Plotly.newPlot('graph', traces, layout);
}
Also make sure the JavaScript is being loaded before the onclick
attributes are set.