<form id="kaskieswijzer" onsubmit="myFunction(); return false">
<table id="opties" align="center">
<col width=213>
<col width=213>
<tr>
<td class="sorter-false"></td>
<td class="sorter-false"><p><b>Scenario</b></p></td>
</tr>
<tr>
<td> <label for="O"><a href="https://wiki.groenkennisnet.nl/display/KAS/Coating+Calculator#CoatingCalculator-Eigenschap_Orientatie" style="text-decoration:none">Oriëntatie</a></label></td>
<td><select id="O">
<option value="1"> 0° </option>
<option value="2"> 30° </option>
<option value="3"> 45° </option>
<option value="4"> 60° </option>
<option value="5"> 90° </option>
</select></td>
</tr>
<tr>
<td><label for="angle"><a href="https://wiki.groenkennisnet.nl/display/KAS/Coating+Calculator#CoatingCalculator-Eigenschap_Dakhelling" style="text-decoration:none">Dakhelling</label></td>
<td><select id="a">
<option value="1">0°</option>
<option value="2">10°</option>
<option value="3">15°</option>
<option value="4">20°</option>
<option value="5" selected="selected">23°</option>
<option value="6">25°</option>
<option value="7">30°</option>
</select></td>
</tr>
<tr>
<td><label for="year"><a href="https://wiki.groenkennisnet.nl/display/KAS/Coating+Calculator#CoatingCalculator-Eigenschap_Jaar" style="text-decoration:none">Jaar</label></td> <td><select id="y">
<option value="1">2016 </option>
<option value="2">2017 </option>
<option value="3">2018 </option>
</select></td>
</tr>
<tr>
<td><label for="periode"><a href="https://wiki.groenkennisnet.nl/display/KAS/Coating+Calculator#CoatingCalculator-Eigenschap_Seizoen" style="text-decoration:none">Seizoen</label></td>
<td><select id="p">
<option value="1">Lente</option>
<option value="2">Zomer</option>
<option value="3">Herfst</option>
<option value="4">Winter</option>
<option value="5">Jaarrond</option>
</select></td>
</tr>
</table>
<br />
<button id="knop" ><b>Start de berekening</b></button>
<table>
<tr>
<td>
<div id="Chart"></div>
</td>
</tr>
</table>
</form>
<script>
function myFunction() {
var index_1=get_text('y');
var index_2 =get_text('p');
var index_3 = get_text('a').substring(0,get_text('a').length-1);
var index_4 = get_text('O').substring(0,get_text('O').length-1);
var code = [index_1, index_2, index_3,index_4];
var data=call_api(code)
make_graph(data)
//make_graph_diff(light_1,light_2)
function get_text(elementId) {
var elt = document.getElementById(elementId);
var text=elt.options[elt.selectedIndex].text;
if (elt.selectedIndex == -1)
return null;
return (text);
}
function call_api(code_1){
var url = 'https://www.digigreenhouse.wur.nl/kaskieswijzer/dekhoek.aspx?year=' +
code_1[0] + '&period=' + code_1[1] +'&roofslope=' +code_1[2] +'&orient=' + code_1[3];
var xhttp = new XMLHttpRequest();
xhttp.open("GET", url, false);
xhttp.send();
if (xhttp.readyState == 4 && xhttp.status == 200) {
var output = JSON.parse(xhttp.responseText)
data=output.data
}
return data
}
function make_graph(data){
aoi=data.aoi;
north=data.north;
south=data.south;
total=data.total;
var trace1 = {
x: [aoi[0], aoi[1], aoi[2], aoi[3],aoi[4], aoi[5],aoi[6], aoi[7],aoi[8],aoi[9]],
y: [north[0], north[1], north[2], north[3],north[4], north[5],north[6], north[7],north[8],north[9]],
type: 'bar',
name: 'Rechts van de nok',
};
var trace2 = {
x: [aoi[0], aoi[1], aoi[2], aoi[3],aoi[4], aoi[5],aoi[6], aoi[7],aoi[8],aoi[9]],
y: [south[0], south[1], south[2], south[3],south[4], south[5],south[6], south[7],south[8],south[9]],
type: 'bar',
name: 'Links van de nok',
};
var trace3 = {
x: [aoi[0], aoi[1], aoi[2], aoi[3],aoi[4], aoi[5],aoi[6], aoi[7],aoi[8],aoi[9]],
y: [total[0], total[1], total[2], total[3],total[4], total[5],total[6], total[7],total[8],total[9]],
type: 'bar',
name: 'Gecombineerd',
};
var i;
for (i=0;i<9;i++)
{
trace1.y[i]=trace1.y[i].toFixed(1)
trace2.y[i]=trace2.y[i].toFixed(1)
trace3.y[i]=trace3.y[i].toFixed(1)
}
var layout = {
font:{
family: "Segoe UI, monospace",
color: "#172b4d",
},
title: 'Jaarlijkse lichtsom per invalshoek',
width: 640,
xaxis: {
title: 'Invalshoek op de ruit',
showgrid: true,
zeroline: false,
tick0: 5,
dtick: 10,
range: [5, 90],
},
yaxis: {
title: 'Lichtsom (%)',
showline: true,
showgrid: false,
zeroline: true,
showgrid: true,
}
};
Plotly.newPlot('Chart', [trace1,trace2,trace3], layout, {showSendToCloud: false});
}
}
</script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
#knop {
width: 640px;
height:50px;
border-radius: 12px;
font-family: Segoe UI;
font-size: large;
background-color: #172b4d;
color: white;
}
#kaskieswijzer,input, label {
font-family: Segoe UI;
font-size: 100%;
color: #172b4d ;
}
#opties, select {
width: 75%;
font-family: Segoe UI;
}
#kaskieswijzer,input, p {
font-family: Segoe UI;
font-size: 100%;
}
#opties {
width: 50%;
font-family: Segoe UI;
}
#opties,th {
text-align: left;
}
</style>
|