I just took on a project written in C# and a cshtml/js frontend using ASP.NET. Since I pretty much don't know anything about html and javascript I am running into a few problems when trying to add a new feature regarding a visjs graph2d.
The goal is to have a dropdown menu that, when changed, changes the graph to a different dataset (It really just is a difference of dataresolution, but that is all figured out in my C# part).
I orientated on this visjs-example and especially this function to reload the data:
function loadDataIntoVis(newData) {
var span = document.getElementById("description");
dataset.clear();
dataset.add(newData);
span.innerHTML = 'Done!';
}
The relevant code from the cshtml file is:
</div>
<div class="row">
<div class="col-lg-9">
<legend>Stromverbrauch</legend>
<div>
<div id="visualization"></div>
</div>
</div>
</div>
<table>
<col width="600">
<col width="220">
<tr>
<td style="padding-right: 20px; border-right: 1px solid;">
<div id="visualization-options"></div>
</td>
<td style="padding-left: 5px;">
<table style="font-size: 12px;">
<col width="150">
<col width="50">
<tr>
<td>Intervall</td>
<td>
<select id="interval" onchange="loadData">
<option value="1;">1 Min</option>
<option value="15;" selected="selected">15 Min</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
...
<script>
$(document).ready(function () {
var container = document.getElementById('visualization');
var names = ['Grundlast', 'Stromverbrauch Operations', 'Stromverbrauch Summe'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
//options: {drawPoints: false}
});
groups.add({
id: 1,
content: names[1],
//options: {drawPoints: false}
});
groups.add({
id: 2,
content: names[2],
//options: {drawPoints: false}
});
var items15 = [
@foreach (var item in ECList15) {
<text>
{x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Baseload).ToString(), group: 0 },
{x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Operations).ToString(), group: 1 },
{x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Sum).ToString(), group: 2 },</text>
}
];
var items1 = [
@foreach (var item in ECList) {
<text>
{x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Baseload).ToString(), group: 0 },
{x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Operations).ToString(), group: 1 },
{x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Sum).ToString(), group: 2 },</text>
}
];
var dataset = new vis.DataSet(items15);
var options = {
style: 'bar',
defaultGroup: 'ungrouped',
drawPoints: false,
start: '@ECList.First().Date.ToString("yyyy-MM-dd HH:mm:ss")',
end: '@ECList.Last().Date.ToString("yyyy-MM-dd HH:mm:ss")',
legend: true,
shaded: true,
interpolation: false,
showCurrentTime: false,
dataAxis: {
left: {
range:{
min: 0
}
}
}
}
var graph2d = new vis.Graph2d(container, dataset, groups, options);
});
function loadData() {
var selected = document.getElementById("interval").value;
console.log(selected);
if (selected=='1') {
console.log(dataset);
dataset.clear();
dataset.add(items15);
} else {
console.log(dataset);
dataset.clear();
dataset.add(items15);
}
}
</script>
I tried quite a few different methods I deduced from the visjs examples, but none of them worked. If wanted I can list them all.
At first I suspected the function is not called and I am sort of correct, as that the changing of the dropdown menu does not execute the function. The function does get executed if called directly (did this for debugging) but the if (nor the else) part does get executed. I couldn't find or figure out anything that got it working for me.
Please keep in mind that I pretty much know nothing about javascript and might make the stupidest of mistakes.
Thanks in advance.