3

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.

be_cracked
  • 91
  • 2
  • 11
  • 1
    Add some document onload wrappers to help make sure the DOM is loaded before the js tries to execute. If jQuery is an option, use $(document).ready(function(){......}); or equivalent. – nurdyguy Jul 13 '16 at 16:44
  • I'd also recommend using onchange="loadData()" (with the parens) though that shouldn't make much of a difference. – nurdyguy Jul 13 '16 at 16:53
  • @nurdyguy I did add the wrappers as you suggested (probably best pratice anyway^^). With further debugging I found that my function is precisely executed until and not including "var selected = doucment.getElementById("interval").value;". Is there some error? The Element ID is correct, so I dont know what might be causing that. – be_cracked Jul 13 '16 at 17:40
  • Is there a reason for the semi-colon value="1;" ? – nurdyguy Jul 13 '16 at 18:22
  • @nurdyguy It had a purpose, yes. I deleted it already though. – be_cracked Jul 13 '16 at 18:25
  • Remove the alert('runs'); and replace it with debugger; See if you can get into the debugger and step through the code. – nurdyguy Jul 13 '16 at 18:31
  • @nurdyguy Jesus... Good old typo "doUCment" ... But well. Now the console tells me that "ReferenceError: dataset is not defined". But it is defined in "var dataset = new vis.DataSet(items15);"? – be_cracked Jul 13 '16 at 21:42
  • 1
    yes, from the code posted here `dataset` is defined as you describe. However, I'd bet the code posted is not your current code and my hunch is the document ready scope is what is causing your error. – nurdyguy Jul 13 '16 at 22:34
  • @nurdyguy I updated the code to its current state. I expect it to be okay to define the function in a block starting with the document.ready stuff? Is this what I am looking for? http://stackoverflow.com/questions/4363113/jquery-scope-inside-document-ready – be_cracked Jul 13 '16 at 22:51
  • @nurdyguy Ah, I got it all working. Had to remove the var in front of the declaration. This makes the variable global, correct? Probably not the best securitywise, but since this is never going to see productive use, just a showcase for my institute, I figure it is not that bad. I'll learn how to use JS-Namespaces another day... :D I thank you a lot. – be_cracked Jul 13 '16 at 23:21
  • 1
    Here is a basic rule of thumb for you regarding global variables and .ready(...). When you are trying to access DOM elements you need to make sure that the DOM is loaded so you use the .ready. However, if you are saving a value to a variable and you `var` it inside of the .ready then it is scoped to that region. What you'll need to do is declare the variable outside of the .ready and then do the assignment inside of the .ready. – nurdyguy Jul 14 '16 at 14:51

0 Answers0