<div data-ng-app="report2">
    <div  data-ng-controller="MyCtrl" style="width: 1440px; height: 300px">


        smoothDistance:
        <input type="number" name="quantity" id="smoothDistance">
        <input name="Do Smooth!" value="Do Smooth!" type="button" onclick="smooth();"/>
        <br/>
        dB:
        <input type="number" name="quantity" id="abovedB">
        <input name="Get Seconds" value="Get Seconds above dB" type="button" onclick="getSecondsAbovedB();"/>
        <br/>
        <input type="button" value="Reset data" onclick="reset();"/>
        <br/>
        Custom code goes here:
        <textarea name="codeText" id="codeText"></textarea>
        <input type="button" value="Run" onclick="runScript('codeText');"/>

        <select
            ng-model="selectedEvent"
            ng-change="eventSelect.changed()"
            ng-options="event.name + ' - ' + event.startDateTime for event in events">
        </select>



        <graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph>
    </div>
</div>













<script>
var myApp = angular.module('report2', []);

var mainGraph;

myApp.controller('MyCtrl', ["$scope", "$http", function($scope, $http) {

    $http.get("//" + location.host + "/event/upcomingEvents")
    .success(function(response) {
        $scope.events = response.events;
        $scope.selectedEvent = $scope.events[0];
        createLoadChart2($scope, $http)();
        console.log("Graph data: " + $scope.chart1Data);

    });
        $scope.eventSelect = {};
        $scope.eventSelect.changed = createLoadChart2($scope, $http);

}]);

myApp.directive('graph', function() {
    return {
        restrict: 'E', // Use as element
        scope: { // Isolate scope
            data: '=', // Two-way bind data to local scope
            opts: '=?' // '?' means optional
        },
        template: "<div style='width: 1440px; height: 300px'></div>", // We need a div to attach graph to
        link: function(scope, elem, attrs) {

            var graph = new Dygraph(elem.children()[0], scope.data, scope.opts );

            mainGraph = graph;
        }
    };
});

var chart1Data;

function createLoadChart2($scope, $http) {
        return function loadChart() {
            console.log("Loading..");

            console.log($http.defaults.headers);
               var config = {headers: {
            'Cache-Control': 'public',
            'Pragma': ''
        }
    };

            $http.get("//" + location.host + "/report/eventChunksDatapoints?eventId=" + $scope.selectedEvent.id, config)
            .success(function(response) {
                console.log("$http.get success, response: " + response.datapoints.length);
                var sdt = response.event[0].startDateTime;
                var td = parseInt(response.event[0].totalDuration);
                chunkDuration = parseInt(response.event[0].chunkDuration);

                var seriesData = []

                var previousChunkId = response.datapoints[0].c;
                var plotBandStart = Date.UTC(
                        sdt.slice(0,4), sdt.slice(4,6)-1, sdt.slice(6,8),
                        sdt.slice(8,10), sdt.slice(10,12), (parseInt(sdt.slice(12))),
                        (response.datapoints[0].t*1000));
                var plotBandEnd = plotBandStart;

                var chunkIndex = -1;
                for (var i=0; i < response.datapoints.length; i++) {
                    var timestamp = Date.UTC(
                        sdt.slice(0,4), sdt.slice(4,6)-1, sdt.slice(6,8),
                        sdt.slice(8,10), sdt.slice(10,12), (parseInt(sdt.slice(12))),
                        (response.datapoints[i].t*1000));

                    /*if (response.datapoints[i].c != previousChunkId) {

                        console.log("current: " + new Date(plotBandStart) + " - " + new Date(plotBandEnd) +
                            " - " + previousChunkId +
                            ": " + response.chunks[previousChunkId].filename);
                        $scope.highchartsNG.xAxis.plotBands.push({
                            from: plotBandStart,
                            to: plotBandEnd,
                            color: (++chunkIndex % 2 == 0 ? '#F1F1FF' : "#F1FFF1"),
                            id: 'plot-band-' + previousChunkId,
                            events: {
                                mouseover: updatePlayOggFunction(location.host, response.chunks[previousChunkId].filename)
                            }
                        });
                        previousChunkId = response.datapoints[i].c;
                        plotBandStart = plotBandEnd;
                    } else if (i == response.datapoints.length-1) {
                        plotBandEnd = timestamp;
                        var lastChunkId = response.datapoints[i].c;
                        console.log("last: " + new Date(plotBandStart) + " - " + new Date(plotBandEnd) +
                            " - " + lastChunkId +
                            ": " + response.chunks[lastChunkId].filename);

                        $scope.highchartsNG.xAxis.plotBands.push({
                            from: plotBandStart,
                            to: plotBandEnd,
                            color: (++chunkIndex % 2 == 0 ? '#F1F1FF' : "#F1FFF1"),
                            id: 'plot-band-' + lastChunkId,
                            events: {
                                mouseover: updatePlayOggFunction(location.host, response.chunks[lastChunkId].filename)
                            }
                        });
                    }*/

                    //seriesData.push([timestamp, response.datapoints[i].d]);
                    seriesData.push([i, response.datapoints[i].d]);
                    plotBandEnd = timestamp;
                }
                  chart1Data = seriesData;

                          $scope.graphs = [
            {
                //data: [ [1,10], [2,20], [3,50], [4,70] ],
                data: chart1Data,
                opts: { labels: [ "x", "A"], digitsAfterDecimal: 8 }

            }
        ];
               // $scope.highchartsNG.options.navigator.series.data = seriesData;
              //  $scope.highchartsNG.loading = false;
            });
        };
    }