diff --git a/embed.php b/embed.php
index 688b9f7..e3eca3b 100644
--- a/embed.php
+++ b/embed.php
@@ -99,7 +99,12 @@
 </script>
 
 <script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/moment.min.js?v=<?php echo $js_css_version; ?>"></script>
+<script language="javascript" type="text/javascript" src="<?php echo $path;?>Modules/graph/graph.utils.js?v=<?php echo $js_css_version; ?>"></script>
+<script language="javascript" type="text/javascript" src="<?php echo $path;?>Modules/graph/graph.legend.js?v=<?php echo $js_css_version; ?>"></script>
 <script language="javascript" type="text/javascript" src="<?php echo $path;?>Modules/graph/graph.js?v=<?php echo $js_css_version; ?>"></script>
+<script language="javascript" type="text/javascript" src="<?php echo $path;?>Modules/graph/graph.csv.js?v=<?php echo $js_css_version; ?>"></script>
+<script language="javascript" type="text/javascript" src="<?php echo $path;?>Modules/graph/graph.histogram.js?v=<?php echo $js_css_version; ?>"></script>
+<script language="javascript" type="text/javascript" src="<?php echo $path;?>Modules/graph/graph.saved.js?v=<?php echo $js_css_version; ?>"></script>
 
 <script>
     $("body").css("background","none");
diff --git a/graph.csv.js b/graph.csv.js
new file mode 100644
index 0000000..c494a4e
--- /dev/null
+++ b/graph.csv.js
@@ -0,0 +1,103 @@
+//----------------------------------------------------------------------------------------
+// graph.csv.js - CSV export feature
+//----------------------------------------------------------------------------------------
+
+function printcsv()
+{
+    if (typeof feedlist[0] === "undefined") return;
+
+    const timeformat = $("#csvtimeformat").val();
+    const nullvalues = $("#csvnullvalues").val();
+    const headers = $("#csvheaders").val();
+
+    let csvout = "";
+
+    const value = [];
+    let line = [];
+    const lastvalue = [];
+    const start_time = feedlist[0].data[0][0];
+    let showName = false;
+    let showTag = false;
+
+    switch (headers) {
+        case "showNameTag": showName = true; showTag = true; break;
+        case "showName":    showName = true; break;
+    }
+
+    if (showName || showTag) {
+        switch (timeformat) {
+            case "unix":    line = ["Unix timestamp"]; break;
+            case "seconds": line = ["Seconds since start"]; break;
+            case "datestr": line = ["Date-time string"]; break;
+        }
+        for (const f in feedlist) {
+            line.push((showTag ? feedlist[f].tag : "") + (showTag && showName ? ":" : "") + (showName ? feedlist[f].name : ""));
+        }
+        csvout = '"' + line.join('", "') + '"\n';
+    }
+
+    for (const z in feedlist[0].data) {
+        line = [];
+        if (timeformat === "unix") {
+            line.push(Math.round(feedlist[0].data[z][0] / 1000));
+        } else if (timeformat === "seconds") {
+            line.push(Math.round((feedlist[0].data[z][0] - start_time) / 1000));
+        } else if (timeformat === "datestr") {
+            const t = new Date(feedlist[0].data[z][0]);
+            const year    = t.getFullYear();
+            const month   = String(t.getMonth() + 1).padStart(2, '0');
+            const day     = String(t.getDate()).padStart(2, '0');
+            const hours   = String(t.getHours()).padStart(2, '0');
+            const minutes = String(t.getMinutes()).padStart(2, '0');
+            const seconds = String(t.getSeconds()).padStart(2, '0');
+            line.push(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);
+        }
+
+        let nullfound = false;
+        for (const f in feedlist) {
+            if (value[f] === undefined) value[f] = null;
+            lastvalue[f] = value[f];
+            if (feedlist[f].data[z] !== undefined) {
+                if (feedlist[f].data[z][1] === null) nullfound = true;
+                if (feedlist[f].data[z][1] !== null || nullvalues === "show") value[f] = feedlist[f].data[z][1];
+                if (value[f] !== null) value[f] = (value[f] * 1.0).toFixed(feedlist[f].dp);
+                line.push(value[f] + "");
+            }
+        }
+
+        if (nullvalues === "remove" && nullfound) {
+            // pass
+        } else {
+            csvout += line.join(", ") + "\n";
+        }
+    }
+    $("#csv").val(csvout);
+}
+
+function csvShowHide(set)
+{
+    var action="hide";
+
+    if (set==="swap") {
+        if ($("#showcsv").html()==_lang["Show CSV Output"]) {
+            action="show";
+        } else {
+            action="hide";
+        }
+    } else {
+        action = (set==="1" ? "show" : "hide");
+    }
+
+    if (action==="show") {
+        printcsv()
+        showcsv = 1;
+        $("#csv").show();
+        $(".csvoptions").show();
+        $("#showcsv").html(_lang["Hide CSV Output"]);
+    } else {
+        showcsv = 0;
+        $("#csv").hide();
+        $(".csvoptions").hide();
+        $("#showcsv").html(_lang["Show CSV Output"]);
+    }
+}
diff --git a/graph.editor.js b/graph.editor.js
new file mode 100644
index 0000000..0172e97
--- /dev/null
+++ b/graph.editor.js
@@ -0,0 +1,459 @@
+//----------------------------------------------------------------------------------------
+// graph.editor.js - Editor UI: feed selector sidebar and view-mode controls
+// Only loaded by view.php (not embed.php)
+//----------------------------------------------------------------------------------------
+
+//----------------------------------------------------------------------------------------
+// buildFeedSelectorHTML - builds the HTML for the sidebar feed selector table
+// Returns { html, feedsbytag, numberoftags }
+//----------------------------------------------------------------------------------------
+function buildFeedSelectorHTML(feeds) {
+    const feedsbytag = {};
+    let numberoftags = 0;
+    for (const feed of feeds) {
+        if (feedsbytag[feed.tag] === undefined) {
+            feedsbytag[feed.tag] = [];
+            numberoftags++;
+        }
+        feedsbytag[feed.tag].push(feed);
+    }
+
+    let out = `<colgroup>
+        <col span='1' style='width: 70%;'>
+        <col span='1' style='width: 15%;'>
+        <col span='1' style='width: 15%;'>
+    </colgroup>`;
+
+    for (const tag in feedsbytag) {
+        const tagname = tag || 'undefined';
+        out += `<thead>
+            <tr class='tagheading' data-tag='${tagname}' tabindex='0'>
+                <th colspan='3'><span class='caret'></span>${tagname}</th>
+            </tr>
+        </thead>
+        <tbody class='tagbody' data-tag='${tagname}'>`;
+        for (const feed of feedsbytag[tag]) {
+            let name = feed.name;
+            if (name && name.length > 20) name = name.substr(0, 20) + '..';
+            out += `<tr style='color:#666'>
+                <th class='feed-title' title='${name}' data-feedid='${feed.id}' tabindex='0'><span class='text-truncate d-inline-block'>${name}</span></th>
+                <td><input class='feed-select-left' data-feedid='${feed.id}' type='checkbox'></td>
+                <td><input class='feed-select-right' data-feedid='${feed.id}' type='checkbox'></td>
+            </tr>`;
+        }
+        out += '</tbody>';
+    }
+    return { html: out, feedsbytag, numberoftags };
+}
+
+//----------------------------------------------------------------------------------------
+// Side bar feed selector and events associated with editor only, not loaded in embed mode
+//----------------------------------------------------------------------------------------
+function graph_init_editor()
+{
+    if (!feeds) feeds = feedlist;
+
+    // Draw sidebar feed selector -------------------------------------------
+    const { html, feedsbytag, numberoftags } = buildFeedSelectorHTML(feeds);
+
+    // ---------------------------------------------------------------
+    // Writting direct to the menu system here
+    // ---------------------------------------------------------------
+    // 1. Populate custom l3 menu from sidebar html placed in hidden element
+    $(".menu-l3").html($("#sidebar_html").html());
+    // 2. Clear original hidden element
+    $("#sidebar_html").html("");
+    // 3. Populate with feed list selector
+    $("#feeds").html(html);
+    // 4. Show l3 menu
+    if (menu.width >= 576) menu.show_l3();
+    // 5. Enable l3 menu so that collapsing and re-expanding works
+    if (menu.obj.setup != undefined) {
+        if (menu.obj.setup.l2 != undefined) {
+            if (menu.obj.setup.l2.graph != undefined) {
+                menu.obj.setup.l2.graph.l3 = [];
+                menu.active_l3 = true;
+            }
+        }
+    }
+    if (session_write) load_saved_graphs_menu();
+    // ---------------------------------------------------------------
+
+    if (feeds.length > 12 && numberoftags > 2) {
+        $(".tagbody").hide();
+    }
+
+    $("#info").show();
+    if ($("#showmissing")[0]!=undefined) $("#showmissing")[0].checked = showmissing;
+    if ($("#showtag")[0]!=undefined) $("#showtag")[0].checked = showtag;
+    if ($("#showlegend")[0]!=undefined) $("#showlegend")[0].checked = showlegend;
+
+    datetimepickerInit();
+
+    // Events start here -------------------------------------------
+
+    $("#reload").click(function(){
+        reloadDatetimePrep();
+        view.interval = $("#request-interval").val();
+        view.limitinterval = $("#request-limitinterval")[0].checked*1;
+        graph_reload();
+    });
+
+    $("#clear").click(function(){
+
+        feedlist = [];
+        plotdata = [];
+        skipmissing = 0;
+        requesttype = "interval";
+        showcsv = 0;
+        showmissing = false;
+        showtag = true;
+        showlegend = true;
+        floatingtime = 1;
+        yaxismin = "auto";
+        yaxismax = "auto";
+        yaxismin2 = "auto";
+        yaxismax2 = "auto";
+        csvtimeformat = "datestr";
+        csvnullvalues = "show";
+        csvheaders = "showNameTag";
+        current_graph_id = "";
+        current_graph_name = "";
+        previousPoint = 0;
+        active_histogram_feed = 0;
+
+        const timeWindow = 3600000 * 24.0 * 7;
+        const now = Math.round(+new Date() * 0.001) * 1000;
+        view.start = now - timeWindow;
+        view.end = now;
+        view.calc_interval();
+
+        load_feed_selector();
+        graph_reload();
+    });
+
+    $("#showcsv").click(function(){
+        csvShowHide("swap");
+    });
+    $(".csvoptions").hide();
+
+    $("body").on("click",".average",function(){
+        var feedid = $(this).attr("feedid");
+
+        for (var z in feedlist) {
+            if (feedlist[z].id==feedid) {
+                if ($(this)[0].checked) {
+                    feedlist[z].average = 1;
+                } else {
+                    feedlist[z].average = 0;
+                }
+                break;
+            }
+        }
+        graph_draw();
+    });
+
+    $("body").on("click", ".move-feed", function(){
+        var feedid = $(this).attr("feedid")*1;
+        var curpos = parseInt(feedid);
+        var moveby = parseInt($(this).attr("moveby"));
+        var newpos = curpos + moveby;
+        if (newpos>=0 && newpos<feedlist.length){
+            newfeedlist = arrayMove(feedlist,curpos,newpos);
+            graph_draw();
+        }
+    });
+
+    $("body").on("click",".delta",function(){
+        var feedid = $(this).attr("feedid");
+
+        for (var z in feedlist) {
+            if (feedlist[z].id==feedid) {
+                if ($(this)[0].checked) {
+                    feedlist[z].delta = 1;
+                } else {
+                    feedlist[z].delta = 0;
+                }
+                break;
+            }
+        }
+        graph_draw();
+    });
+
+    $("body").on("change",".linecolor",function(){
+        var feedid = $(this).attr("feedid");
+
+        for (var z in feedlist) {
+            if (feedlist[z].id==feedid) {
+                feedlist[z].color = $(this).val();
+                break;
+            }
+        }
+        graph_draw();
+    });
+
+    $("body").on("change",".fill",function(){
+        var feedid = $(this).attr("feedid");
+
+        for (var z in feedlist) {
+            if (feedlist[z].id==feedid) {
+                feedlist[z].fill = $(this)[0].checked;
+                break;
+            }
+        }
+        graph_draw();
+    });
+
+    $("body").on("change",".stack",function(){
+        var feedid = $(this).attr("feedid");
+
+        for (var z in feedlist) {
+            if (feedlist[z].id==feedid) {
+                feedlist[z].stack = $(this)[0].checked;
+                break;
+            }
+        }
+        graph_draw();
+    });
+
+    $("body").on("click keyup",".feed-title", function(event){
+        let enterKey = 13;
+        if((event.type === 'keyup' && event.which === enterKey) || event.type === 'click') {
+            var feedid = $(this).data("feedid");
+            $('.feed-select-left[data-feedid="' + feedid + '"]').click();
+            event.preventDefault();
+        }
+    });
+
+    $("body").on("click",".feed-select-left",function(){
+        const feedid = $(this).data("feedid");
+        const checked = $(this)[0].checked;
+
+        let loaded = false;
+        for (const z in feedlist) {
+            if (feedlist[z].id == feedid) {
+                if (!checked) {
+                    feedlist.splice(z, 1);
+                } else {
+                    feedlist[z].yaxis = 1;
+                    loaded = true;
+                    $(".feed-select-right[data-feedid="+feedid+"]")[0].checked = false;
+                }
+            }
+        }
+        if (!loaded && checked) pushfeedlist(feedid, 1);
+        graph_reload();
+    });
+
+    $("body").on("click",".feed-select-right",function(){
+        const feedid = $(this).data("feedid");
+        const checked = $(this)[0].checked;
+
+        let loaded = false;
+        for (const z in feedlist) {
+            if (feedlist[z].id == feedid) {
+                if (!checked) {
+                    feedlist.splice(z, 1);
+                } else {
+                    feedlist[z].yaxis = 2;
+                    loaded = true;
+                    $(".feed-select-left[data-feedid="+feedid+"]")[0].checked = false;
+                }
+            }
+        }
+        if (!loaded && checked) pushfeedlist(feedid, 2);
+        graph_reload();
+    });
+
+    $("body").on("click keyup",".tagheading",function(event){
+        let enterKey = 13;
+
+        if((event.type === 'keyup' && event.which === enterKey) || event.type === 'click') {
+            var tag = $(this).data("tag");
+            var e = $(".tagbody[data-tag='"+tag+"']");
+            if (e.is(":visible")) e.hide(); else e.show();
+            event.preventDefault();
+        }
+    });
+
+    $("#showmissing").click(function(){
+        if ($("#showmissing")[0].checked) showmissing = true; else showmissing = false;
+        graph_draw();
+    });
+
+    $("#showlegend").click(function(){
+        if ($("#showlegend")[0].checked) showlegend = true; else showlegend = false;
+        graph_draw();
+    });
+
+    $("#showtag").click(function(){
+        if ($("#showtag")[0].checked) showtag = true; else showtag = false;
+        graph_draw();
+    });
+
+    $("#request-fixinterval").click(function(){
+        if ($("#request-fixinterval")[0].checked) view.fixinterval = true; else view.fixinterval = false;
+        if (view.fixinterval) {
+            $("#request-interval").prop('disabled', true);
+        } else {
+            $("#request-interval").prop('disabled', false);
+        }
+    });
+
+    $("#request-type").val("interval");
+    $("#request-type").change(function() {
+        var mode = $(this).val();
+
+        if (mode!="interval") {
+            $(".fixed-interval-options").hide();
+            view.fixinterval = true;
+        } else {
+            $(".fixed-interval-options").show();
+            view.fixinterval = false;
+        }
+        view.mode = mode
+
+        // Intervals are set here for bar graph bar width sizing
+        // and for changing between interval and daily, weekly, monthly, annual modes
+        if (mode=="daily") view.interval = 86400;
+        if (mode=="weekly") view.interval = 86400*7;
+        if (mode=="monthly") view.interval = 86400*30;
+        if (mode=="annual") view.interval = 86400*365;
+
+        $("#request-interval").val(view.interval);
+        graph_reload();
+    });
+
+    $("body").on("change",".decimalpoints",function(){
+        var feedid = $(this).attr("feedid");
+        var dp = $(this).val();
+
+        for (var z in feedlist) {
+            if (feedlist[z].id == feedid) {
+                feedlist[z].dp = dp;
+
+                graph_draw();
+                break;
+            }
+        }
+    });
+
+    $("body").on("change",".plottype",function(){
+        var feedid = $(this).attr("feedid");
+        var plottype = $(this).val();
+
+        for (var z in feedlist) {
+            if (feedlist[z].id == feedid) {
+                feedlist[z].plottype = plottype;
+
+                graph_draw();
+                break;
+            }
+        }
+    });
+    // left axis
+    $("body").on("change","#yaxis-min",function(){
+        yaxismin = $(this).val();
+        graph_draw();
+    });
+
+    $("body").on("change","#yaxis-max",function(){
+        yaxismax = $(this).val();
+        graph_draw();
+    });
+    // right axis
+    $("body").on("change","#yaxis-min2",function(){
+        yaxismin2 = $(this).val();
+        graph_draw();
+    });
+    $("body").on("change","#yaxis-max2",function(){
+        yaxismax2 = $(this).val();
+        graph_draw();
+    });
+    $("body").on("click",".reset-yaxis",function(){
+        $(this).parent().find('input').val('auto');
+    })
+
+    $("#csvtimeformat").change(function(){
+        csvtimeformat=$(this).val();
+        printcsv();
+    });
+
+    $("#csvnullvalues").change(function(){
+        csvnullvalues=$(this).val();
+        printcsv();
+    });
+
+    $("#csvheaders").change(function(){
+        csvheaders=$(this).val();
+        printcsv();
+    });
+
+    $("#download-csv").click(function(){
+        download_data("graph.csv", $("#csv").val())
+    });
+
+    $('body').on("click",".legendColorBox",function(d){
+          var country = $(this).html().toLowerCase();
+        //   console.log(country);
+    });
+
+    $(".feed-options-show-stats").click(function(event){
+        $("#feed-options-table").hide();
+        $("#feed-stats-table").show();
+        $(".feed-options-show-options").removeClass('hide');
+        $(".feed-options-show-stats").addClass('hide');
+        event.preventDefault();
+    });
+
+    $(".feed-options-show-options").click(function(event){
+        $("#feed-options-table").show();
+        $("#feed-stats-table").hide();
+        $(".feed-options-show-options").addClass('hide');
+        $(".feed-options-show-stats").removeClass('hide');
+        event.preventDefault();
+    });
+
+    // Reload feeds if remove-null is changed or remove-null-max-duration is changed
+    $(".remove-null").change(function(){
+        graph_reload();
+    });
+
+    $(".remove-null-max-duration").change(function(){
+        graph_reload();
+    });
+
+    /**
+     * show sidebar if mobile view hiding sidebar
+     */
+    $(document).on('click', '.alert a.open-sidebar', function(event) {
+        if (typeof show_sidebar !== 'undefined') {
+            show_sidebar();
+            // @todo: ensure the 3rd level graph menu is open
+        }
+        return false;
+    });
+}
+
+function load_feed_selector() {
+    for (var z in feeds) {
+        var feedid = feeds[z].id;
+        $(".feed-select-left[data-feedid="+feedid+"]")[0].checked = false;
+        $(".feed-select-right[data-feedid="+feedid+"]")[0].checked = false;
+    }
+
+    for (var z=0; z<feedlist.length; z++) {
+        var feedid = feedlist[z].id;
+        var tag = feedlist[z].tag;
+        if (tag=="") tag = "undefined";
+
+        if (feedlist[z].yaxis==1) {
+            if ($(".feed-select-left[data-feedid="+feedid+"]")[0])
+                $(".feed-select-left[data-feedid="+feedid+"]")[0].checked = true; $(".tagbody[data-tag='"+tag+"']").show();
+        }
+        if (feedlist[z].yaxis==2) {
+            if ($(".feed-select-left[data-feedid="+feedid+"]")[0])
+                $(".feed-select-right[data-feedid="+feedid+"]")[0].checked = true; $(".tagbody[data-tag='"+tag+"']").show();
+        }
+    }
+}
diff --git a/graph.histogram.js b/graph.histogram.js
new file mode 100644
index 0000000..8d35513
--- /dev/null
+++ b/graph.histogram.js
@@ -0,0 +1,90 @@
+//----------------------------------------------------------------------------------------
+// graph.histogram.js - Histogram feature
+//----------------------------------------------------------------------------------------
+
+// Launch histogram mode for a given feed
+$('body').on('click', '.histogram', function() {
+    $('#navigation').hide();
+    $('#histogram-controls').show();
+    const feedid = $(this).attr('feedid');
+    active_histogram_feed = feedid;
+    const type = $('#histogram-type').val();
+    let resolution = 1;
+
+    let index = 0;
+    for (const z in feedlist) {
+        if (feedlist[z].id == feedid) { index = z; break; }
+    }
+
+    if (feedlist[index].stats.diff < 5000) resolution = 10;
+    if (feedlist[index].stats.diff < 100) resolution = 0.1;
+    $('#histogram-resolution').val(resolution);
+
+    histogram(feedid, type, resolution);
+});
+
+// Change the histogram resolution
+$('#histogram-resolution').change(function() {
+    const type = $('#histogram-type').val();
+    const resolution = $('#histogram-resolution').val();
+    histogram(active_histogram_feed, type, resolution);
+});
+
+// Time at value or power to kWh
+$('#histogram-type').change(function() {
+    const type = $('#histogram-type').val();
+    const resolution = $('#histogram-resolution').val();
+    histogram(active_histogram_feed, type, resolution);
+});
+
+// Return to power graph
+$('#histogram-back').click(function() {
+    $('#navigation').show();
+    $('#histogram-controls').hide();
+    graph_draw();
+});
+
+// Draw the histogram
+function histogram(feedid, type, resolution)
+{
+    const histData = {};
+    let val = 0;
+
+    // Get the feedlist index of the feedid
+    let index = -1;
+    for (const z in feedlist) {
+        if (feedlist[z].id == feedid) { index = z; }
+    }
+    if (index === -1) return false;
+
+    // Load data from feedlist object
+    const data = feedlist[index].data;
+
+    for (let i = 1; i < data.length; i++) {
+        if (data[i][1] !== null) val = data[i][1];
+        const key = Math.round(val / resolution) * resolution;
+        if (histData[key] === undefined) histData[key] = 0;
+
+        const t = (data[i][0] - data[i - 1][0]) * 0.001;
+        let inc = 0;
+        if (type === 'kwhatpower') inc = (val * t) / (3600.0 * 1000.0);
+        if (type === 'timeatvalue') inc = t;
+        histData[key] += inc;
+    }
+
+    // Sort and convert to 2d array
+    const tmp = [];
+    for (const z in histData) tmp.push([z * 1, histData[z]]);
+    tmp.sort(function(a, b) { return a[0] > b[0] ? 1 : -1; });
+
+    const options = {
+        series: { bars: { show: true, barWidth: resolution * 0.8 } },
+        grid: { hoverable: true }
+    };
+
+    let label = '';
+    if (showtag) label += feedlist[index].tag + ': ';
+    label += feedlist[index].name;
+
+    $.plot('#placeholder', [{label: label, data: tmp}], options);
+}
\ No newline at end of file
diff --git a/graph.js b/graph.js
index 5b0d586..c65a023 100644
--- a/graph.js
+++ b/graph.js
@@ -174,462 +174,33 @@ function reloadDatetimePrep()
     view.end = timewindowEnd*1000;
 }
 
-//----------------------------------------------------------------------------------------
-// Side bar feed selector and events associated with editor only, not loaded in embed mode
-//----------------------------------------------------------------------------------------
-function graph_init_editor()
-{
-    if (!feeds) feeds = feedlist;
-
-    var numberoftags = 0;
-    feedsbytag = {};
-    for (var z in feeds) {
-        if (feedsbytag[feeds[z].tag]==undefined) {
-            feedsbytag[feeds[z].tag] = [];
-            numberoftags++;
-        }
-        feedsbytag[feeds[z].tag].push(feeds[z]);
-    }
-
-    // Draw sidebar feed selector -------------------------------------------
-    
-    var out = "";
-    out += "<colgroup>";
-    out += "<col span='1' style='width: 70%;'>";
-    out += "<col span='1' style='width: 15%;'>";
-    out += "<col span='1' style='width: 15%;'>";
-    out += "</colgroup>";
-
-    for (var tag in feedsbytag) {
-       tagname = tag;
-       if (tag=="") tagname = "undefined";
-       out += "<thead>";
-       out += "<tr class='tagheading' data-tag='"+tagname+"' tabindex='0'>";
-       out += "<th colspan='3'><span class='caret'></span>"+tagname+"</th>";
-       out += "</tr>";
-       out += "</thead>";
-       out += "<tbody class='tagbody' data-tag='"+tagname+"'>";
-       for (var z in feedsbytag[tag])
-       {
-           out += "<tr style='color:#666'>";
-           var name = feedsbytag[tag][z].name;
-           if (name && name.length>20) {
-               name = name.substr(0,20)+"..";
-           }
-           out += "<th class='feed-title' title='"+name+"' data-feedid='"+feedsbytag[tag][z].id+"' tabindex='0'><span class='text-truncate d-inline-block'>"+name+"</span></th>";
-           out += "<td><input class='feed-select-left' data-feedid='"+feedsbytag[tag][z].id+"' type='checkbox'></td>";
-           out += "<td><input class='feed-select-right' data-feedid='"+feedsbytag[tag][z].id+"' type='checkbox'></td>";
-           out += "</tr>";
-       }
-       out += "</tbody>";
-    }
-    
-    // ---------------------------------------------------------------
-    // Writting direct to the menu system here
-    // ---------------------------------------------------------------
-    // 1. Populate custom l3 menu from sidebar html placed in hidden element
-    $(".menu-l3").html($("#sidebar_html").html());
-    // 2. Clear original hidden element
-    $("#sidebar_html").html("");
-    // 3. Populate with feed list selector
-    $("#feeds").html(out);
-    // 4. Show l3 menu
-    if (menu.width>=576) menu.show_l3();
-    // 5. Enable l3 menu so that collapsing and re-expanding works
-    if (menu.obj.setup!=undefined) {
-        if (menu.obj.setup.l2!=undefined) {
-            if (menu.obj.setup.l2.graph!=undefined) {
-                menu.obj.setup.l2.graph.l3 = []
-                menu.active_l3 = true;
-            }
-        }
-    }
-    if (session_write) load_saved_graphs_menu();
-    // ---------------------------------------------------------------
-    
-    if (feeds.length>12 && numberoftags>2) {
-        $(".tagbody").hide();
-    }
-
-    $("#info").show();
-    if ($("#showmissing")[0]!=undefined) $("#showmissing")[0].checked = showmissing;
-    if ($("#showtag")[0]!=undefined) $("#showtag")[0].checked = showtag;
-    if ($("#showlegend")[0]!=undefined) $("#showlegend")[0].checked = showlegend;
-
-    datetimepickerInit();
-
-    // Events start here -------------------------------------------
-
-    $("#reload").click(function(){
-        reloadDatetimePrep();
-        view.interval = $("#request-interval").val();
-        view.limitinterval = $("#request-limitinterval")[0].checked*1;
-        graph_reload();
-    });
-    
-    $("#clear").click(function(){
-    
-        feedlist = [];
-        plotdata = [];
-        skipmissing = 0;
-        requesttype = "interval";
-        showcsv = 0;
-        showmissing = false;
-        showtag = true;
-        showlegend = true;
-        floatingtime=1;
-        yaxismin="auto";
-        yaxismax="auto";
-        yaxismin2="auto";
-        yaxismax2="auto";
-        csvtimeformat="datestr";
-        csvnullvalues="show";
-        csvheaders="showNameTag";
-        current_graph_id = "";
-        current_graph_name = "";
-        previousPoint = 0;
-        active_histogram_feed = 0;
-
-        var timeWindow = 3600000*24.0*7;
-        var now = Math.round(+new Date * 0.001)*1000;
-        view.start = now - timeWindow;
-        view.end = now;
-        view.calc_interval();
-        
-        load_feed_selector();
-        graph_reload();
-    });
-
-    $("#showcsv").click(function(){
-        csvShowHide("swap");
-    });
-    $(".csvoptions").hide();
-
-    $("body").on("click",".average",function(){
-        var feedid = $(this).attr("feedid");
-
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                if ($(this)[0].checked) {
-                    feedlist[z].average = 1;
-                } else {
-                    feedlist[z].average = 0;
-                }
-                break;
-            }
-        }
-        graph_draw();
-    });
-
-    $("body").on("click", ".move-feed", function(){
-        var feedid = $(this).attr("feedid")*1;
-        var curpos = parseInt(feedid);
-        var moveby = parseInt($(this).attr("moveby"));
-        var newpos = curpos + moveby;
-        if (newpos>=0 && newpos<feedlist.length){
-            newfeedlist = arrayMove(feedlist,curpos,newpos);
-            graph_draw();
-        }
-    });
-
-    $("body").on("click",".delta",function(){
-        var feedid = $(this).attr("feedid");
-
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                if ($(this)[0].checked) {
-                    feedlist[z].delta = 1;
-                } else {
-                    feedlist[z].delta = 0;
-                }    
-                break;
-            }
-        }
-        graph_draw();
-    });
-
-    $("body").on("change",".linecolor",function(){
-        var feedid = $(this).attr("feedid");
-
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                feedlist[z].color = $(this).val();
-                break;
-            }
-        }
-        graph_draw();
-    });
-
-    $("body").on("change",".fill",function(){
-        var feedid = $(this).attr("feedid");
-
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                feedlist[z].fill = $(this)[0].checked;
-                break;
-            }
-        }
-        graph_draw();
-    });
-
-    $("body").on("change",".stack",function(){
-        var feedid = $(this).attr("feedid");
-
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                feedlist[z].stack = $(this)[0].checked;
-                break;
-            }
-        }
-        graph_draw();
-    });
-
-    $("body").on("click keyup",".feed-title", function(event){
-        let enterKey = 13;
-        if((event.type === 'keyup' && event.which === enterKey) || event.type === 'click') {
-            var feedid = $(this).data("feedid");
-            $('.feed-select-left[data-feedid="' + feedid + '"]').click();
-            event.preventDefault();
-        }
-    });
-    $("body").on("click",".feed-select-left",function(){
-        var feedid = $(this).data("feedid");
-        var checked = $(this)[0].checked;
-
-        var loaded = false;
-        for (var z in feedlist) {
-           if (feedlist[z].id==feedid) {
-               if (!checked) {
-                   feedlist.splice(z,1);
-               } else {
-                   feedlist[z].yaxis = 1;
-                   loaded = true;
-                   $(".feed-select-right[data-feedid="+feedid+"]")[0].checked = false;
-               }
-           }
-        }
-        if (loaded==false && checked) pushfeedlist(feedid, 1);
-        graph_reload();
-    });
-
-    $("body").on("click",".feed-select-right",function(){
-        var feedid = $(this).data("feedid");
-        var checked = $(this)[0].checked;
-
-        var loaded = false;
-        for (var z in feedlist) {
-           if (feedlist[z].id==feedid) {
-               if (!checked) {
-                   feedlist.splice(z,1);
-               } else {
-                   feedlist[z].yaxis = 2;
-                   loaded = true;
-                   $(".feed-select-left[data-feedid="+feedid+"]")[0].checked = false;
-               }
-           }
-        }
-        if (loaded==false && checked) pushfeedlist(feedid, 2);
-        graph_reload();
-    });
-
-    $("body").on("click keyup",".tagheading",function(event){
-        let enterKey = 13;
-
-        if((event.type === 'keyup' && event.which === enterKey) || event.type === 'click') {
-            var tag = $(this).data("tag");
-            var e = $(".tagbody[data-tag='"+tag+"']");
-            if (e.is(":visible")) e.hide(); else e.show();
-            event.preventDefault();
-        }
-    });
-
-    $("#showmissing").click(function(){
-        if ($("#showmissing")[0].checked) showmissing = true; else showmissing = false;
-        graph_draw();
-    });
-
-    $("#showlegend").click(function(){
-        if ($("#showlegend")[0].checked) showlegend = true; else showlegend = false;
-        graph_draw();
-    });
-
-    $("#showtag").click(function(){
-        if ($("#showtag")[0].checked) showtag = true; else showtag = false;
-        graph_draw();
-    });
-
-    $("#request-fixinterval").click(function(){
-        if ($("#request-fixinterval")[0].checked) view.fixinterval = true; else view.fixinterval = false;
-        if (view.fixinterval) {
-            $("#request-interval").prop('disabled', true);
-        } else {
-            $("#request-interval").prop('disabled', false);
-        }
-    });
-
-    $("#request-type").val("interval");
-    $("#request-type").change(function() {
-        var mode = $(this).val();
-
-        if (mode!="interval") {
-            $(".fixed-interval-options").hide();
-            view.fixinterval = true;
-        } else {
-            $(".fixed-interval-options").show();
-            view.fixinterval = false;
-        }
-        view.mode = mode
-
-        // Intervals are set here for bar graph bar width sizing
-        // and for changing between interval and daily, weekly, monthly, annual modes
-        if (mode=="daily") view.interval = 86400;
-        if (mode=="weekly") view.interval = 86400*7;
-        if (mode=="monthly") view.interval = 86400*30;
-        if (mode=="annual") view.interval = 86400*365;
-
-        $("#request-interval").val(view.interval);
-        graph_reload();
-    });
-
-    $("body").on("change",".decimalpoints",function(){
-        var feedid = $(this).attr("feedid");
-        var dp = $(this).val();
-
-        for (var z in feedlist) {
-            if (feedlist[z].id == feedid) {
-                feedlist[z].dp = dp;
-
-                graph_draw();
-                break;
-            }
-        }
-    });
-
-    $("body").on("change",".plottype",function(){
-        var feedid = $(this).attr("feedid");
-        var plottype = $(this).val();
-
-        for (var z in feedlist) {
-            if (feedlist[z].id == feedid) {
-                feedlist[z].plottype = plottype;
-
-                graph_draw();
-                break;
-            }
-        }
-    });
-    // left axis
-    $("body").on("change","#yaxis-min",function(){
-        yaxismin = $(this).val();
-        graph_draw();
-    });
-
-    $("body").on("change","#yaxis-max",function(){
-        yaxismax = $(this).val();
-        graph_draw();
-    });
-    // right axis
-    $("body").on("change","#yaxis-min2",function(){
-        yaxismin2 = $(this).val();
-        graph_draw();
-    });
-    $("body").on("change","#yaxis-max2",function(){
-        yaxismax2 = $(this).val();
-        graph_draw();
-    });
-    $("body").on("click",".reset-yaxis",function(){
-        $(this).parent().find('input').val('auto');
-    })
-
-    $("#csvtimeformat").change(function(){
-        csvtimeformat=$(this).val();
-        printcsv();
-    });
-
-    $("#csvnullvalues").change(function(){
-        csvnullvalues=$(this).val();
-        printcsv();
-    });
-
-    $("#csvheaders").change(function(){
-        csvheaders=$(this).val();
-        printcsv();
-    });
-    
-    $("#download-csv").click(function(){
-        download_data("graph.csv", $("#csv").val())    
-    });
-
-    $('body').on("click",".legendColorBox",function(d){
-          var country = $(this).html().toLowerCase();
-        //   console.log(country);
-    });
-
-    $(".feed-options-show-stats").click(function(event){
-        $("#feed-options-table").hide();
-        $("#feed-stats-table").show();
-        $(".feed-options-show-options").removeClass('hide');
-        $(".feed-options-show-stats").addClass('hide');
-        event.preventDefault();
-    });
-
-
-    $(".feed-options-show-options").click(function(event){
-        $("#feed-options-table").show();
-        $("#feed-stats-table").hide();
-        $(".feed-options-show-options").addClass('hide');
-        $(".feed-options-show-stats").removeClass('hide');
-        event.preventDefault();
-    });
-
-    // Reload feeds if remove-null is changed or remove-null-max-duration is changed
-    $(".remove-null").change(function(){
-        graph_reload();
-    });
-    
-    $(".remove-null-max-duration").change(function(){
-        graph_reload();
-    });
-
-    /**
-     * show sidebar if mobile view hiding sidebar
-     */
-    $(document).on('click', '.alert a.open-sidebar', function(event) {
-        if (typeof show_sidebar !== 'undefined') {
-            show_sidebar();
-            // @todo: ensure the 3rd level graph menu is open
-        }
-        return false;
-    });
-}
-
 function pushfeedlist(feedid, yaxis) {
-    var f = getfeed(feedid);
-    var dp=0;
+    let f = getfeed(feedid);
+    let dp = 0;
 
-    if (f==false) f = getfeedpublic(feedid);
-    if (f!=false) {
-        if (f.value % 1 !== 0 ) dp=1;
-        feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:yaxis, fill:0, scale: 1.0, offset: 0.0, delta:0, average:0, dp:dp, plottype:'lines'});
+    if (f === false) f = getfeedpublic(feedid);
+    if (f !== false) {
+        if (f.value % 1 !== 0) dp = 1;
+        feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:yaxis, fill:0, scale:1.0, offset:0.0, delta:0, average:0, dp:dp, plottype:'lines'});
     }
 }
 
 function graph_reload()
 {
-    var ds = new Date(view.start);
-    var de = new Date(view.end);
+    const ds = new Date(view.start);
+    const de = new Date(view.end);
     
     // Round start and end time
     if (view.mode=="daily" || view.mode=="weekly") {
         view.start = (new Date(ds.getFullYear(), ds.getMonth(), ds.getDate(), 0,0,0,0)).getTime();
         view.end = (new Date(de.getFullYear(), de.getMonth(), de.getDate(), 0,0,0,0)).getTime();
     } else if (view.mode=="monthly") {
-        var month_offset = 0;
+        let month_offset = 0;
         if (ds.getMonth()==de.getMonth()) month_offset = 1; 
         view.start = (new Date(ds.getFullYear(), ds.getMonth(), 1, 0,0,0,0)).getTime();
         view.end = (new Date(de.getFullYear(), de.getMonth()+month_offset, 1, 0,0,0,0)).getTime();
     } else if (view.mode=="annual") {
-        var year_offset = 0;
+        let year_offset = 0;
         if (ds.getFullYear()==de.getFullYear()) year_offset = 1; 
         view.start = (new Date(ds.getFullYear(), 0, 1, 0,0,0,0)).getTime();
         view.end = (new Date(de.getFullYear()+1, 0, 1, 0,0,0,0)).getTime();
@@ -651,18 +222,18 @@ function graph_reload()
     $("#request-limitinterval").attr("checked",view.limitinterval);
 
     // Convert feedlist into csv properties
-    var ids = [];
-    var averages = [];
-    var deltas = [];
-    for (var z in feedlist) {
+    const ids = [];
+    const averages = [];
+    const deltas = [];
+    for (const z in feedlist) {
         ids.push(feedlist[z].id);
         if (feedlist[z].average==false) feedlist[z].average = 0;
-        averages.push(feedlist[z].average)
+        averages.push(feedlist[z].average);
         if (feedlist[z].delta==false) feedlist[z].delta = 0;
-        deltas.push(feedlist[z].delta)
+        deltas.push(feedlist[z].delta);
     }
     
-    var data = {
+    const data = {
         ids: ids.join(','),
         start: view.start,
         end: view.end,
@@ -693,7 +264,7 @@ function graph_reload()
         $('#cloned_toggle').remove();
 
         // get feedlist data
-        $.getJSON(path+"feed/data.json", data, addFeedlistData)
+        $.getJSON(path + "feed/data.json", data, addFeedlistData)
         .fail(handleFeedlistDataError)
         .done(checkFeedlistData);
     }
@@ -701,11 +272,11 @@ function graph_reload()
 
 function addFeedlistData(response){
     // loop through feedlist and add response data to data property
-    var valid = false;
-    for (i in feedlist) {
-        let feed = feedlist[i];
-        for (j in response) {
-            let item = response[j];
+    let valid = false;
+    for (const i in feedlist) {
+        const feed = feedlist[i];
+        for (const j in response) {
+            const item = response[j];
             if (parseInt(feed.id) === parseInt(item.feedid) && item.data!=undefined) {
                 feed.postprocessed = false;
                 feed.data = item.data;
@@ -763,23 +334,17 @@ function checkFeedlistData(response){
 
 function set_feedlist() {
 
+    const remove_null = embed ? false : $(".remove-null")[0].checked;
+    const remove_null_max_duration = embed ? 900 : $(".remove-null-max-duration").val();
 
-    var remove_null = false;
-    var remove_null_max_duration = 900;
-    if (!embed) {
-        remove_null = $(".remove-null")[0].checked;
-        remove_null_max_duration = $(".remove-null-max-duration").val();
-    }
-
-    for (var z in feedlist)
-    {
-        var scale = $(".scale[feedid="+feedlist[z].id+"]").val();
-        if (scale!=undefined) feedlist[z].scale = scale;
-        var offset = $(".offset[feedid="+feedlist[z].id+"]").val();
-        if (offset!=undefined) feedlist[z].offset = offset;
+    for (const z in feedlist) {
+        const scale = $(".scale[feedid="+feedlist[z].id+"]").val();
+        if (scale !== undefined) feedlist[z].scale = scale;
+        const offset = $(".offset[feedid="+feedlist[z].id+"]").val();
+        if (offset !== undefined) feedlist[z].offset = offset;
         
         // check to ensure feed scaling and data are only applied once
-        if (feedlist[z].postprocessed==false) {
+        if (feedlist[z].postprocessed === false) {
             feedlist[z].postprocessed = true;
             console.log("postprocessing feed "+feedlist[z].id+" "+feedlist[z].name);
 
@@ -789,116 +354,88 @@ function set_feedlist() {
             }
 
             // Apply a scale to feed values
-            if (feedlist[z].scale!=undefined && feedlist[z].scale!=1.0) {
-                for (var i=0; i<feedlist[z].data.length; i++) {
-                    if (feedlist[z].data[i][1]!=null) {
+            if (feedlist[z].scale !== undefined && feedlist[z].scale != 1.0) {
+                for (let i = 0; i < feedlist[z].data.length; i++) {
+                    if (feedlist[z].data[i][1] !== null) {
                         feedlist[z].data[i][1] = feedlist[z].data[i][1] * feedlist[z].scale;
                     }
                 }
             }
             
-            // Apply a offset to feed values
-            if (feedlist[z].offset!=undefined && feedlist[z].offset!=0.0) {
-                for (var i=0; i<feedlist[z].data.length; i++) {
-                    if (feedlist[z].data[i][1]!=null) {
-                        feedlist[z].data[i][1] = feedlist[z].data[i][1] + 1*feedlist[z].offset;
+            // Apply an offset to feed values
+            if (feedlist[z].offset !== undefined && feedlist[z].offset != 0.0) {
+                for (let i = 0; i < feedlist[z].data.length; i++) {
+                    if (feedlist[z].data[i][1] !== null) {
+                        feedlist[z].data[i][1] = feedlist[z].data[i][1] + 1 * feedlist[z].offset;
                     }
                 }
             }
-             
         }
     }
     // call graph_draw() once feedlist is altered
     graph_draw();
 }
 
-function group_legend_values(_flot, placeholder) {
-    var legend = document.getElementById('legend');
-    var current_legend = placeholder[0].nextSibling;
-    if (!current_legend) {
-        legend.innerHTML = '';
-        return;
-    }
-    var current_legend_labels = current_legend.querySelector('table tbody');
-    var rows = Object.values(current_legend_labels.childNodes);
-    var left = [];
-    var right = [];
-    var output = "";
-
-    for (n in rows){
-        var row = rows[n];
-        var isRight = row.querySelector('.label-right');
-        if (isRight){
-            right.push(row);
-        } else {
-            left.push(row);
-        }
-    }
-
-    output += '<div class="grid-container">';
-    output += '    <div class="col left">';
-    output += '      <ul class="unstyled">';
-    output += build_rows(left);
-    output += '      </ul>';
-    output += '    </div>';
-    output += '    <div class="col right">';
-    output += '      <ul class="unstyled">';
-    output += build_rows(right);
-    output += '      </ul>';
-    output += '    </div>';
-    output += '</div>';
-    // populate new legend with html
-    legend.innerHTML = output;
-    // hide old legend
-    current_legend.style.display = 'none';
-    // add onclick events to links within legend
-    var items = legend.querySelectorAll('[data-legend-series]');
-    for(i = 0; i < items.length; i++) {
-        var item = items[i];
-        var link = item.querySelector('a');
-        // handle click of legend link
-        if (!link) continue;
-        link.addEventListener('click', onClickLegendLink)
-    }
-}
-function onClickLegendLink(event) {
-    event.preventDefault();
-    var link = event.currentTarget;
-    // toggle opacity of the link
-    link.classList.toggle('faded');
-    // re-draw the chart with the plot lines hidden/shown
-    var index = link.dataset.index;
-    var current_data = plot_statistics.getData()
-    var feed = feedlist.find(function(item) { return item.id == this; }, current_data[index].id);
-    if (feed == undefined) return;
-    switch (feed.plottype) {
-        case 'lines': current_data[index].lines.show = !current_data[index].lines.show; break;
-        case 'bars': current_data[index].bars.show = !current_data[index].bars.show; break;
-        case 'points': current_data[index].points.show = !current_data[index].points.show; break;
-        case 'steps': current_data[index].steps.show = !current_data[index].steps.show; break;
-    }
-    plot_statistics.setData(current_data);
-    // re-draw
-    plot_statistics.draw();
+//----------------------------------------------------------------------------------------
+// buildFeedControlsHTML - builds the HTML for the feed options control table rows
+//----------------------------------------------------------------------------------------
+function buildFeedControlsHTML(feedlist) {
+    const defaultLinecolor = '000';
+    let out = '';
+    for (let z = 0; z < feedlist.length; z++) {
+        const feed = feedlist[z];
+        const plotTypes = ['lines', 'bars', 'points', 'steps'];
+        const plotTypeLabels = [_lang['Lines'], _lang['Bars'], _lang['Points'], _lang['Steps']];
+        const plottypeOptions = plotTypes.map((type, i) =>
+            `<option value='${type}'${feed.plottype === type ? ' selected' : ''}>${plotTypeLabels[i]}</option>`
+        ).join('');
+        out += `<tr>
+            <td>
+                ${z > 0 ? `<a class='move-feed' title='${_lang['Move up']}' feedid=${z} moveby=-1><i class='icon-arrow-up'></i></a>` : ''}
+                ${z < feedlist.length - 1 ? `<a class='move-feed' title='${_lang['Move down']}' feedid=${z} moveby=1><i class='icon-arrow-down'></i></a>` : ''}
+            </td>
+            <td>${getFeedName(feed)}</td>
+            <td><select class='plottype' feedid=${feed.id} style='width:80px'>${plottypeOptions}</select></td>
+            <td><input class='linecolor' feedid=${feed.id} style='width:50px' type='color' value='#${defaultLinecolor}'></td>
+            <td><input class='fill' type='checkbox' feedid=${feed.id}></td>
+            <td><input class='stack' type='checkbox' feedid=${feed.id}></td>
+            <td style='text-align:center'><input class='scale' feedid=${feed.id} type='text' style='width:50px' value='1.0'></td>
+            <td style='text-align:center'><input class='offset' feedid=${feed.id} type='text' style='width:50px' value='0.0'></td>
+            <td style='text-align:center'><input class='delta' feedid=${feed.id} type='checkbox'></td>
+            <td style='text-align:center'><input class='average' feedid=${feed.id} type='checkbox'></td>
+            <td><select feedid=${feed.id} class='decimalpoints' style='width:50px'><option>0</option><option>1</option><option>2</option><option>3</option></select></td>
+            <td><button feedid=${feed.id} class='histogram'>${_lang['Histogram']} <i class='icon-signal'></i></button></td>
+        </tr>`;
+    }
+    return out;
 }
-function build_rows(rows) {
-    var output = "";
-    for (x in rows) {
-        var row = rows[x];
-        var label = row.querySelector('.legendLabel')
-        var span = label.querySelector('span');
-        var index = span.dataset.index;
-        var id = span.dataset.id;
-        var colour = '<div class="legendColorBox">' + row.querySelector('.legendColorBox').innerHTML + '</div>'
-        // add <li> to the html
-        output += '      <li data-legend-series><a href="' + path + 'graph/' + id + '" data-index="' + index + '" data-id="' + id + '">' + colour + label.innerText + '</a></li>';
-    }
-    return output;
+
+//----------------------------------------------------------------------------------------
+// buildFeedStatsHTML - builds the HTML for the feed statistics table rows
+//----------------------------------------------------------------------------------------
+function buildFeedStatsHTML(feedlist, time_in_window) {
+    let out = '';
+    for (const feed of feedlist) {
+        const quality = Math.round(100 * (1 - (feed.stats.npointsnull / feed.stats.npoints)));
+        const dp = feed.dp;
+        out += `<tr>
+            <td></td>
+            <td>${getFeedName(feed)}</td>
+            <td>${quality}% (${feed.stats.npoints - feed.stats.npointsnull}/${feed.stats.npoints})</td>
+            <td>${!isNaN(Number(feed.stats.minval)) ? feed.stats.minval.toFixed(dp) : ''}</td>
+            <td>${!isNaN(Number(feed.stats.maxval)) ? feed.stats.maxval.toFixed(dp) : ''}</td>
+            <td>${feed.stats.diff.toFixed(dp)}</td>
+            <td>${feed.stats.mean.toFixed(dp)}</td>
+            <td>${feed.stats.stdev.toFixed(dp)}</td>
+            <td>${Math.round((feed.stats.mean * time_in_window) / 3600)}</td>
+        </tr>`;
+    }
+    return out;
 }
 
 function graph_draw()
 {
-    var options = {
+    const options = {
         lines: { fill: false },
         xaxis: {
             mode: "time",
@@ -947,38 +484,37 @@ function graph_draw()
     if (yaxismax!='auto' && yaxismax!='') { options.yaxes[0].max = yaxismax; }
     if (yaxismax2!='auto' && yaxismax2!='') { options.yaxes[1].max = yaxismax2; }
     
-    var time_in_window = (view.end - view.start) / 1000;
-    var hours = Math.floor(time_in_window / 3600);
-    var mins = Math.round(((time_in_window / 3600) - hours)*60);
-    if (mins!=0) {
-        if (mins<10) mins = "0"+mins;
+    const time_in_window = (view.end - view.start) / 1000;
+    const hours = Math.floor(time_in_window / 3600);
+    let mins = Math.round(((time_in_window / 3600) - hours) * 60);
+    if (mins !== 0) {
+        if (mins < 10) mins = "0" + mins;
     } else {
         mins = "";
     }
 
-    if (!embed) $("#window-info").html("<b>"+_lang['Window']+":</b> "+printdate(view.start)+" <b>→</b> "+printdate(view.end)+"<br><b>"+_lang['Length']+":</b> "+hours+"h"+mins+" ("+time_in_window+" seconds)");
+    if (!embed) $("#window-info").html(`<b>${_lang['Window']}:</b> ${printdate(view.start)} <b>→</b> ${printdate(view.end)}<br><b>${_lang['Length']}:</b> ${hours}h${mins} (${time_in_window} seconds)`);
 
     plotdata = [];
     let num_left = 0;
     let num_right = 0;
-    for (var z in feedlist) {
+    for (const z in feedlist) {
 
-        var data = feedlist[z].data;
+        let data = feedlist[z].data;
         // Hide missing data (only affects the plot view)
         if (!showmissing) {
-            var tmp = [];
-            for (var n in data) {
-                if (data[n][1]!=null) tmp.push(data[n]);
+            const tmp = [];
+            for (const n in data) {
+                if (data[n][1] !== null) tmp.push(data[n]);
             }
             data = tmp;
         }
         // Add series to plot
-        var label = "";
-        if (showtag) label += feedlist[z].tag+": ";
+        let label = "";
+        if (showtag) label += feedlist[z].tag + ": ";
         label += feedlist[z].name;
-        // label += ' '+getFeedUnit(feedlist[z].id);
-        var stacked = (typeof(feedlist[z].stack) !== "undefined" && feedlist[z].stack);
-        var plot = {label:label, data:data, yaxis:feedlist[z].yaxis, color: feedlist[z].color, stack: stacked};
+        const stacked = (typeof feedlist[z].stack !== "undefined" && feedlist[z].stack);
+        const plot = {label:label, data:data, yaxis:feedlist[z].yaxis, color:feedlist[z].color, stack:stacked};
 
         if (feedlist[z].plottype=="lines") { plot.lines = { show: true, fill: (feedlist[z].fill ? (stacked ? 1.0 : 0.5) : 0.0), fill: feedlist[z].fill } };
         if (feedlist[z].plottype=="bars") { plot.bars = { align: "center", fill: (feedlist[z].fill ? (stacked ? 1.0 : 0.5) : 0.0), show: true, barWidth: view.interval * 1000 * 0.75 } };
@@ -1012,87 +548,27 @@ function graph_draw()
 
     if (!embed) {
 
-        for (var z in feedlist) {
+        for (const z in feedlist) {
             feedlist[z].stats = stats(feedlist[z].data);
         }
 
-        var default_linecolor = "000";
-        var out = "";
-        for (var z in feedlist) {
-            var dp = feedlist[z].dp;
-
-            out += "<tr>";
-            out += "<td>";
-            if (z > 0) {
-                out += "<a class='move-feed' title='"+_lang['Move up']+"' feedid="+z+" moveby=-1 ><i class='icon-arrow-up'></i></a>";
-            }
-            if (z < feedlist.length-1) {
-                out += "<a class='move-feed' title='"+_lang['Move down']+"' feedid="+z+" moveby=1 ><i class='icon-arrow-down'></i></a>";
-            }
-            out += "</td>";
-
-            out += "<td>"+getFeedName(feedlist[z])+"</td>";
-            out += "<td><select class='plottype' feedid="+feedlist[z].id+" style='width:80px'>";
-
-            var selected = "";
-            if (feedlist[z].plottype == "lines") selected = "selected"; else selected = "";
-            out += "<option value='lines' "+selected+">"+_lang['Lines']+"</option>";
-            if (feedlist[z].plottype == "bars") selected = "selected"; else selected = "";
-            out += "<option value='bars' "+selected+">"+_lang['Bars']+"</option>";
-            if (feedlist[z].plottype == "points") selected = "selected"; else selected = "";
-            out += "<option value='points' "+selected+">"+_lang['Points']+"</option>";
-            if (feedlist[z].plottype == "steps") selected = "selected"; else selected = "";
-            out += "<option value='steps' "+selected+">"+_lang['Steps']+"</option>";
-            out += "</select></td>";
-            out += "<td><input class='linecolor' feedid="+feedlist[z].id+" style='width:50px' type='color' value='#"+default_linecolor+"'></td>";
-            out += "<td><input class='fill' type='checkbox' feedid="+feedlist[z].id+"></td>";
-            out += "<td><input class='stack' type='checkbox' feedid="+feedlist[z].id+"></td>";
-
-            for (var i=0; i<11; i++) out += "<option>"+i+"</option>";
-            out += "</select></td>";
-            out += "<td style='text-align:center'><input class='scale' feedid="+feedlist[z].id+" type='text' style='width:50px' value='1.0' /></td>";
-            out += "<td style='text-align:center'><input class='offset' feedid="+feedlist[z].id+" type='text' style='width:50px' value='0.0' /></td>";
-            out += "<td style='text-align:center'><input class='delta' feedid="+feedlist[z].id+" type='checkbox'/></td>";
-            out += "<td style='text-align:center'><input class='average' feedid="+feedlist[z].id+" type='checkbox'/></td>";
-            out += "<td><select feedid="+feedlist[z].id+" class='decimalpoints' style='width:50px'><option>0</option><option>1</option><option>2</option><option>3</option></select></td>";
-            out += "<td><button feedid="+feedlist[z].id+" class='histogram'>"+_lang['Histogram']+" <i class='icon-signal'></i></button></td>";
-            // out += "<td><a href='"+apiurl+"'><button class='btn btn-link'>API REF</button></a></td>";
-            out += "</tr>";
-        }
-        $("#feed-controls").html(out);
-
-        var out = "";
-        for (var z in feedlist) {
-            out += "<tr>";
-            out += "<td></td>";
-            out += "<td>"+getFeedName(feedlist[z])+"</td>";
-            var quality = Math.round(100 * (1-(feedlist[z].stats.npointsnull/feedlist[z].stats.npoints)));
-            out += "<td>"+quality+"% ("+(feedlist[z].stats.npoints-feedlist[z].stats.npointsnull)+"/"+feedlist[z].stats.npoints+")</td>";
-            var dp = feedlist[z].dp;
-            if(!isNaN(Number(feedlist[z].stats.minval))) out += "<td>"+feedlist[z].stats.minval.toFixed(dp)+"</td>";
-            if(!isNaN(Number(feedlist[z].stats.maxval))) out += "<td>"+feedlist[z].stats.maxval.toFixed(dp)+"</td>";
-            out += "<td>"+feedlist[z].stats.diff.toFixed(dp)+"</td>";
-            out += "<td>"+feedlist[z].stats.mean.toFixed(dp)+"</td>";
-            out += "<td>"+feedlist[z].stats.stdev.toFixed(dp)+"</td>";
-            out += "<td>"+Math.round((feedlist[z].stats.mean*time_in_window)/3600)+"</td>";
-            out += "</tr>";
-        }
-        $("#feed-stats").html(out);
+        $("#feed-controls").html(buildFeedControlsHTML(feedlist));
+        $("#feed-stats").html(buildFeedStatsHTML(feedlist, time_in_window));
 
         if (feedlist.length) $(".feed-options").show(); else $(".feed-options").hide();
 
-        for (var z in feedlist) {
+        for (const z in feedlist) {
             $(".decimalpoints[feedid="+feedlist[z].id+"]").val(feedlist[z].dp);
-            if ($(".average[feedid="+feedlist[z].id+"]")[0]!=undefined)
+            if ($(".average[feedid="+feedlist[z].id+"]")[0] !== undefined)
                 $(".average[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].average;
-            if ($(".delta[feedid="+feedlist[z].id+"]")[0]!=undefined)
+            if ($(".delta[feedid="+feedlist[z].id+"]")[0] !== undefined)
                 $(".delta[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].delta;
             $(".scale[feedid="+feedlist[z].id+"]").val(feedlist[z].scale);
-            $(".offset[feedid="+feedlist[z].id+"]").val(feedlist[z].offset);   
+            $(".offset[feedid="+feedlist[z].id+"]").val(feedlist[z].offset);
             $(".linecolor[feedid="+feedlist[z].id+"]").val(feedlist[z].color);
-            if ($(".fill[feedid="+feedlist[z].id+"]")[0]!=undefined)
+            if ($(".fill[feedid="+feedlist[z].id+"]")[0] !== undefined)
                 $(".fill[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].fill;
-            if ($(".stack[feedid="+feedlist[z].id+"]")[0]!=undefined)
+            if ($(".stack[feedid="+feedlist[z].id+"]")[0] !== undefined)
                 $(".stack[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].stack;
         }
 
@@ -1149,775 +625,9 @@ function getfeedindex(id)
     return false;
 }
 
-function getFeedUnit(id){
-    let unit = ''
-    for(let key in feeds) {
-        if (feeds[key].id == id){
-            unit = feeds[key].unit || ''
-        }
+function getFeedUnit(id) {
+    for (const key in feeds) {
+        if (feeds[key].id == id) return feeds[key].unit || '';
     }
-    return unit
+    return '';
 }
-
-//----------------------------------------------------------------------------------------
-// Print CSV
-//----------------------------------------------------------------------------------------
-function printcsv()
-{
-    if (typeof(feedlist[0]) === "undefined" ) {return};
-
-    var timeformat = $("#csvtimeformat").val();
-    var nullvalues = $("#csvnullvalues").val();
-    var headers = $("#csvheaders").val();
-
-    var csvout = "";
-
-    var value = [];
-    var line = [];
-    var lastvalue = [];
-    var start_time = feedlist[0].data[0][0];
-    var end_time = feedlist[feedlist.length-1].data[feedlist[feedlist.length-1].data.length-1][0];
-    var showName=false;
-    var showTag=false;
-
-    switch (headers) {
-        case "showNameTag":
-            showName=true;
-            showTag=true;
-            break;
-        case "showName":
-            showName=true;
-            break;
-    }
-
-    if (showName || showTag ) {
-        switch (timeformat) {
-            case "unix":
-                line = ["Unix timestamp"];
-                break;
-            case "seconds":
-                line = ["Seconds since start"];
-                break;
-            case "datestr":
-                line = ["Date-time string"];
-                break;
-        }
-
-        for (var f in feedlist) {
-            line.push((showTag ? feedlist[f].tag : "")+(showTag && showName ? ":" : "")+(showName ? feedlist[f].name : ""));
-        }
-        csvout = "\"" + line.join("\", \"")+"\"\n";
-    }
-
-    for (var z in feedlist[0].data) {
-        line = [];
-        // Different time format options for csv output
-        if (timeformat=="unix") {
-            line.push(Math.round(feedlist[0].data[z][0] / 1000));
-        } else if (timeformat=="seconds") {
-            line.push(Math.round((feedlist[0].data[z][0]-start_time)/1000));
-        } else if (timeformat=="datestr") {
-            // Create date time string
-            var t = new Date(feedlist[0].data[z][0]);
-            var year = t.getFullYear();
-            var month = t.getMonth()+1;
-            if (month<10) month = "0"+month;
-            var day = t.getDate();
-            if (day<10) day = "0"+day;
-            var hours = t.getHours();
-            if (hours<10) hours = "0"+hours;
-            var minutes = t.getMinutes();
-            if (minutes<10) minutes = "0"+minutes;
-            var seconds = t.getSeconds();
-            if (seconds<10) seconds = "0"+seconds;
-
-            var formatted = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
-            line.push(formatted);
-        }
-
-        var nullfound = false;
-        for (var f in feedlist) {
-            if (value[f]==undefined) value[f] = null;
-            lastvalue[f] = value[f];
-            if (feedlist[f].data[z]!=undefined) {
-            if (feedlist[f].data[z][1]==null) nullfound = true;
-            if (feedlist[f].data[z][1]!=null || nullvalues=="show") value[f] = feedlist[f].data[z][1];
-            if (value[f]!=null) value[f] = (value[f]*1.0).toFixed(feedlist[f].dp);
-            line.push(value[f]+"");
-            }
-        }
-
-        if (nullvalues=="remove" && nullfound) {
-            // pass
-        } else {
-            csvout += line.join(", ")+"\n";
-        }
-    }
-    $("#csv").val(csvout);
-}
-
-function csvShowHide(set)
-{
-    var action="hide";
-
-    if (set==="swap") {
-        if ($("#showcsv").html()==_lang["Show CSV Output"]) {
-            action="show";
-        } else {
-            action="hide";
-        }
-    } else {
-        action = (set==="1" ? "show" : "hide");
-    }
-
-    if (action==="show") {
-        printcsv()
-        showcsv = 1;
-        $("#csv").show();
-        $(".csvoptions").show();
-        $("#showcsv").html(_lang["Hide CSV Output"]);
-    } else {
-        showcsv = 0;
-        $("#csv").hide();
-        $(".csvoptions").hide();
-        $("#showcsv").html(_lang["Show CSV Output"]);
-    }
-}
-// ----------------------------------------------------------------------
-// Histogram feature
-// ----------------------------------------------------------------------
-
-// Launch histogram mode for a given feed
-$("body").on("click",".histogram",function(){
-    $("#navigation").hide();
-    $("#histogram-controls").show();
-    var feedid = $(this).attr("feedid");
-    active_histogram_feed = feedid;
-    var type = $("#histogram-type").val();
-    var resolution = 1;
-
-    var index = 0;
-    for (var z in feedlist) {
-      if (feedlist[z].id==feedid) {
-        index = z;
-        break;
-      }
-    }
-
-    if (feedlist[index].stats.diff<5000) resolution = 10;
-    if (feedlist[index].stats.diff<100) resolution = 0.1;
-    $("#histogram-resolution").val(resolution);
-
-    histogram(feedid,type,resolution);
-});
-
-// Chage the histogram resolution
-$("#histogram-resolution").change(function(){
-    var type = $("#histogram-type").val();
-    var resolution = $("#histogram-resolution").val();
-    histogram(active_histogram_feed,type,resolution);
-});
-
-// time at value or power to kwh
-$("#histogram-type").change(function(){
-    var type = $("#histogram-type").val();
-    var resolution = $("#histogram-resolution").val();
-    histogram(active_histogram_feed,type,resolution);
-});
-
-// return to power graph
-$("#histogram-back").click(function(){
-    $("#navigation").show();
-    $("#histogram-controls").hide();
-    graph_draw();
-});
-
-// Draw the histogram
-function histogram(feedid,type,resolution)
-{
-    var histogram = {};
-    var total_histogram = 0;
-    var val = 0;
-
-    // Get the feedlist index of the feedid
-    var index = -1;
-    for (var z in feedlist)
-      if (feedlist[z].id==feedid) index = z;
-    if (index==-1) return false;
-
-    // Load data from feedlist object
-    var data = feedlist[index].data;
-
-    for (var i=1; i<data.length; i++) {
-      if (data[i][1]!=null) {
-        val = data[i][1];
-      }
-      var key = Math.round(val/resolution)*resolution;
-      if (histogram[key]==undefined) histogram[key] = 0;
-
-      var t = (data[i][0] - data[i-1][0])*0.001;
-
-      var inc = 0;
-      if (type=="kwhatpower") inc = (val * t)/(3600.0*1000.0);
-      if (type=="timeatvalue") inc = t;
-      histogram[key] += inc;
-      total_histogram += inc;
-    }
-
-    // Sort and convert to 2d array
-    var tmp = [];
-    for (var z in histogram) tmp.push([z*1,histogram[z]]);
-    tmp.sort(function(a,b){if (a[0]>b[0]) return 1; else return -1;});
-    histogram = tmp;
-
-    var options = {
-        series: { bars: { show: true, barWidth:resolution*0.8 } },
-        grid: {hoverable: true}
-    };
-
-    var label = "";
-    if (showtag) label += feedlist[index].tag+": ";
-    label += feedlist[index].name;
-
-    $.plot("#placeholder",[{label:label, data:histogram}], options);
-}
-
-function load_saved_graphs_menu()
-{    
-    saveGraphsApp = new Vue({
-        el: '#my_graphs',
-        data: {
-            selected: -1,
-            collapsed: false,
-            messages: {
-                none: 'None selected',
-                deleted: 'Deleted',
-                saved: 'Saved',
-                select: _lang['Select graph']
-            },
-            original: '',
-            graphs: {},
-            apikeystr: apikeystr,
-            timeout: false,
-            delay: 1500,
-            status: '',
-            graphName: ''
-        },
-        methods: {
-            /**
-             * update or create saved graph
-             */
-            saveGraph: function(){
-                var vm = this
-                var data = get_graph_data()
-                // @todo : check for duplicate name
-                // @todo : check for new name - if new create, else update
-                data.name = this.graphName
-
-                if (this.graphsChanged && !this.nameChanged) {
-                    // UPDATE
-                    graph_update(data)
-                    .done(function(response) {
-                        if(typeof response.success == 'undefined' || response.success) {
-                            vm.status = response.message || vm.messages.saved
-                        } else {
-                            vm.status = "error 322"
-                        }
-                        window.setTimeout(function() {
-                            vm.status = ""
-                        }, vm.delay)
-                    })
-                } else {
-                    // CREATE
-                    graph_create(data)
-                    .done(function(response) {
-                        var newId = response.message.replace('graph saved id:','')
-                        vm.selected = -1
-                        vm.status = response.message || vm.messages.saved
-                        window.setTimeout(function() {
-                            vm.status = ''
-                        }, vm.delay)
-
-                        // get new data once saved.
-                        vm.getGraphs()
-                        .done(function(){
-                            // pre-select the new item
-                            vm.selected = vm.findGraphIndexById(newId)
-                            // add new graph to browser history
-                            vm.updateHashState(newId)
-                        })
-                    })
-                }
-
-            },
-            deleteGraph: function(){
-                var vm = this
-                if(window.confirm('Delete ' + this.graphs[this.selected].name + ' (#' + this.graphs[this.selected].id + ') ?')) {
-                    graph_delete(this.graphs[this.selected].id)
-                    .done(function(response) {
-                        vm.selected = -1
-                        vm.getGraphs()
-                        vm.status = response.message || vm.messages.deleted
-                        window.setTimeout(function() {
-                            vm.status = ''
-                            vm.emptyHashState()
-                        }, vm.delay)
-                    })
-                }
-            },
-            /**
-             * load data from graph/getall
-             */
-            getGraphs: function () {
-                var vm = this
-                return $.getJSON(path+"/graph/getall"+this.apikeystr)
-                .done(function(response){
-                    if (!response.success && response.success !== false) {
-                        // @todo : work with response.groups
-                        // save sorted list to vue data
-                        vm.graphs = response.user.sort( compare_name )
-                        vm.original = JSON.stringify(vm.graphs)
-                        // if view called with graph/#Saved/[id]
-                        // find the relevant graph in the list
-                        var hashId = vm.getHashState()
-                        if (hashId !== '') {
-                            var index = vm.findGraphIndexById(hashId)
-                            if(index > -1) {
-                                vm.selected = vm.graphs[index].name
-                            }
-                        }
-                    } else {
-                        vm.message = response.messsage
-                    }
-                })
-            },
-            /**
-             * get graphs[] index that stores graph with matching id
-             * @param {String} id taken from api response
-             * @return {Number} array index of match, else -1
-             */
-            findGraphIndexById: function(id) {
-                return this.findGraph('id', id)
-            },
-            /**
-             * get graphs[] index that stores graph with matching id
-             * @param {String} name taken from form selections
-             * @return {Number} array index of match, else -1
-             */
-            findGraphIndexByName: function(name) {
-                return this.findGraph('name', name)
-            },
-            /**
-             * search loaded graphs by property and value
-             * @return first index of matched value
-             */
-            findGraph: function(property, value) {
-                return this.find(this.graphs, property, value)
-            },
-            /**
-             * Return object key if property value matches 
-             * @param {Object} list Enumerable Object to search
-             * @param {String} property Object property to compare
-             * @param {*} value Object property value to compare
-             * @return {Number} first matching index, else -1
-             */
-            find: function (list, property, value) {
-                if (typeof list === 'undefined' || typeof property === 'undefined' || typeof value === 'undefined') {
-                    return -1
-                }
-                for (n in list) {
-                    var item = list[n]
-                    if (item.hasOwnProperty(property)) {
-                        if (item[property] === value) {
-                            return n
-                        }
-                    }
-                }
-                return -1
-            },
-            getHashState: function() {
-                // get the id of the saved graph from the url
-                return window.location.hash.replace('#/Saved/','')
-            },
-            updateHashState: function(id){
-                // add the '#/Saved/[id]' symbol to the url
-                var hashId = this.getHashState()
-                if (hashId === "" || id !== hashId) {
-                    window.location.hash = '/Saved/' + id
-                }
-            },
-            emptyHashState: function(){
-                // remove the '#' symbol from url
-                history.replaceState(null, null, ' ')
-            }
-        },
-        computed: {
-            graphsChanged: function() {
-                return JSON.stringify(this.graphs).length !== this.original.length
-            },
-            saveButtonDisabled: function() {
-                var empty = this.graphName === ''
-                var changed = this.graphsChanged
-                var selected = this.selected > -1
-
-                if ( selected && !changed ) {
-                    return true
-                }
-                if ( empty && !selected) {
-                    return true
-                }
-                return false
-            },
-            /**
-             * return true if new or saved graph name changed
-             */
-            nameChanged: function() {
-                var empty = this.graphName === ''
-                var selected = this.selected > -1
-                var downloaded = this.original !== ''
-
-                if (!downloaded || empty) {
-                    return false
-                } else {
-                    var originalSelected = {}
-                    try {
-                        originalSelected = JSON.parse(this.original)[this.selected]
-                    } catch (error) {}
-                    if(originalSelected && this.graphName === originalSelected.name) {
-                        return false
-                    }
-                }
-                return true
-            }
-        },
-        watch: {
-            /**
-             * `selected` is array index of currently selected graph
-             */
-            selected: function (newVal) {
-                // change the name of the selected graph to display
-                // change global id of selected item
-                var graph = this.graphs[newVal]
-                if (graph) {
-                    this.graphName = graph.name
-                    if (graph.id !== this.getHashState()) {
-                        this.updateHashState(graph.id)
-                    }
-                    // use function outside of vuejs to update the graph and menu
-                    load_saved_graph(this.graphs[newVal])
-                } else {
-                    this.graphName =  ''
-                    this.emptyHashState()
-                }
-            },
-            graphName: function (newVal) {
-                if (newVal !== "" && this.selected > -1) {
-                    this.graphs[this.selected].name = newVal
-                } else {
-                    graphsChanged = true
-                }
-            }
-        },
-        created: function () {
-            var vm = this
-            this.getGraphs()
-            .done(function(){
-                var newId = vm.getHashState()
-                // pre-select the item
-                vm.selected = vm.findGraphIndexById(newId)
-            })
-            window.addEventListener('hashchange', function(event) {
-                var hashId = vm.getHashState()
-                if (hashId !== '') {
-                    vm.selected = vm.findGraphIndexById(hashId)
-                }
-            });
-        }
-    })
-}
-
-$(function(){
-    // when the form changes send the new data into the "saved list" vue app (if available)
-    $('#info').on('change', function(event) {
-        if (saveGraphsApp) {
-            if(saveGraphsApp.selected > -1) {
-                Vue.set(saveGraphsApp.graphs, saveGraphsApp.selected, get_graph_data())
-            }
-        }
-    })
-})
-
-// place data into view (not vue.js)
-function load_saved_graph(graph) {
-    // @todo: unload_saved_graph()
-    
-    if(typeof graph === 'undefined') return;
-    if (graph.mode==undefined) graph.mode = 'interval';
-    
-    // view settings
-    view.start = graph.start;
-    view.end = graph.end;
-    view.interval = graph.interval;
-    view.mode = graph.mode;
-    view.limitinterval = graph.limitinterval;
-    view.fixinterval = graph.fixinterval;
-    floatingtime = graph.floatingtime,
-    yaxismin = graph.yaxismin;
-    yaxismin2 = graph.yaxismin2 || 'auto';
-    yaxismax = graph.yaxismax;
-    yaxismax2 = graph.yaxismax2 || 'auto';
-
-    // CSV display settings
-    csvtimeformat = (typeof(graph.csvtimeformat)==="undefined" ? "datestr" : graph.csvtimeformat);
-    csvnullvalues = (typeof(graph.csvnullvalues)==="undefined" ? "show" : graph.csvnullvalues);
-    csvheaders = (typeof(graph.csvheaders)==="undefined" ? "showNameTag" : graph.csvheaders);
-    var tmpCsv = (typeof(graph.showcsv)==="undefined" ? "0" : graph.showcsv.toString());
-
-    // show settings
-    showmissing = graph.showmissing;
-    showtag = graph.showtag;
-    showlegend = graph.showlegend;
-
-    // graph details
-    current_graph_id = graph.id
-    current_graph_name = graph.name
-
-    // feedlist
-    feedlist = graph.feedlist;
-
-    if (floatingtime) {
-        var timewindow = view.end - view.start;
-        var now = Math.round(+new Date * 0.001)*1000;
-        view.end = now;
-        view.start = view.end - timewindow;
-    }
-
-    $("#yaxis-min").val(yaxismin);
-    $("#yaxis-max").val(yaxismax);
-    $("#yaxis-min2").val(yaxismin2);
-    $("#yaxis-max2").val(yaxismax2);
-    $("#request-fixinterval")[0].checked = view.fixinterval;
-    $("#request-limitinterval")[0].checked = view.limitinterval;
-    $("#showmissing")[0].checked = showmissing;
-    $("#showtag")[0].checked = showtag;
-    $("#showlegend")[0].checked = showlegend;
-    
-    $("#request-type").val(view.mode);
-    if (view.mode!="interval") {
-        $(".fixed-interval-options").hide();
-    } else {
-        $(".fixed-interval-options").show();
-    }
-    
-    // draw graph
-    graph_reload();
-    load_feed_selector();
-    // Placed after graph load as values only available after the graph is redrawn
-    $("#csvtimeformat").val(csvtimeformat);
-    $("#csvnullvalues").val(csvnullvalues);
-    $("#csvheaders").val(csvheaders);
-    csvShowHide(tmpCsv);
-
-}
-
-function get_graph_data () {
-
-    var now = Math.round(+new Date * 0.001)*1000;
-    if (Math.abs(now - view.end)<120000) {
-        floatingtime = 1;
-    }
-
-    var graph_to_save = {
-        name: current_graph_name,
-        start: view.start,
-        end: view.end,
-        interval: view.interval,
-        mode: view.mode,
-        limitinterval: view.limitinterval,
-        fixinterval: view.fixinterval,
-        floatingtime: floatingtime,
-        yaxismin: yaxismin,
-        yaxismax: yaxismax,
-        yaxismin2: yaxismin2,
-        yaxismax2: yaxismax2,
-        showmissing: showmissing,
-        showtag: showtag,
-        showlegend: showlegend,
-        showcsv: showcsv,
-        csvtimeformat: csvtimeformat,
-        csvnullvalues: csvnullvalues,
-        csvheaders: csvheaders,
-        feedlist: JSON.parse(JSON.stringify(feedlist)),
-        id: current_graph_id,
-    };
-    return graph_to_save
-}
-
-function graph_update(data) {
-    // Clean feedlist of data and stats that dont need to be saved
-    for (var i in data.feedlist) {
-        delete data.feedlist[i].data
-        delete data.feedlist[i].stats;
-    }
-
-    // Save 
-    return $.ajax({
-        method: "POST",
-        url: path+"/graph/update",
-        data: "id="+data.id+"&data="+JSON.stringify(data),
-        dataType: "json",
-        success: function(result) {
-            if (!result.success) alert("ERROR: "+result.message);
-        },
-        error: function(xhr,type,message) {
-            alert("ERROR: "+type+":"+message);
-        }
-    });
-}
-function graph_create(data) {
-    // Clean feedlist of data and stats that dont need to be saved
-    for (var i in data.feedlist) {
-        delete data.feedlist[i].data
-        delete data.feedlist[i].stats;
-    }
-    data.name = encodeURIComponent(data.name)
-    // Save
-    var ajax = $.ajax({
-        method: "POST",
-        url: path+"/graph/create",
-        data: "data="+JSON.stringify(data),
-        async: true,
-        dataType: "json",
-        success: function(result) {
-            if (!result.success) alert("ERROR: "+result.message);
-        }
-    });
-    return ajax
-}
-
-function graph_delete(id) {
-    // Save
-    var ajax = $.ajax({
-        method: "POST",
-        url: path+"/graph/delete",
-        data: "id="+id,
-        async: true,
-        dataType: "json",
-        success: function(result) {
-            if (!result.success) alert("ERROR: "+result.message);
-        }
-    });
-    return ajax
-}
-
-// ----------------------------------------------------------------------
-// Misc functions
-// ----------------------------------------------------------------------
-
-/**
- * return -1 for less than, 1 for more than, else 0
- * @param {Object} a 
- * @param {Object} b 
- * @param {String} prop property name to compare
- */
-function compare_name( a, b ) {
-    var prop = 'name'
-    if ( a[prop] < b[prop] ){
-        return -1
-    }
-    if ( a[prop] > b[prop] ){
-        return 1
-    }
-    return 0
-}
-
-function load_feed_selector() {
-    for (var z in feeds) {
-        var feedid = feeds[z].id;
-        $(".feed-select-left[data-feedid="+feedid+"]")[0].checked = false;
-        $(".feed-select-right[data-feedid="+feedid+"]")[0].checked = false;
-    }
-    
-    for (var z=0; z<feedlist.length; z++) {
-        var feedid = feedlist[z].id;
-        var tag = feedlist[z].tag;
-        if (tag=="") tag = "undefined";
-
-        if (feedlist[z].yaxis==1) {
-            if ($(".feed-select-left[data-feedid="+feedid+"]")[0])
-                $(".feed-select-left[data-feedid="+feedid+"]")[0].checked = true; $(".tagbody[data-tag='"+tag+"']").show();
-        }
-        if (feedlist[z].yaxis==2) {
-            if ($(".feed-select-left[data-feedid="+feedid+"]")[0])
-                $(".feed-select-right[data-feedid="+feedid+"]")[0].checked = true; $(".tagbody[data-tag='"+tag+"']").show();
-        }
-    }
-}
-/**
- * @todo replace this with moment.js translated date/time strings
- * see feed and input views for example of translated dates
- * eg. moment().fromUnix(timestamp).format('ll') // format unix timestamp as per user's locale
- * @see Lib/misc/moment.min.js
- **/
-function printdate(timestamp)
-{
-    var date = new Date();
-    var thisyear = date.getFullYear();
-
-    var date = new Date(timestamp);
-    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-    var year = date.getFullYear();
-    var month = months[date.getMonth()];
-    var day = date.getDate();
-
-    var minutes = date.getMinutes();
-    if (minutes<10) minutes = "0"+minutes;
-
-    var secs = date.getSeconds();
-    if (secs<10) secs = "0"+secs;
-
-    var datestr = "";
-    //	date.getHours()+":"+minutes+" "+day+" "+month;
-    datestr += day+"/"+month;
-    if (thisyear!=year) datestr += "/"+year;
-    datestr += " " + date.getHours()+":"+minutes+":"+secs;
-    return datestr;
-};
-
-// See: https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server
-function download_data(filename, data) {
-    var blob = new Blob([data], {type: 'text/csv'});
-    if(window.navigator.msSaveOrOpenBlob) {
-        window.navigator.msSaveBlob(blob, filename);
-    }
-    else{
-        var elem = window.document.createElement('a');
-        elem.href = window.URL.createObjectURL(blob);
-        elem.download = filename;        
-        document.body.appendChild(elem);
-        elem.click();        
-        document.body.removeChild(elem);
-    }
-}
-
-function arrayMove(array,old_index, new_index){
-    array.splice(new_index, 0, array.splice(old_index, 1)[0]);
-    return array;
-}
-
-// Remove null values from feed data
-function remove_null_values(data, interval, max_duration = 900) {
-    var last_valid_pos = 0;
-    for (var pos = 0; pos < data.length; pos++) {
-        if (data[pos][1] != null) {
-            let null_time = (pos - last_valid_pos) * interval;
-            if (null_time < max_duration) {
-                for (var x = last_valid_pos + 1; x < pos; x++) {
-                    data[x][1] = data[last_valid_pos][1];
-                }
-            }
-            last_valid_pos = pos;
-        }
-    }
-    return data;
-}
\ No newline at end of file
diff --git a/graph.legend.js b/graph.legend.js
new file mode 100644
index 0000000..fb9d8d5
--- /dev/null
+++ b/graph.legend.js
@@ -0,0 +1,89 @@
+//----------------------------------------------------------------------------------------
+// graph.legend.js - Custom legend rendering and interaction
+//----------------------------------------------------------------------------------------
+
+function group_legend_values(_flot, placeholder) {
+    var legend = document.getElementById('legend');
+    var current_legend = placeholder[0].nextSibling;
+    if (!current_legend) {
+        legend.innerHTML = '';
+        return;
+    }
+    var current_legend_labels = current_legend.querySelector('table tbody');
+    var rows = Object.values(current_legend_labels.childNodes);
+    var left = [];
+    var right = [];
+    var output = "";
+
+    for (n in rows){
+        var row = rows[n];
+        var isRight = row.querySelector('.label-right');
+        if (isRight){
+            right.push(row);
+        } else {
+            left.push(row);
+        }
+    }
+
+    output += '<div class="grid-container">';
+    output += '    <div class="col left">';
+    output += '      <ul class="unstyled">';
+    output += build_rows(left);
+    output += '      </ul>';
+    output += '    </div>';
+    output += '    <div class="col right">';
+    output += '      <ul class="unstyled">';
+    output += build_rows(right);
+    output += '      </ul>';
+    output += '    </div>';
+    output += '</div>';
+    // populate new legend with html
+    legend.innerHTML = output;
+    // hide old legend
+    current_legend.style.display = 'none';
+    // add onclick events to links within legend
+    var items = legend.querySelectorAll('[data-legend-series]');
+    for(i = 0; i < items.length; i++) {
+        var item = items[i];
+        var link = item.querySelector('a');
+        // handle click of legend link
+        if (!link) continue;
+        link.addEventListener('click', onClickLegendLink)
+    }
+}
+
+function onClickLegendLink(event) {
+    event.preventDefault();
+    var link = event.currentTarget;
+    // toggle opacity of the link
+    link.classList.toggle('faded');
+    // re-draw the chart with the plot lines hidden/shown
+    var index = link.dataset.index;
+    var current_data = plot_statistics.getData()
+    var feed = feedlist.find(function(item) { return item.id == this; }, current_data[index].id);
+    if (feed == undefined) return;
+    switch (feed.plottype) {
+        case 'lines': current_data[index].lines.show = !current_data[index].lines.show; break;
+        case 'bars': current_data[index].bars.show = !current_data[index].bars.show; break;
+        case 'points': current_data[index].points.show = !current_data[index].points.show; break;
+        case 'steps': current_data[index].steps.show = !current_data[index].steps.show; break;
+    }
+    plot_statistics.setData(current_data);
+    // re-draw
+    plot_statistics.draw();
+}
+
+function build_rows(rows) {
+    var output = "";
+    for (x in rows) {
+        var row = rows[x];
+        var label = row.querySelector('.legendLabel')
+        var span = label.querySelector('span');
+        var index = span.dataset.index;
+        var id = span.dataset.id;
+        var colour = '<div class="legendColorBox">' + row.querySelector('.legendColorBox').innerHTML + '</div>'
+        // add <li> to the html
+        output += '      <li data-legend-series><a href="' + path + 'graph/' + id + '" data-index="' + index + '" data-id="' + id + '">' + colour + label.innerText + '</a></li>';
+    }
+    return output;
+}
diff --git a/graph.saved.js b/graph.saved.js
new file mode 100644
index 0000000..0e72b4f
--- /dev/null
+++ b/graph.saved.js
@@ -0,0 +1,448 @@
+//----------------------------------------------------------------------------------------
+// graph.saved.js - Save/load named graphs (Vue.js app + REST API wrappers)
+//----------------------------------------------------------------------------------------
+
+/**
+ * return -1 for less than, 1 for more than, else 0
+ * @param {Object} a
+ * @param {Object} b
+ * @param {String} prop property name to compare
+ */
+function compare_name( a, b ) {
+    var prop = 'name'
+    if ( a[prop] < b[prop] ){
+        return -1
+    }
+    if ( a[prop] > b[prop] ){
+        return 1
+    }
+    return 0
+}
+
+function load_saved_graphs_menu()
+{
+    saveGraphsApp = new Vue({
+        el: '#my_graphs',
+        data: {
+            selected: -1,
+            collapsed: false,
+            messages: {
+                none: 'None selected',
+                deleted: 'Deleted',
+                saved: 'Saved',
+                select: _lang['Select graph']
+            },
+            original: '',
+            graphs: {},
+            apikeystr: apikeystr,
+            timeout: false,
+            delay: 1500,
+            status: '',
+            graphName: ''
+        },
+        methods: {
+            /**
+             * update or create saved graph
+             */
+            saveGraph: function(){
+                var vm = this
+                var data = get_graph_data()
+                // @todo : check for duplicate name
+                // @todo : check for new name - if new create, else update
+                data.name = this.graphName
+
+                if (this.graphsChanged && !this.nameChanged) {
+                    // UPDATE
+                    graph_update(data)
+                    .done(function(response) {
+                        if(typeof response.success == 'undefined' || response.success) {
+                            vm.status = response.message || vm.messages.saved
+                        } else {
+                            vm.status = "error 322"
+                        }
+                        window.setTimeout(function() {
+                            vm.status = ""
+                        }, vm.delay)
+                    })
+                } else {
+                    // CREATE
+                    graph_create(data)
+                    .done(function(response) {
+                        var newId = response.message.replace('graph saved id:','')
+                        vm.selected = -1
+                        vm.status = response.message || vm.messages.saved
+                        window.setTimeout(function() {
+                            vm.status = ''
+                        }, vm.delay)
+
+                        // get new data once saved.
+                        vm.getGraphs()
+                        .done(function(){
+                            // pre-select the new item
+                            vm.selected = vm.findGraphIndexById(newId)
+                            // add new graph to browser history
+                            vm.updateHashState(newId)
+                        })
+                    })
+                }
+
+            },
+            deleteGraph: function(){
+                var vm = this
+                if(window.confirm('Delete ' + this.graphs[this.selected].name + ' (#' + this.graphs[this.selected].id + ') ?')) {
+                    graph_delete(this.graphs[this.selected].id)
+                    .done(function(response) {
+                        vm.selected = -1
+                        vm.getGraphs()
+                        vm.status = response.message || vm.messages.deleted
+                        window.setTimeout(function() {
+                            vm.status = ''
+                            vm.emptyHashState()
+                        }, vm.delay)
+                    })
+                }
+            },
+            /**
+             * load data from graph/getall
+             */
+            getGraphs: function () {
+                var vm = this
+                return $.getJSON(path+"/graph/getall"+this.apikeystr)
+                .done(function(response){
+                    if (!response.success && response.success !== false) {
+                        // @todo : work with response.groups
+                        // save sorted list to vue data
+                        vm.graphs = response.user.sort( compare_name )
+                        vm.original = JSON.stringify(vm.graphs)
+                        // if view called with graph/#Saved/[id]
+                        // find the relevant graph in the list
+                        var hashId = vm.getHashState()
+                        if (hashId !== '') {
+                            var index = vm.findGraphIndexById(hashId)
+                            if(index > -1) {
+                                vm.selected = vm.graphs[index].name
+                            }
+                        }
+                    } else {
+                        vm.message = response.messsage
+                    }
+                })
+            },
+            /**
+             * get graphs[] index that stores graph with matching id
+             * @param {String} id taken from api response
+             * @return {Number} array index of match, else -1
+             */
+            findGraphIndexById: function(id) {
+                return this.findGraph('id', id)
+            },
+            /**
+             * get graphs[] index that stores graph with matching id
+             * @param {String} name taken from form selections
+             * @return {Number} array index of match, else -1
+             */
+            findGraphIndexByName: function(name) {
+                return this.findGraph('name', name)
+            },
+            /**
+             * search loaded graphs by property and value
+             * @return first index of matched value
+             */
+            findGraph: function(property, value) {
+                return this.find(this.graphs, property, value)
+            },
+            /**
+             * Return object key if property value matches
+             * @param {Object} list Enumerable Object to search
+             * @param {String} property Object property to compare
+             * @param {*} value Object property value to compare
+             * @return {Number} first matching index, else -1
+             */
+            find: function (list, property, value) {
+                if (typeof list === 'undefined' || typeof property === 'undefined' || typeof value === 'undefined') {
+                    return -1
+                }
+                for (const n in list) {
+                    const item = list[n]
+                    if (item.hasOwnProperty(property)) {
+                        if (item[property] === value) {
+                            return n
+                        }
+                    }
+                }
+                return -1
+            },
+            getHashState: function() {
+                // get the id of the saved graph from the url
+                return window.location.hash.replace('#/Saved/','')
+            },
+            updateHashState: function(id){
+                // add the '#/Saved/[id]' symbol to the url
+                var hashId = this.getHashState()
+                if (hashId === "" || id !== hashId) {
+                    window.location.hash = '/Saved/' + id
+                }
+            },
+            emptyHashState: function(){
+                // remove the '#' symbol from url
+                history.replaceState(null, null, ' ')
+            }
+        },
+        computed: {
+            graphsChanged: function() {
+                return JSON.stringify(this.graphs).length !== this.original.length
+            },
+            saveButtonDisabled: function() {
+                var empty = this.graphName === ''
+                var changed = this.graphsChanged
+                var selected = this.selected > -1
+
+                if ( selected && !changed ) {
+                    return true
+                }
+                if ( empty && !selected) {
+                    return true
+                }
+                return false
+            },
+            /**
+             * return true if new or saved graph name changed
+             */
+            nameChanged: function() {
+                var empty = this.graphName === ''
+                var selected = this.selected > -1
+                var downloaded = this.original !== ''
+
+                if (!downloaded || empty) {
+                    return false
+                } else {
+                    var originalSelected = {}
+                    try {
+                        originalSelected = JSON.parse(this.original)[this.selected]
+                    } catch (error) {}
+                    if(originalSelected && this.graphName === originalSelected.name) {
+                        return false
+                    }
+                }
+                return true
+            }
+        },
+        watch: {
+            /**
+             * `selected` is array index of currently selected graph
+             */
+            selected: function (newVal) {
+                // change the name of the selected graph to display
+                // change global id of selected item
+                var graph = this.graphs[newVal]
+                if (graph) {
+                    this.graphName = graph.name
+                    if (graph.id !== this.getHashState()) {
+                        this.updateHashState(graph.id)
+                    }
+                    // use function outside of vuejs to update the graph and menu
+                    load_saved_graph(this.graphs[newVal])
+                } else {
+                    this.graphName =  ''
+                    this.emptyHashState()
+                }
+            },
+            graphName: function (newVal) {
+                if (newVal !== "" && this.selected > -1) {
+                    this.graphs[this.selected].name = newVal
+                } else {
+                    graphsChanged = true
+                }
+            }
+        },
+        created: function () {
+            var vm = this
+            this.getGraphs()
+            .done(function(){
+                var newId = vm.getHashState()
+                // pre-select the item
+                vm.selected = vm.findGraphIndexById(newId)
+            })
+            window.addEventListener('hashchange', function(event) {
+                var hashId = vm.getHashState()
+                if (hashId !== '') {
+                    vm.selected = vm.findGraphIndexById(hashId)
+                }
+            });
+        }
+    })
+}
+
+$(function(){
+    // when the form changes send the new data into the "saved list" vue app (if available)
+    $('#info').on('change', function(event) {
+        if (saveGraphsApp) {
+            if(saveGraphsApp.selected > -1) {
+                Vue.set(saveGraphsApp.graphs, saveGraphsApp.selected, get_graph_data())
+            }
+        }
+    })
+})
+
+// place data into view (not vue.js)
+function load_saved_graph(graph) {
+    // @todo: unload_saved_graph()
+
+    if (typeof graph === 'undefined') return;
+    if (graph.mode == undefined) graph.mode = 'interval';
+
+    // view settings
+    view.start = graph.start;
+    view.end = graph.end;
+    view.interval = graph.interval;
+    view.mode = graph.mode;
+    view.limitinterval = graph.limitinterval;
+    view.fixinterval = graph.fixinterval;
+    floatingtime = graph.floatingtime;
+    yaxismin = graph.yaxismin;
+    yaxismin2 = graph.yaxismin2 || 'auto';
+    yaxismax = graph.yaxismax;
+    yaxismax2 = graph.yaxismax2 || 'auto';
+
+    // CSV display settings
+    csvtimeformat = (typeof graph.csvtimeformat === 'undefined' ? 'datestr' : graph.csvtimeformat);
+    csvnullvalues = (typeof graph.csvnullvalues === 'undefined' ? 'show' : graph.csvnullvalues);
+    csvheaders = (typeof graph.csvheaders === 'undefined' ? 'showNameTag' : graph.csvheaders);
+    const tmpCsv = (typeof graph.showcsv === 'undefined' ? '0' : graph.showcsv.toString());
+
+    // show settings
+    showmissing = graph.showmissing;
+    showtag = graph.showtag;
+    showlegend = graph.showlegend;
+
+    // graph details
+    current_graph_id = graph.id;
+    current_graph_name = graph.name;
+
+    // feedlist
+    feedlist = graph.feedlist;
+
+    if (floatingtime) {
+        const timewindow = view.end - view.start;
+        const now = Math.round(+new Date() * 0.001) * 1000;
+        view.end = now;
+        view.start = view.end - timewindow;
+    }
+
+    $("#yaxis-min").val(yaxismin);
+    $("#yaxis-max").val(yaxismax);
+    $("#yaxis-min2").val(yaxismin2);
+    $("#yaxis-max2").val(yaxismax2);
+    $("#request-fixinterval")[0].checked = view.fixinterval;
+    $("#request-limitinterval")[0].checked = view.limitinterval;
+    $("#showmissing")[0].checked = showmissing;
+    $("#showtag")[0].checked = showtag;
+    $("#showlegend")[0].checked = showlegend;
+
+    $("#request-type").val(view.mode);
+    if (view.mode !== "interval") {
+        $(".fixed-interval-options").hide();
+    } else {
+        $(".fixed-interval-options").show();
+    }
+
+    // draw graph
+    graph_reload();
+    load_feed_selector();
+    // Placed after graph load as values only available after the graph is redrawn
+    $("#csvtimeformat").val(csvtimeformat);
+    $("#csvnullvalues").val(csvnullvalues);
+    $("#csvheaders").val(csvheaders);
+    csvShowHide(tmpCsv);
+}
+
+function get_graph_data() {
+
+    const now = Math.round(+new Date() * 0.001) * 1000;
+    if (Math.abs(now - view.end) < 120000) {
+        floatingtime = 1;
+    }
+
+    const graph_to_save = {
+        name: current_graph_name,
+        start: view.start,
+        end: view.end,
+        interval: view.interval,
+        mode: view.mode,
+        limitinterval: view.limitinterval,
+        fixinterval: view.fixinterval,
+        floatingtime: floatingtime,
+        yaxismin: yaxismin,
+        yaxismax: yaxismax,
+        yaxismin2: yaxismin2,
+        yaxismax2: yaxismax2,
+        showmissing: showmissing,
+        showtag: showtag,
+        showlegend: showlegend,
+        showcsv: showcsv,
+        csvtimeformat: csvtimeformat,
+        csvnullvalues: csvnullvalues,
+        csvheaders: csvheaders,
+        feedlist: JSON.parse(JSON.stringify(feedlist)),
+        id: current_graph_id,
+    };
+    return graph_to_save
+}
+
+function graph_update(data) {
+    // Clean feedlist of data and stats that dont need to be saved
+    for (const i in data.feedlist) {
+        delete data.feedlist[i].data;
+        delete data.feedlist[i].stats;
+    }
+
+    // Save
+    return $.ajax({
+        method: "POST",
+        url: path+"/graph/update",
+        data: "id="+data.id+"&data="+JSON.stringify(data),
+        dataType: "json",
+        success: function(result) {
+            if (!result.success) alert("ERROR: "+result.message);
+        },
+        error: function(xhr,type,message) {
+            alert("ERROR: "+type+":"+message);
+        }
+    });
+}
+
+function graph_create(data) {
+    // Clean feedlist of data and stats that dont need to be saved
+    for (var i in data.feedlist) {
+        delete data.feedlist[i].data
+        delete data.feedlist[i].stats;
+    }
+    data.name = encodeURIComponent(data.name)
+    // Save
+    var ajax = $.ajax({
+        method: "POST",
+        url: path+"/graph/create",
+        data: "data="+JSON.stringify(data),
+        async: true,
+        dataType: "json",
+        success: function(result) {
+            if (!result.success) alert("ERROR: "+result.message);
+        }
+    });
+    return ajax
+}
+
+function graph_delete(id) {
+    // Save
+    var ajax = $.ajax({
+        method: "POST",
+        url: path+"/graph/delete",
+        data: "id="+id,
+        async: true,
+        dataType: "json",
+        success: function(result) {
+            if (!result.success) alert("ERROR: "+result.message);
+        }
+    });
+    return ajax
+}
diff --git a/graph.utils.js b/graph.utils.js
new file mode 100644
index 0000000..69aa71a
--- /dev/null
+++ b/graph.utils.js
@@ -0,0 +1,72 @@
+//----------------------------------------------------------------------------------------
+// graph.utils.js - Utility/helper functions
+//----------------------------------------------------------------------------------------
+
+/**
+ * @todo replace this with moment.js translated date/time strings
+ * see feed and input views for example of translated dates
+ * eg. moment().fromUnix(timestamp).format('ll') // format unix timestamp as per user's locale
+ * @see Lib/misc/moment.min.js
+ **/
+function printdate(timestamp)
+{
+    var date = new Date();
+    var thisyear = date.getFullYear();
+
+    var date = new Date(timestamp);
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    var year = date.getFullYear();
+    var month = months[date.getMonth()];
+    var day = date.getDate();
+
+    var minutes = date.getMinutes();
+    if (minutes<10) minutes = "0"+minutes;
+
+    var secs = date.getSeconds();
+    if (secs<10) secs = "0"+secs;
+
+    var datestr = "";
+    //	date.getHours()+":"+minutes+" "+day+" "+month;
+    datestr += day+"/"+month;
+    if (thisyear!=year) datestr += "/"+year;
+    datestr += " " + date.getHours()+":"+minutes+":"+secs;
+    return datestr;
+};
+
+// See: https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server
+function download_data(filename, data) {
+    var blob = new Blob([data], {type: 'text/csv'});
+    if(window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveBlob(blob, filename);
+    }
+    else{
+        var elem = window.document.createElement('a');
+        elem.href = window.URL.createObjectURL(blob);
+        elem.download = filename;        
+        document.body.appendChild(elem);
+        elem.click();        
+        document.body.removeChild(elem);
+    }
+}
+
+function arrayMove(array,old_index, new_index){
+    array.splice(new_index, 0, array.splice(old_index, 1)[0]);
+    return array;
+}
+
+// Remove null values from feed data
+function remove_null_values(data, interval, max_duration = 900) {
+    var last_valid_pos = 0;
+    for (var pos = 0; pos < data.length; pos++) {
+        if (data[pos][1] != null) {
+            let null_time = (pos - last_valid_pos) * interval;
+            if (null_time < max_duration) {
+                for (var x = last_valid_pos + 1; x < pos; x++) {
+                    data[x][1] = data[last_valid_pos][1];
+                }
+            }
+            last_valid_pos = pos;
+        }
+    }
+    return data;
+}
diff --git a/graph_controller.php b/graph_controller.php
index 39fb75c..36d9a92 100644
--- a/graph_controller.php
+++ b/graph_controller.php
@@ -7,15 +7,8 @@ function graph_controller()
 {
     global $session,$route,$mysqli,$redis, $path;
 
-    // Check if group module is installed
-    $group = false;
-    if (file_exists("Modules/group/group_model.php")) {
-        require_once "Modules/group/group_model.php";
-        $group = new Group($mysqli, $redis, null, null, null);
-    }
-
     require_once "Modules/graph/graph_model.php";
-    $graph = new Graph($mysqli, $group);
+    $graph = new Graph($mysqli);
 
     $result = "";
     
@@ -50,26 +43,7 @@ function graph_controller()
         $route->format="json";
         $result = $graph->getall($session['userid']);
     }
-    
-    // Group graph methods
-    else if ($group && $session['write'] && $route->action == "creategroupgraph" && isset($_POST['data']) && isset($_POST['groupid'])) {
-        $route->format = "json";
-        $result = $graph->creategroupgraph($session['userid'], post('data'), post('groupid'));
-    }
-    
-    else if ($group && $session['write'] && $route->action == "updategroupgraph" && isset($_POST['id']) && isset($_POST['data'])) {
-        $route->format = "json";
-        $result = $graph->updategroupgraph($session['userid'], post('id'), post('data'),post('groupid'));
-    }
-    
-    else if ($group && $session['write'] && $route->action == "deletegroupgraph" && isset($_POST['id'])) {
-        $route->format = "json";
-        $result = $graph->deletegroupgraph($session['userid'], post('id'));
-    }
-    
-    else if ($group && $route->action=="groupgraph") {
-        $result = view("Modules/graph/group_view.php", array("session" => $session["write"], 'group_support' => 1));
-    }
+
     else {
         if (!$session['read'] && !$session['public_userid']) return "";
         $result = view("Modules/graph/view.php", array());
diff --git a/graph_model.php b/graph_model.php
index 7621ec1..4b9f54b 100644
--- a/graph_model.php
+++ b/graph_model.php
@@ -16,12 +16,10 @@
 class Graph
 {
     private $mysqli;
-    private $group;
 
-    public function __construct($mysqli, $group) 
+    public function __construct($mysqli) 
     {
         $this->mysqli = $mysqli;
-        $this->group = $group;
     }
         
     public function create($userid,$data)
@@ -29,7 +27,7 @@ public function create($userid,$data)
         $userid = (int) $userid;
         $data = preg_replace('/[^\w\s\-.",:#&{}\[\]]/','',$data);
 
-        $stmt = $this->mysqli->prepare("INSERT INTO graph ( userid, data, groupid ) VALUES (?,?,0)");
+        $stmt = $this->mysqli->prepare("INSERT INTO graph ( userid, data ) VALUES (?,?)");
         $stmt->bind_param("is", $userid, $data);
         $stmt->execute();
         $id = $this->mysqli->insert_id;
@@ -101,85 +99,6 @@ public function getall($userid)
                 $graphs['user'][] = $data;
             }
         }
-        // Get group's graphs
-        if ($this->group!=false) {
-            $graphs['groups'] = array();
-            $groups = $this->group->grouplist($userid);
-            foreach ($groups as $group) {
-                $gid = $group['groupid'];
-                $result = $this->mysqli->query("SELECT id,data FROM graph WHERE `groupid`='$gid'");
-                while ($row = $result->fetch_array()) {
-                    $data = json_decode($row['data']);
-                    // Check for valid decode
-                    if ($data != null) {
-                        $data->id = $row['id'];
-                        $graphs['groups'][$group['name']][] = $data;
-                    }
-                }
-            }
-        }
         return $graphs;
     }
-    
-    // ---------------------------------------------------------
-    // Group functions
-    // ---------------------------------------------------------
-    
-    public function creategroupgraph($userid, $data, $groupid) {
-        $userid = (int) $userid;
-        $data = preg_replace('/[^\w\s\-.",:#&{}\[\]]/', '', $data);
-        $groupid = (int) $groupid;
-        $user_role = $this->group->get_user_role($userid, $userid, $groupid);
-
-        if ($this->group == false || ($user_role != 1 && $user_role != 2)) {
-            return array("success" => false, "message" => "error: user is not admin/subadmin of the group");
-        }
-
-        $stmt = $this->mysqli->prepare("INSERT INTO graph ( userid, data, groupid ) VALUES (0,?,?)");
-        $stmt->bind_param("si", $data, $groupid);
-        $stmt->execute();
-        $id = $this->mysqli->insert_id;
-        if ($id)
-            return array("success" => true, "message" => "graph saved id:$id");
-        return array("success" => false, "message" => "error:$id");
-    }
-
-    public function updategroupgraph($userid, $id, $data, $groupid) {
-        $userid = (int) $userid;
-        $id = (int) $id;
-        $data = preg_replace('/[^\w\s\-.",:#&{}\[\]]/', '', $data);
-        $groupid = (int) $groupid;
-        $user_role = $this->group->get_user_role($userid, $userid, $groupid);
-
-        if ($this->group == false || ($user_role != 1 && $user_role != 2)) {
-            return array("success" => false, "message" => "error: user is not admin/subadmin of the group");
-        }
-
-
-        $result = $this->mysqli->query("SELECT data FROM graph WHERE `id`='$id' AND `groupid`='$groupid'");
-        if ($result->num_rows) {
-            $stmt = $this->mysqli->prepare("UPDATE graph SET `data`=? WHERE `id`=?");
-            $stmt->bind_param("si", $data, $id);
-            $stmt->execute();
-            return array("success" => true, "message" => "updated");
-        }
-        return array("success" => false, "message" => "graph does not exist or doesn't belong to group");
-    }
-
-    public function deletegroupgraph($userid, $id) {
-        $userid = (int) $userid;
-        $id = (int) $id;
-
-        $result = $this->mysqli->query("SELECT groupid FROM graph WHERE `id`='$id'");
-        if ($result->num_rows != 1)
-            return array("success" => false, "message" => "graph id not found");
-        $row = $result->fetch_array();
-
-        $user_role = $this->group->get_user_role($userid, $userid, $row['groupid']);
-        if ($user_role != 1 && $user_role != 2)
-            return array("success" => false, "message" => "You are not an administrator/subadministrator of the group");
-
-        $this->mysqli->query("DELETE FROM graph WHERE `id` = '$id'");
-        return array("success" => true, "message" => "deleted");
-    }
 }
diff --git a/graph_schema.php b/graph_schema.php
index a9f194d..8bfc868 100644
--- a/graph_schema.php
+++ b/graph_schema.php
@@ -3,6 +3,5 @@
 $schema['graph'] = array(
     'id' => array('type' => 'int(11)', 'Null'=>'NO', 'Key'=>'PRI', 'Extra'=>'auto_increment'),
     'userid' => array('type' => 'int(11)'),
-    'groupid' => array('type' => 'int(11)', 'default' => 0),
     'data' => array('type' => 'text')
 );
diff --git a/group_graph.js b/group_graph.js
deleted file mode 100644
index 3419690..0000000
--- a/group_graph.js
+++ /dev/null
@@ -1,1482 +0,0 @@
-var savedgraphs = [];
-var feeds = []; // session user's feeds
-feedlist = []; // feeds to be shown in the data viewer
-var groups = []; // groups the session user belongs to. If his/her role is administrator or subadministrator, each group will contain all its users and their feeds
-var plotdata = [];
-
-var embed = false;
-
-var skipmissing = 0;
-var requesttype = "interval";
-var showcsv = 0;
-
-var showmissing = false;
-var showtag = true;
-var showlegend = true;
-
-var floatingtime=1;
-var yaxismin="auto";
-var yaxismax="auto";
-var showtag = true;
-
-var previousPoint = 0;
-
-var active_histogram_feed = 0;
-
-$("#info").show();
-if ($("#showmissing")[0]!=undefined) $("#showmissing")[0].checked = showmissing;
-if ($("#showtag")[0]!=undefined) $("#showtag")[0].checked = showtag;
-if ($("#showlegend")[0]!=undefined) $("#showlegend")[0].checked = showlegend;
-
-$("#graph_zoomout").click(function () {floatingtime=0; view.zoomout(); graph_reloaddraw();});
-$("#graph_zoomin").click(function () {floatingtime=0; view.zoomin(); graph_reloaddraw();});
-$('#graph_right').click(function () {floatingtime=0; view.panright(); graph_reloaddraw();});
-$('#graph_left').click(function () {floatingtime=0; view.panleft(); graph_reloaddraw();});
-$('.graph_time').click(function () {
-    floatingtime=1; 
-    view.timewindow($(this).attr("time")); 
-    graph_reloaddraw();
-});
-
-$('#placeholder').bind("legendclick", function (event, ranges) {
-  console.log(event);
-});
-
-$('#placeholder').bind("plotselected", function (event, ranges)
-{
-    floatingtime=0; 
-    view.start = ranges.xaxis.from;
-    view.end = ranges.xaxis.to;
-    view.calc_interval();
-    
-    graph_reloaddraw();
-});
-
-$('#placeholder').bind("plothover", function (event, pos, item) {
-    if (item) {
-        var z = item.dataIndex;
-        if (previousPoint != item.datapoint) {
-            previousPoint = item.datapoint;
-
-            $("#tooltip").remove();
-            var item_time = item.datapoint[0];
-            var item_value = item.datapoint[1];
-
-            var d = new Date(item_time);
-            var days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
-            var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
-            var minutes = d.getMinutes();
-            if (minutes<10) minutes = "0"+minutes;
-            var date = d.getHours()+":"+minutes+" "+days[d.getDay()]+", "+months[d.getMonth()]+" "+d.getDate();
-            tooltip(item.pageX, item.pageY, "<span style='font-size:11px'>"+item.series.label+"</span><br>"+item_value+"<br><span style='font-size:11px'>"+date+"</span>", "#fff");
-        }
-    } else $("#tooltip").remove();
-});
-
-$(window).resize(function(){
-    if (!embed) sidebar_resize();
-    graph_resize();
-    graph_draw();
-});
-
-function graph_resize() {
-    var top_offset = 0;
-    if (embed) top_offset = 35;
-    var placeholder_bound = $('#placeholder_bound');
-    var placeholder = $('#placeholder');
-
-    var width = placeholder_bound.width();
-    var height = width * 0.5;
-    if (embed) height = $(window).height();
-
-    placeholder.width(width);
-    placeholder_bound.height(height-top_offset);
-    placeholder.height(height-top_offset);
-}
-
-function graph_init_editor()
-{
-
-    if (session) graph_load_savedgraphs();
-    if (!session && !userid) feeds = feedlist;
-            
-    var numberoftags = 0;
-    feedsbytag = {};
-    for (var z in feeds) {
-        if (feedsbytag[feeds[z].tag]==undefined) {
-            feedsbytag[feeds[z].tag] = [];
-            numberoftags++;
-        }
-        feedsbytag[feeds[z].tag].push(feeds[z]);
-    }
-    
-    var out = "";
-    out += "<colgroup>";
-    out += "<col span='1' style='width: 70%;'>";
-    out += "<col span='1' style='width: 15%;'>";
-    out += "<col span='1' style='width: 15%;'>";
-    out += "</colgroup>";
-    
-    for (var tag in feedsbytag) {
-       tagname = tag;
-       if (tag=="") tagname = "undefined";
-       out += "<tr class='tagheading' tag='"+tagname+"' style='background-color:#aaa; cursor:pointer'><td style='font-size:12px; padding:4px; padding-left:8px; font-weight:bold'>"+tagname+"</td><td></td><td></td></tr>";
-       out += "<tbody class='tagbody' tag='"+tagname+"'>";
-       for (var z in feedsbytag[tag]) 
-       {
-           out += "<tr>";
-           var name = feedsbytag[tag][z].name;
-           if (name.length>20) {
-               name = name.substr(0,20)+"..";
-           }
-           out += "<td>"+name+"</td>";
-           out += "<td><input class='feed-select-left' feedid="+feedsbytag[tag][z].id+" type='checkbox'></td>";
-           out += "<td><input class='feed-select-right' feedid="+feedsbytag[tag][z].id+" type='checkbox'></td>";
-           out += "</tr>";
-       }
-       out += "</tbody>";
-    }
-    $("#feeds").html(out);
-    
-    if (feeds.length>12 && numberoftags>2) {
-        $(".tagbody").hide();
-    }
-
-    //-------------------------------------------------
-    // Populate editor: groups, users and their feeds
-    //-------------------------------------------------
-    if (group_support === true) {
-        groups.forEach(function (group, index) {
-            $('#select-group').append('<option value=' + index + '>' + group.name + '</option>');
-        });
-        populate_group_table(0);
-        if (groups[0].role != 1&&groups[0].role != 2) {
-            $('#graph-save').hide();
-            $('#graph-delete').hide();
-        }
-        else {
-            $('#graph-save').show();
-            $('#graph-delete').show();
-        }
-    }
-
-    //******************************************
-    // Actions data viewer
-    // ******************************************/
-    $("#reload").click(function(){
-        view.start = $("#request-start").val()*1000;
-        view.end = $("#request-end").val()*1000;
-        view.interval = $("#request-interval").val();
-        view.limitinterval = $("#request-limitinterval")[0].checked*1;
-        
-        graph_reloaddraw();
-    });
-
-    $("#showcsv").click(function(){
-        if ($("#showcsv").html()=="Show CSV Output") {
-            printcsv()
-            showcsv = 1;
-            $("#csv").show();
-            $(".csvoptions").show();
-            $("#showcsv").html("Hide CSV Output");
-        } else {
-            showcsv = 0;
-            $("#csv").hide();
-            $(".csvoptions").hide();
-            $("#showcsv").html("Show CSV Output");
-        }
-    });
-    $(".csvoptions").hide();
-
-    $("body").on("click",".getaverage",function(){
-        var feedid = $(this).attr("feedid");
-        
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                feedlist[z].getaverage = $(this)[0].checked;
-                break;
-            }
-        }
-        graph_draw();
-    });
-
-    $("body").on("click",".delta",function(){
-        var feedid = $(this).attr("feedid");
-        
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                feedlist[z].delta = $(this)[0].checked;
-                break;
-            }
-        }
-        graph_draw();
-    });
-    
-    $("body").on("change",".linecolor",function(){
-        var feedid = $(this).attr("feedid");
-        
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                feedlist[z].color = $(this).val();
-                break;
-            }
-        }
-        graph_draw();
-    });
-    
-    $("body").on("change",".fill",function(){
-        var feedid = $(this).attr("feedid");
-        
-        for (var z in feedlist) {
-            if (feedlist[z].id==feedid) {
-                feedlist[z].fill = $(this)[0].checked;
-                break;
-            }
-        }
-        graph_draw();
-    });
-
-    $("#showmissing").click(function(){
-        if ($("#showmissing")[0].checked) showmissing = true; else showmissing = false;
-        graph_draw();
-    });
-    
-    $("#showlegend").click(function(){
-        if ($("#showlegend")[0].checked) showlegend = true; else showlegend = false;
-        graph_draw();
-    });
-    
-    $("#showtag").click(function(){
-        if ($("#showtag")[0].checked) showtag = true; else showtag = false;
-        graph_draw();
-    });
-
-    $("#request-fixinterval").click(function(){
-        if ($("#request-fixinterval")[0].checked) view.fixinterval = true; else view.fixinterval = false;
-        if (view.fixinterval) {
-            $("#request-interval").prop('disabled', true);
-        } else {
-            $("#request-interval").prop('disabled', false);
-        }
-    });
-
-    $("#request-type").val("interval");
-    $("#request-type").change(function() {
-        var type = $(this).val();
-        type = type.toLowerCase();
-        
-        if (type!="interval") {
-            $(".fixed-interval-options").hide();
-            view.fixinterval = true;
-        } else { 
-            $(".fixed-interval-options").show();
-            view.fixinterval = false;
-        }
-        
-        requesttype = type;
-        
-        // Intervals are set here for bar graph bar width sizing
-        if (type=="daily") view.interval = 86400;
-        if (type=="weekly") view.interval = 86400*7;
-        if (type=="monthly") view.interval = 86400*30;
-        if (type=="annual") view.interval = 86400*365;
-        
-        $("#request-interval").val(view.interval);
-    });
-
-    $("body").on("change",".decimalpoints",function(){
-        var feedid = $(this).attr("feedid");
-        var dp = $(this).val();
-        
-        for (var z in feedlist) {
-            if (feedlist[z].id == feedid) {
-                feedlist[z].dp = dp;
-                
-                graph_draw();
-                break;
-            }
-        }
-    });
-
-    $("body").on("change",".plottype",function(){
-        var feedid = $(this).attr("feedid");
-        var plottype = $(this).val();
-        
-        for (var z in feedlist) {
-            if (feedlist[z].id == feedid) {
-                feedlist[z].plottype = plottype;
-                
-                graph_draw();
-                break;
-            }
-        }
-    });
-    
-    $("body").on("change","#yaxis-min",function(){
-        yaxismin = $(this).val();
-        graph_draw();
-    });
-    
-    $("body").on("change","#yaxis-max",function(){
-        yaxismax = $(this).val();
-        graph_draw();
-    });
-
-
-    $("#csvtimeformat").change(function(){
-        printcsv();
-    });
-
-    $("#csvnullvalues").change(function(){
-        printcsv();
-    });
-    
-    $('body').on("click",".legendColorBox",function(d){
-          var country = $(this).html().toLowerCase();
-          console.log(country);
-    }); 
-
-    $(".feed-options-show-stats").click(function(){
-        $("#feed-options-table").hide();
-        $("#feed-stats-table").show();
-        $(".feed-options-show-options").show();
-        $(".feed-options-show-stats").hide();
-    });    
-    
-    $(".feed-options-show-options").click(function(){
-        $("#feed-options-table").show();
-        $("#feed-stats-table").hide();
-        $(".feed-options-show-options").hide();
-        $(".feed-options-show-stats").show();
-    });
-
-    //******************************************
-    // Actions ticking checkboxes in editor
-    // ******************************************/
-    $("body").on("click", ".feed-select-left", function (e) {
-        e.stopPropagation();
-        var feedid = $(this).attr("feedid");
-        var checked = $(this)[0].checked;
-        var feed_from_group = false;
-
-        // Check if the feed belongs to a user in a group
-        var source = $(this).attr('source');
-        if (source == 'group') {
-            feed_from_group = true;
-            // set state of "check all" checkbox
-            var userid = $(this).attr('userid');
-            var tag = $(this).attr('tag');
-            var any_checked = false
-            var any_unchecked = false;
-            $(".feed-select-left[tag='" + tag + "'][userid='" + userid + "']").each(function () {
-                if ($(this)[0].checked == false)
-                    any_unchecked = true;
-                else
-                    any_checked = true;
-            });
-            if (any_checked == true && any_unchecked == false) // all checked
-                $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', 'checked').prop("indeterminate", false);
-            else if (any_checked == false && any_unchecked == true) // none checked
-                $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', '').prop("indeterminate", false);
-            else // some are checked and some are unchecked
-                $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop("indeterminate", true);
-        }
-
-        // Add/remove the feeds to the feedlist
-        var loaded = false;
-        for (var z in feedlist) {
-            if (feedlist[z].id == feedid) {
-                if (!checked) {
-                    feedlist.splice(z, 1);  // Remove from graph the feeds that are not checked and are in the graph
-                } else {
-                    feedlist[z].yaxis = 1;
-                    loaded = true;
-                    $(".feed-select-right[feedid=" + feedid + "]").each(function () { // Ensure that feeds are only ticked the appropiate column
-                        $(this)[0].checked = false;
-                    });
-                }
-            }
-        }
-        if (loaded == false && checked) // When both sides where unticked and one has been ticked now we add it to the graph
-            pushfeedlist(feedid, 1, feed_from_group);
-
-        graph_reloaddraw();
-
-        // set state of "check all" checkbox
-        if (source == 'group') {
-            var userid = $(this).attr('userid');
-            var tag = $(this).attr('tag');
-            var any_checked = false
-            var any_unchecked = false;
-            $(".feed-select-left[tag='" + tag + "'][userid='" + userid + "']").each(function () {
-                if ($(this)[0].checked == false)
-                    any_unchecked = true;
-                else
-                    any_checked = true;
-            });
-            if (any_checked == true && any_unchecked == false) { // all checked
-                $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', 'checked').prop("indeterminate", false);
-                $('.feed-tag-checkbox-right[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', '').prop("indeterminate", false);
-                $('.feed-select-right[tag="' + tag + '"][userid="' + userid + '"]').prop('checked', '');
-            }
-            else if (any_checked == false && any_unchecked == true) { // none checked
-                $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', '').prop("indeterminate", false);
-            }
-            else { // some are checked and some are unchecked
-                $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop("indeterminate", true);
-                // the other column
-                var any_checked = false
-                var any_unchecked = false;
-                $(".feed-select-right[tag='" + tag + "'][userid='" + userid + "']").each(function () {
-                    if ($(this)[0].checked == false)
-                        any_unchecked = true;
-                    else
-                        any_checked = true;
-
-                    if (any_checked == false && any_unchecked == true) { // none checked
-                        $('.feed-tag-checkbox-right[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', '').prop("indeterminate", false);
-                    }
-                    else { // some are checked and some are unchecked
-                        $('.feed-tag-checkbox-right[tag="' + tag + '"][uid="' + userid + '"]').prop("indeterminate", true);
-                    }
-                });
-            }
-        }
-
-    });
-    $("body").on("click", ".feed-select-right", function (e) {
-        e.stopPropagation();
-        var feedid = $(this).attr("feedid");
-        var checked = $(this)[0].checked;
-        var feed_from_group = false;
-
-        // Check if the feed belongs to a user in a group
-        var source = $(this).attr('source');
-        if (source == 'group')
-            feed_from_group = true;
-
-        // Add/remove the feeds to the feedlist
-        var loaded = false;
-        for (var z in feedlist) {
-            if (feedlist[z].id == feedid) {
-                if (!checked) {
-                    feedlist.splice(z, 1);  // Remove from graph the feeds that are not checked and are in the graph
-                } else {
-                    feedlist[z].yaxis = 2;
-                    loaded = true;
-                    $(".feed-select-left[feedid=" + feedid + "]").each(function () { // Ensure that feeds are only ticked the appropiate column
-                        $(this)[0].checked = false;
-                    });
-                }
-            }
-        }
-        if (loaded == false && checked) // When both sides where unticked and one has been ticked now we add it to the graph
-            pushfeedlist(feedid, 2, feed_from_group);
-
-        graph_reloaddraw();
-
-        // set state of "check all" checkbox
-        if (source == 'group') {
-            var userid = $(this).attr('userid');
-            var tag = $(this).attr('tag');
-            var any_checked = false
-            var any_unchecked = false;
-            $(".feed-select-right[tag='" + tag + "'][userid='" + userid + "']").each(function () {
-                if ($(this)[0].checked == false)
-                    any_unchecked = true;
-                else
-                    any_checked = true;
-            });
-            if (any_checked == true && any_unchecked == false) { // all checked
-                $('.feed-tag-checkbox-right[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', 'checked').prop("indeterminate", false);
-                $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', '').prop("indeterminate", false);
-                $('.feed-select-left[tag="' + tag + '"][userid="' + userid + '"]').prop('checked', '');
-            }
-            else if (any_checked == false && any_unchecked == true) { // none checked
-                $('.feed-tag-checkbox-right[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', '').prop("indeterminate", false);
-            }
-            else { // some are checked and some are unchecked
-                $('.feed-tag-checkbox-right[tag="' + tag + '"][uid="' + userid + '"]').prop("indeterminate", true);
-                // the other column
-                var any_checked = false
-                var any_unchecked = false;
-                $(".feed-select-left[tag='" + tag + "'][userid='" + userid + "']").each(function () {
-                    if ($(this)[0].checked == false)
-                        any_unchecked = true;
-                    else
-                        any_checked = true;
-
-                    if (any_checked == false && any_unchecked == true) { // none checked
-                        $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop('checked', '').prop("indeterminate", false);
-                    }
-                    else { // some are checked and some are unchecked
-                        $('.feed-tag-checkbox-left[tag="' + tag + '"][uid="' + userid + '"]').prop("indeterminate", true);
-                    }
-                });
-            }
-        }
-    });
-    $("body").on("click", ".feed-tag-checkbox-right", function (e) {
-        e.stopPropagation();
-        var tag = $(this).attr("tag");
-        var userid = $(this).attr("uid");
-        var checked = $(this)[0].checked;
-        var feed_from_group = true;
-
-        // Tick/untick the feeds
-        if (checked)
-            $('.feed-select-right[tag="' + tag + '"][userid="' + userid + '"]').prop('checked', 'checked');
-        else
-            $('.feed-select-right[tag="' + tag + '"][userid="' + userid + '"]').prop('checked', '');
-
-        // Ensure only this checkbox is ticked
-        if (checked)
-            $(".feed-tag-checkbox-left").prop('checked', '').prop("indeterminate", false);
-
-        // Add/remove the feeds to the feedlist
-        $('.feed-select-right[tag="' + tag + '"][userid="' + userid + '"]').each(function () {
-            var feedid = $(this).attr('feedid');
-            var loaded = false;
-            for (var z in feedlist) {
-                if (feedlist[z].id == feedid) {
-                    if (!checked) {
-                        feedlist.splice(z, 1); // Remove from graph the feeds that are not checked and are in the graph
-                    } else {
-                        feedlist[z].yaxis = 2;
-                        loaded = true;
-                        $(".feed-select-left[feedid=" + feedid + "]").each(function () {  // Ensure that feeds are only ticked the appropiate column
-                            $(this)[0].checked = false;
-                        });
-                    }
-                }
-            }
-            if (loaded == false && checked) // When both sides where unticked and one has been ticked now we add it to the graph
-                pushfeedlist(feedid, 2, feed_from_group);
-        });
-
-        // Draw graph
-        graph_reloaddraw();
-    });
-    $("body").on("click", ".feed-tag-checkbox-left", function (e) {
-        e.stopPropagation();
-        var tag = $(this).attr("tag");
-        var userid = $(this).attr("uid");
-        var checked = $(this)[0].checked;
-        var feed_from_group = true;
-
-        // Tick/untick the feeds
-        if (checked)
-            $('.feed-select-left[tag="' + tag + '"][userid="' + userid + '"]').prop('checked', 'checked');
-        else
-            $('.feed-select-left[tag="' + tag + '"][userid="' + userid + '"]').prop('checked', '');
-
-        // Ensure only this checkbox is ticked
-        if (checked)
-            $(".feed-tag-checkbox-right").prop('checked', '').prop("indeterminate", false);
-
-        // Add/remove the feeds to the feedlist
-        $('.feed-select-left[tag="' + tag + '"][userid="' + userid + '"]').each(function () {
-            var feedid = $(this).attr('feedid');
-            var loaded = false;
-            for (var z in feedlist) {
-                if (feedlist[z].id == feedid) {
-                    if (!checked) {
-                        feedlist.splice(z, 1); // Remove from graph the feeds that are not checked and are in the graph
-                    } else {
-                        feedlist[z].yaxis = 1;
-                        loaded = true;
-                        $(".feed-select-right[feedid=" + feedid + "]").each(function () { // Ensure that feeds are only ticked the appropiate column
-                            $(this)[0].checked = false;
-                        });
-                    }
-                }
-            }
-            if (loaded == false && checked) // When both sides where unticked and one has been ticked now we add it to the graph
-                pushfeedlist(feedid, 1, feed_from_group);
-        });
-
-        // Draw graph
-        graph_reloaddraw();
-    });
-
-    //******************************************
-    // Actions editor user's feeds
-    // ******************************************/
-    $("body").on("click", ".tagheading", function () {
-        var tag = $(this).attr("tag");
-        var e = $(".tagbody[tag='" + tag + "']");
-        if (e.is(":visible"))
-            e.hide();
-        else
-            e.show();
-    });
-
-    //******************************************
-    // Actions editor displaying groups
-    // ******************************************/
-    $('#select-group').on('change', function () {
-        var groupindex = $(this).val();
-        populate_group_table(groupindex);
-        load_feed_selector();
-        if (groups[groupindex].role != 1&&groups[groupindex].role != 2) {
-            $('#graph-save').hide();
-            $('#graph-delete').hide();
-        }
-        else {
-            $('#graph-save').show();
-            $('#graph-delete').show();
-        }
-    });
-    $('body').on('click', '.user-name', function () {
-        var user = $(this).attr('user');
-        $('.feed-tag[user="' + user + '"]').toggle();
-    });
-    $('body').on('click', '.feed-tag', function () {
-        var user = $(this).attr('user');
-        var tag = $(this).attr('tag');
-        $('.feed[user="' + user + '"][tag="' + tag + '"]').toggle();
-    });
-
-}
-
-/******************************************
- Functions
- ******************************************/
-
-function pushfeedlist(feedid, yaxis, feed_from_group) {
-    if (feed_from_group === false) {
-        var index = getfeedindex(feedid);
-        feedlist.push({id: feedid, name: feeds[index].name, tag: feeds[index].tag, yaxis: yaxis, fill: 0, scale: 1.0, delta: false, getaverage: false, dp: 1, plottype: 'lines'});
-    }
-    else {
-        var feed = getfeedfromgroups(feedid);
-        feedlist.push({id: feed.id, source: 'group', name: feed.name, tag: feed.tag, yaxis: yaxis, fill: 0, scale: 1.0, delta: false, getaverage: false, dp: 1, plottype: 'lines'});
-    }
-}
-
-function graph_reloaddraw() {
-    graph_reload();
-    graph_draw();
-}
-
-function graph_reload()
-{
-    var intervalms = view.interval * 1000;
-    view.start = Math.round(view.start / intervalms) * intervalms;
-    view.end = Math.round(view.end / intervalms) * intervalms;
-    
-    $("#request-start").val(view.start*0.001);
-    $("#request-end").val(view.end*0.001);
-    $("#request-interval").val(view.interval);
-    $("#request-limitinterval").attr("checked",view.limitinterval);
-    
-    var errorstr = "";    
-    
-    for (var z in feedlist)
-    {
-        var mode = "&interval="+view.interval+"&skipmissing="+skipmissing+"&limitinterval="+view.limitinterval;
-        if (requesttype!="interval") mode = "&mode="+requesttype;
-
-        var action = "feed/";
-        if (feedlist[z].source == 'group') action = "group/getfeed/";
-        var method = "data";
-        if (feedlist[z].getaverage) method = "average";
-        var request = path+action+method+".json?id="+feedlist[z].id+"&start="+view.start+"&end="+view.end + mode;
-        
-        $.ajax({                                      
-            url: request,
-            async: false,
-            dataType: "text",
-            success: function(data_in) {
-            
-                // 1) Check validity of json data, or show error
-                var valid = true;
-                try {
-                    feedlist[z].data = JSON.parse(data_in);
-                    if (feedlist[z].data.success!=undefined) valid = false;
-                } catch (e) {
-                    valid = false;
-                }
-                
-                if (!valid) errorstr += "<div class='alert alert-danger'><b>Request error</b> "+data_in+"</div>";
-            }
-        });
-        
-        if (feedlist[z].delta) {
-            for (var i=1; i<feedlist[z].data.length; i++) {
-                if (feedlist[z].data[i][1]!=null && feedlist[z].data[i-1][1]!=null) {
-                    var delta = feedlist[z].data[i][1] - feedlist[z].data[i-1][1];
-                    feedlist[z].data[i-1][1] = delta;
-                } else {
-                    feedlist[z].data[i][1] = 0;
-                    feedlist[z].data[i-1][1] = null;
-                }
-            }
-            feedlist[z].data[feedlist[z].data.length-1][1] = null;
-        }
-        
-        // Apply a scale to feed values
-        var scale = $(".scale[feedid="+feedlist[z].id+"]").val();
-        if (scale!=undefined) feedlist[z].scale = scale;
-        
-        if (feedlist[z].scale!=undefined && feedlist[z].scale!=1.0) {
-            for (var i=0; i<feedlist[z].data.length; i++) {
-                if (feedlist[z].data[i][1]!=null) {
-                    feedlist[z].data[i][1] = feedlist[z].data[i][1] * feedlist[z].scale;
-                }
-            }
-        }
-    }
-    
-    if (errorstr!="") {
-        $("#error").html(errorstr).show();
-    } else {
-        $("#error").hide();
-    }
-}
-
-function graph_draw()
-{
-    var options = {
-        lines: { fill: false },
-        xaxis: { 
-            mode: "time", timezone: "browser", 
-            min: view.start, max: view.end
-        },
-	      yaxes: [ { }, {
-			      // align if we are to the right
-			      alignTicksWithAxis: 1,
-			      position: "right"
-			      //tickFormatter: euroFormatter
-		    } ],
-        grid: {hoverable: true, clickable: true},
-        selection: { mode: "x" },
-        legend: { show: false, position: "nw", toggle: true },
-        toggle: { scale: "visible" },
-        touch: { pan: "x", scale: "x" }
-    }
-    
-    if (showlegend) options.legend.show = true;
-    
-    if (yaxismin!='auto' && yaxismin!='') { options.yaxes[0].min = yaxismin; options.yaxes[1].min = yaxismin; }
-    if (yaxismax!='auto' && yaxismax!='') { options.yaxes[0].max = yaxismax; options.yaxes[1].max = yaxismax; }
-    
-    var time_in_window = (view.end - view.start) / 1000;
-    var hours = Math.floor(time_in_window / 3600);
-    var mins = Math.round(((time_in_window / 3600) - hours)*60);
-    if (mins!=0) {
-        if (mins<10) mins = "0"+mins;
-    } else {
-        mins = "";
-    }
-    
-    if (!embed) $("#window-info").html("<b>Window:</b> "+printdate(view.start)+" > "+printdate(view.end)+", <b>Length:</b> "+hours+"h"+mins+" ("+time_in_window+" seconds)");
-    
-    plotdata = [];
-    for (var z in feedlist) {
-        if (feedlist[z].data.success == undefined) {
-            var data = feedlist[z].data;
-            // Hide missing data (only affects the plot view)
-            if (!showmissing) {
-                var tmp = [];
-                for (var n in data) {
-                    if (data[n][1]!=null) tmp.push(data[n]);
-                }
-                data = tmp;
-            }
-            // Add series to plot
-            var label = "";
-            if (typeof (vis_mode) == 'string' && vis_mode == 'groups' && embed != true) {
-                var user = feed_belongs_to(feedlist[z].id);
-                label += user.username + ': '; // 
-            }
-            if (showtag) label += feedlist[z].tag + ": ";
-            label += feedlist[z].name;
-
-            var plot = {label: label, data: data, yaxis: feedlist[z].yaxis, color: feedlist[z].color};
-            if (feedlist[z].plottype == 'lines') plot.lines = {show: true, fill: feedlist[z].fill};
-            if (feedlist[z].plottype == 'bars') plot.bars = {show: true, barWidth: view.interval * 1000 * 0.75};
-            plotdata.push(plot);
-        }
-    }
-    $.plot($('#placeholder'), plotdata, options);
-    
-    if (!embed) {
-        
-        for (var z in feedlist) {
-            feedlist[z].stats = stats(feedlist[z].data);
-        }
-        
-        var default_linecolor = "000";
-        var out = "";
-        for (var z in feedlist) {
-            var dp = feedlist[z].dp;
-        
-            var apiurl = path+"feed/data.json?id="+feedlist[z].id+"&start="+view.start+"&end="+view.end+"&interval="+view.interval+"&skipmissing="+skipmissing+"&limitinterval="+view.limitinterval;
-         
-         
-            out += "<tr>";
-            out += "<td>"+feedlist[z].id+":"+feedlist[z].tag+":"+feedlist[z].name+"</td>";
-            out += "<td><select class='plottype' feedid="+feedlist[z].id+" style='width:80px'>";
-            
-            var selected = "";
-            if (feedlist[z].plottype == "lines") selected = "selected"; else selected = "";
-            out += "<option value='lines' "+selected+">Lines</option>";
-            if (feedlist[z].plottype == "bars") selected = "selected"; else selected = "";
-            out += "<option value='bars' "+selected+">Bars</option>";
-            out += "</select></td>";
-            out += "<td><input class='linecolor' feedid="+feedlist[z].id+" style='width:50px' type='color' value='#"+default_linecolor+"'></td>";
-            out += "<td><input class='fill' type='checkbox' feedid="+feedlist[z].id+"></td>";
-
-            for (var i=0; i<11; i++) out += "<option>"+i+"</option>";
-            out += "</select></td>";
-            out += "<td style='text-align:center'><input class='scale' feedid="+feedlist[z].id+" type='text' style='width:50px' value='1.0' /></td>";
-            out += "<td style='text-align:center'><input class='delta' feedid="+feedlist[z].id+" type='checkbox'/></td>";
-            out += "<td style='text-align:center'><input class='getaverage' feedid="+feedlist[z].id+" type='checkbox'/></td>";
-            out += "<td><select feedid="+feedlist[z].id+" class='decimalpoints' style='width:50px'><option>0</option><option>1</option><option>2</option><option>3</option></select></td>";
-            out += "<td><button feedid="+feedlist[z].id+" class='histogram'>Histogram <i class='icon-signal'></i></button></td>";
-            // out += "<td><a href='"+apiurl+"'><button class='btn btn-link'>API REF</button></a></td>";
-            out += "</tr>";
-        }
-        $("#feed-controls").html(out);
-        
-        var out = "";
-        for (var z in feedlist) {
-            out += "<tr>";
-            out += "<td>"+feedlist[z].id+":"+feedlist[z].tag+": "+feedlist[z].name+"</td>";
-            var quality = Math.round(100 * (1-(feedlist[z].stats.npointsnull/feedlist[z].stats.npoints)));
-            out += "<td>"+quality+"% ("+(feedlist[z].stats.npoints-feedlist[z].stats.npointsnull)+"/"+feedlist[z].stats.npoints+")</td>";
-            if(!isNaN(Number(feedlist[z].stats.minval))) out += "<td>"+feedlist[z].stats.minval.toFixed(dp)+"</td>";
-            if(!isNaN(Number(feedlist[z].stats.maxval))) out += "<td>"+feedlist[z].stats.maxval.toFixed(dp)+"</td>";
-            out += "<td>"+feedlist[z].stats.diff.toFixed(dp)+"</td>";
-            out += "<td>"+feedlist[z].stats.mean.toFixed(dp)+"</td>";
-            out += "<td>"+feedlist[z].stats.stdev.toFixed(dp)+"</td>";
-            out += "<td>"+Math.round((feedlist[z].stats.mean*time_in_window)/3600)+"</td>";
-            out += "</tr>";
-        }
-        $("#feed-stats").html(out);
-        
-        if (feedlist.length) $(".feed-options").show(); else $(".feed-options").hide();
-        
-        for (var z in feedlist) {
-            $(".decimalpoints[feedid="+feedlist[z].id+"]").val(feedlist[z].dp);
-            if ($(".getaverage[feedid="+feedlist[z].id+"]")[0]!=undefined)
-                $(".getaverage[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].getaverage;
-            if ($(".delta[feedid="+feedlist[z].id+"]")[0]!=undefined)
-                $(".delta[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].delta;
-            $(".scale[feedid="+feedlist[z].id+"]").val(feedlist[z].scale);
-            $(".linecolor[feedid="+feedlist[z].id+"]").val(feedlist[z].color);
-            if ($(".fill[feedid="+feedlist[z].id+"]")[0]!=undefined)
-                $(".fill[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].fill;
-        }
-        
-        if (showcsv) printcsv();
-    }
-}
-
-function getfeed(id) 
-{
-    for (var z in feeds) {
-        if (feeds[z].id == id) {
-            return feeds[z];
-        }
-    }
-    return false;
-}
-
-function getfeedpublic(feedid) {
-    var f = {};
-    $.ajax({                                      
-        url: path+"feed/aget.json?id="+feedid,
-        async: false,
-        dataType: "json",
-        success: function(result) {
-            f=result;
-            if (f.id==undefined) f = false;
-        }
-    });
-    return f;
-}
-
-function getfeedindex(id) 
-{
-    for (var z in feeds) {
-        if (feeds[z].id == id) {
-            return z;
-        }
-    }
-    return false;
-}
-
-function getfeedfromgroups(feedid) {
-    var feed_to_return = {};
-    groups.forEach(function (group) {
-        group.users.forEach(function (user) {
-            user.feedslist.forEach(function (feed) {
-                if (feedid == feed.id)
-                    feed_to_return = JSON.parse(JSON.stringify(feed));
-            });
-        });
-    });
-    return feed_to_return;
-}
-
-function populate_group_table(groupindex) {
-    $('#group-table').html('');
-    if (groups[groupindex].users.success == false) { // when user role is "member"
-        void(0); // do nothing
-    }
-    else {
-        var users = groups[groupindex].users;
-        users.forEach(function (user, index) {
-            $('#group-table').append('<div class="user-name" user="' + user.username + '">' + user.username + '</div>');
-            var out = '';
-            // Add tags
-            var tags_list = [];
-            user.feedslist.forEach(function (feed) {
-                if (tags_list.indexOf(feed.tag) == -1) {
-                    tags_list.push(feed.tag);
-                    out += "<div class='feed-tag hide' tag='" + feed.tag + "' user='" + user.username + "'>";
-                    out += feed.tag + "<input class='feed-tag-checkbox-right' type='checkbox' tag='" + feed.tag + "' uid='" + user.userid + "' />" + "<input class='feed-tag-checkbox-left' type='checkbox' tag='" + feed.tag + "' uid='" + user.userid + "' />";
-                    // Add feed tah have the current tag
-                    user.feedslist.forEach(function (feed_again) {
-                        if (feed_again.tag == feed.tag) {
-                            out += "<div class='feed user-feed  hide' user='" + user.username + "' tag='" + feed_again.tag + "' uid='" + user.userid + "'>";
-                            out += "<div class='feed-select'><input class='feed-select-right' source='group' userid='" + user.userid + "' user='" + user.username + "' tag='" + feed_again.tag + "' groupid='" + groups[groupindex].groupid + "' feedid='" + feed_again.id + "' type='checkbox' /></div>";
-                            out += "<div class='feed-select'><input class='feed-select-left' source='group' userid='" + user.userid + "' user='" + user.username + "' tag='" + feed_again.tag + "' groupid='" + groups[groupindex].groupid + "' feedid='" + feed_again.id + "' type='checkbox' /></div>";
-                            out += "<div class='feed-name' title='" + feed_again.name + "'>" + feed_again.name + "</div>";
-                            out += "</div>"; // feed
-                        }
-                    });
-                    out += "</div>";
-                }
-            });
-            $('#group-table').append(out);
-        });
-    }
-}
-
-function get_group_index(groupid) {
-    for (var index in groups) {
-        if (groups[index].groupid == groupid)
-            return index;
-    }
-}
-
-function feed_belongs_to(feedid) {
-    for (var group in groups) {
-        for (var user in groups[group].users) {
-            for (var feed in groups[group].users[user].feedslist) {
-                if (groups[group].users[user].feedslist[feed].id == feedid)
-                    return groups[group].users[user];
-            }
-        }
-    }
-}
-
-//----------------------------------------------------------------------------------------
-// Print CSV
-//----------------------------------------------------------------------------------------
-function printcsv()
-{
-    var timeformat = $("#csvtimeformat").val();
-    var nullvalues = $("#csvnullvalues").val();
-    
-    var csvout = "";
-
-    var value = [];
-    var lastvalue = [];
-    var start_time = feedlist[0].data[0][0];
-    for (var z in feedlist[0].data) {
-        var line = [];
-        // Different time format options for csv output
-        if (timeformat=="unix") {
-            line.push(Math.round(feedlist[0].data[z][0] / 1000));
-        } else if (timeformat=="seconds") {
-            line.push(Math.round((feedlist[0].data[z][0]-start_time)/1000));
-        } else if (timeformat=="datestr") {
-            // Create date time string
-            var t = new Date(feedlist[0].data[z][0]);
-            var year = t.getFullYear();
-            var month = t.getMonth()+1;
-            if (month<10) month = "0"+month;
-            var day = t.getDate();
-            if (day<10) day = "0"+day;
-            var hours = t.getHours();
-            if (hours<10) hours = "0"+hours;
-            var minutes = t.getMinutes();
-            if (minutes<10) minutes = "0"+minutes;
-            var seconds = t.getSeconds();
-            if (seconds<10) seconds = "0"+seconds;
-            
-            var formatted = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
-            line.push(formatted);
-        }
-        
-        var nullfound = false;
-        for (var f in feedlist) {
-            if (value[f]==undefined) value[f] = null;
-            lastvalue[f] = value[f];
-            if (feedlist[f].data[z]!=undefined) {
-            if (feedlist[f].data[z][1]==null) nullfound = true;
-            if (feedlist[f].data[z][1]!=null || nullvalues=="show") value[f] = feedlist[f].data[z][1];
-            if (value[f]!=null) value[f] = (value[f]*1.0).toFixed(feedlist[f].dp);
-            line.push(value[f]+"");
-            }
-        }
-        
-        if (nullvalues=="remove" && nullfound) {
-            // pass
-        } else { 
-            csvout += line.join(", ")+"\n";
-        }
-    }
-    $("#csv").val(csvout);
-}
-
-//----------------------------------------------------------------------------------------
-// Histogram feature
-//----------------------------------------------------------------------------------------
-
-// Launch histogram mode for a given feed
-$("body").on("click",".histogram",function(){
-    $("#navigation").hide();
-    $("#histogram-controls").show();
-    var feedid = $(this).attr("feedid");
-    active_histogram_feed = feedid;
-    var type = $("#histogram-type").val();
-    var resolution = 1;
-    
-    var index = 0;
-    for (var z in feedlist) {
-      if (feedlist[z].id==feedid) {
-        index = z;
-        break;
-      }
-    }
-    
-    if (feedlist[index].stats.diff<5000) resolution = 10;
-    if (feedlist[index].stats.diff<100) resolution = 0.1;
-    $("#histogram-resolution").val(resolution);
-    
-    histogram(feedid,type,resolution);
-});
-
-// Chage the histogram resolution
-$("#histogram-resolution").change(function(){
-    var type = $("#histogram-type").val();
-    var resolution = $("#histogram-resolution").val();
-    histogram(active_histogram_feed,type,resolution);
-});
-
-// time at value or power to kwh
-$("#histogram-type").change(function(){
-    var type = $("#histogram-type").val();
-    var resolution = $("#histogram-resolution").val();
-    histogram(active_histogram_feed,type,resolution);
-});
-
-// return to power graph
-$("#histogram-back").click(function(){
-    $("#navigation").show();
-    $("#histogram-controls").hide();
-    graph_draw();
-});
-
-// Draw the histogram
-function histogram(feedid,type,resolution) 
-{    
-    var histogram = {};
-    var total_histogram = 0;
-    var val = 0;
-    
-    // Get the feedlist index of the feedid
-    var index = -1;
-    for (var z in feedlist)
-      if (feedlist[z].id==feedid) index = z;
-    if (index==-1) return false;
-    
-    // Load data from feedlist object
-    var data = feedlist[index].data;
-    
-    for (var i=1; i<data.length; i++) {
-      if (data[i][1]!=null) {
-        val = data[i][1];
-      }
-      var key = Math.round(val/resolution)*resolution;
-      if (histogram[key]==undefined) histogram[key] = 0;
-      
-      var t = (data[i][0] - data[i-1][0])*0.001;
-      
-      var inc = 0;
-      if (type=="kwhatpower") inc = (val * t)/(3600.0*1000.0);
-      if (type=="timeatvalue") inc = t;
-      histogram[key] += inc;
-      total_histogram += inc;
-    }
-
-    // Sort and convert to 2d array
-    var tmp = [];
-    for (var z in histogram) tmp.push([z*1,histogram[z]]);
-    tmp.sort(function(a,b){if (a[0]>b[0]) return 1; else return -1;});
-    histogram = tmp;
-
-    var options = {
-        series: { bars: { show: true, barWidth:resolution*0.8 } },
-        grid: {hoverable: true}
-    };
-
-    var label = "";
-    if (showtag) label += feedlist[index].tag+": ";
-    label += feedlist[index].name;
-    
-    $.plot("#placeholder",[{label:label, data:histogram}], options);
-}
-
-//----------------------------------------------------------------------------------------
-// Saved graph's feature
-//----------------------------------------------------------------------------------------
-$("#graph-select").change(function() {
-    var name = $(this).val();
-    $("#graph-name").val(name);
-    $("#graph-delete").show();
-    var graph = graph_from_name(name);
-    $("#graph-id").html(graph.id);
-    // view settings
-    view.start = graph.start;
-    view.end = graph.end;
-    view.interval = graph.interval;
-    view.limitinterval = graph.limitinterval;
-    view.fixinterval = graph.fixinterval;
-    floatingtime = graph.floatingtime;
-    yaxismin = graph.yaxismin;
-    yaxismax = graph.yaxismax;
-    // show settings
-    showmissing = graph.showmissing;
-    showtag = graph.showtag;
-    showlegend = graph.showlegend;
-    // visualization mode
-    if (graph.source == 'groups') {
-        $("[name='vis-mode-toggle']").bootstrapSwitch('state', false);
-        $('#vis-mode-groups').show();
-        $('#vis-mode-user').hide();
-        $('#select-group').val(get_group_index(graph.groupid)).trigger('change');
-    } else {
-        $("[name='vis-mode-toggle']").bootstrapSwitch('state', true);
-        $('#vis-mode-groups').hide();
-        $('#vis-mode-user').show();
-    }
-
-    // feedlist
-    feedlist = graph.feedlist;
-    if (floatingtime) {
-        var timewindow = view.end - view.start;
-        var now = Math.round(+new Date * 0.001)*1000;
-        view.end = now;
-        view.start = view.end - timewindow;
-    }
-
-    $("#yaxis-min").val(yaxismin);
-    $("#yaxis-max").val(yaxismax);
-    $("#request-fixinterval")[0].checked = view.fixinterval;
-    $("#request-limitinterval")[0].checked = view.limitinterval;
-    $("#showmissing")[0].checked = showmissing;
-    $("#showtag")[0].checked = showtag;
-    $("#showlegend")[0].checked = showlegend;
-    
-    load_feed_selector();
-
-    graph_reloaddraw();
-});
-
-$("#graph-name").keyup(function(){
-    var name = $(this).val();
-    
-    if (graph_exists(name)) {
-        $("#graph-delete").show(); 
-    } else { 
-        $("#graph-delete").hide();
-    }
-});
-
-$("#graph-delete").click(function() {
-    var name = $("#graph-name").val();
-    var graph = graph_from_name(name);
-    if (graph != null) {
-        graph_delete(graph.id);
-        feedlist = [];
-        graph_reloaddraw();
-        $("#graph-name").val("");
-        load_feed_selector();
-    }
-});
-
-$("#graph-save").click(function() {
-    var name = $("#graph-name").val();
-    
-    if (name==undefined || name=="") {
-        alert("Please enter a name for the graph you wish to save");
-        return false;
-    }
-    
-    var now = Math.round(+new Date * 0.001)*1000;
-    if (Math.abs(now - view.end)<120000) {
-        floatingtime = 1;
-    }
-    
-    var graph_to_save = {
-        name: name,
-        start: view.start,
-        end: view.end,
-        interval: view.interval,
-        limitinterval: view.limitinterval,
-        fixinterval: view.fixinterval,
-        floatingtime: floatingtime,
-        yaxismin: yaxismin,
-        yaxismax: yaxismax,
-        showmissing: showmissing,
-        showtag: showtag,
-        showlegend: showlegend,
-        feedlist: JSON.parse(JSON.stringify(feedlist))
-    };
-    if (vis_mode == 'groups') {
-        graph_to_save.source = 'groups';
-        var group_index = $('#select-group').val();
-        graph_to_save.groupid = groups[group_index].groupid;
-    }
-
-    var graph = graph_from_name(name);
-    // Update or append
-    if (graph == null) {
-        graph_create(graph_to_save);
-    } else {
-        graph_to_save.id = graph.id;
-        graph_update(graph_to_save);
-    }
-    savedgraphs = graph_load_savedgraphs();
-
-    $("#graph-select").val(name);
-});
-
-function graph_exists(name) {
-    if (graph_from_name(name) != null)
-        return true;
-    return false;
-}
-
-function graph_from_name(name) {
-    // Search in user's graphs
-    for (var z in savedgraphs.user) {
-        if (savedgraphs.user[z].name == name)
-            return savedgraphs.user[z];
-    }
-    // Search in groups graphs
-    if (savedgraphs.groups != undefined) {
-        for (var groupname in savedgraphs.groups) {
-            for (var z in savedgraphs.groups[groupname])
-                if (savedgraphs.groups[groupname][z].name == name)
-                    return savedgraphs.groups[groupname][z];
-        }
-    }
-    return null;
-}
-
-function graph_load_savedgraphs()
-{
-    $.ajax({                                      
-        url: path+"/graph/getall",
-        async: true,
-        dataType: "json",
-        success: function(result) {
-            savedgraphs = result;
-            
-            var out = "<option>Select graph:</option>";
-            // User's graphs
-            if (savedgraphs.user.length > 0) {
-                out += "<optgroup label='Your graphs'>";
-                for (var z in savedgraphs.user) {
-                    var name = savedgraphs.user[z].name;
-                    out += "<option>" + name + "</option>";
-                }
-                out += '</optgroup>';
-            }
-            // Group graphs
-            if (savedgraphs.groups != undefined) {
-                for (var group_name in savedgraphs.groups) {
-                    out += "<optgroup label='Group:" + group_name + " '>";
-                    for (var z in savedgraphs.groups[group_name])
-                        out += "<option>" + savedgraphs.groups[group_name][z].name + "</option>";
-                    out += "</optgroup>";
-                }
-            }
-            $("#graph-select").html(out);
-        }
-    });
-}
-function graph_create(data) {
-
-    // Clean feedlist of data and stats that dont need to be saved
-    for (var i in data.feedlist) {
-        delete data.feedlist[i].data
-        delete data.feedlist[i].stats;
-    }
-
-    // Group graph
-    if (data.source == 'groups') {
-        var url = path + "/graph/creategroupgraph";
-        var data = "data=" + JSON.stringify(data) + "&groupid=" + data.groupid;
-    }
-    else {
-        var url = path + "/graph/create";
-        var data = "data=" + JSON.stringify(data);
-    }
-    // Save 
-    $.ajax({
-        method: "POST",
-        url: url,
-        data: data,
-        async: true,
-        dataType: "json",
-        success: function (result) {
-            if (!result.success)
-                alert("ERROR: " + result.message);
-        }
-    });
-    graph_load_savedgraphs();
-}
-
-function graph_update(data) {
-
-    // Clean feedlist of data and stats that dont need to be saved
-    for (var i in data.feedlist) {
-        delete data.feedlist[i].data
-        delete data.feedlist[i].stats;
-    }
-
-    // Group graph
-    if (data.source == 'groups') {
-        var url = path + "/graph/updategroupgraph";
-        var data_string = "id=" + data.id + "&data=" + JSON.stringify(data) + "&groupid=" + data.groupid;
-    }
-    else {
-        var url = path + "/graph/update";
-        var data_string = "id=" + data.id + "&data=" + JSON.stringify(data);
-    }
-    // Save 
-    $.ajax({
-        method: "POST",
-        url: url,
-        data: data_string,
-        async: true,
-        dataType: "json",
-        success: function (result) {
-            console.log(result);
-            if (!result.success)
-                alert("ERROR: " + result.message);
-        }
-    });
-}
-
-function graph_delete(id) {
-    if (is_group_graph(id))
-        var url = path + "/graph/deletegroupgraph";
-    else
-        var url = path + "/graph/delete";
-
-    $.ajax({
-        method: "POST",
-        url: url,
-        data: "id="+id,
-        async: true,
-        dataType: "json",
-        success: function(result) {
-            if (!result.success) alert("ERROR: "+result.message);
-        }
-    });
-    
-    graph_load_savedgraphs();
-}
-
-function is_group_graph(id) {
-    if (savedgraphs.groups != undefined) {
-        for (var group in savedgraphs.groups)
-            for (var z in savedgraphs.groups[group])
-                if (savedgraphs.groups[group][z].id == id)
-                    return true;
-    }
-    return false;
-}
-// ----------------------------------------------------------------------------------------
-// Sidebar
-// ----------------------------------------------------------------------------------------
-$("#sidebar-open").click(function(){
-    $("#sidebar-wrapper").css("left","250px");
-    $("#sidebar-close").show();
-});
-
-$("#sidebar-close").click(function(){
-    $("#sidebar-wrapper").css("left","0");
-    $("#sidebar-close").hide();
-});
-
-function sidebar_resize() {
-    var width = $(window).width();
-    var height = $(window).height();
-    $("#sidebar-wrapper").height(height-41);
-    
-    if (width<1024) {
-        $("#sidebar-wrapper").css("left","0");
-        $("#wrapper").css("padding-left","0");
-        $("#sidebar-open").show();
-    } else {
-        $("#sidebar-wrapper").css("left","250px");
-        $("#wrapper").css("padding-left","250px");
-        $("#sidebar-open").hide();
-        $("#sidebar-close").hide();
-    }
-}
-
-// ----------------------------------------------------------------------------------------
-function load_feed_selector() {
-    $(".feed-select-left").prop('checked','');
-    $(".feed-select-right").prop('checked','');
-    for (var z=0; z<feedlist.length; z++) {
-        var feedid = feedlist[z].id;
-        var tag = feedlist[z].tag;
-        if (tag=="") tag = "undefined";
-        if (feedlist[z].yaxis==1) {
-            $(".feed-select-left[feedid="+feedid+"]").prop('checked','checked');
-            $(".tagbody[tag='"+tag+"']").show();
-        }
-        if (feedlist[z].yaxis==2) {
-            $(".feed-select-right[feedid="+feedid+"]").prop('checked','checked');
-            $(".tagbody[tag='"+tag+"']").show();
-        }
-
-        $(".feed-select-right[feedid=" + feedid + "]").each(function (index) { // We only need to use on e column, the aim is to reach the parent elements
-            if ($(this).attr('user') != undefined) {
-                $('.user-feed[user=' + $(this).attr('user') + '][tag="' + tag + '"]').show();
-                $('.feed-tag[user=' + $(this).attr('user') + ']').show();
-            }
-        });
-    }
-}
-
-function printdate(timestamp)
-{
-    var date = new Date();
-    var thisyear = date.getFullYear()-2000;
-    
-    var date = new Date(timestamp);
-    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-    var year = date.getFullYear()-2000;
-    var month = months[date.getMonth()];
-    var day = date.getDate();
-    
-    var minutes = date.getMinutes();
-    if (minutes<10) minutes = "0"+minutes;
-    
-    var datestr = date.getHours()+":"+minutes+" "+day+" "+month;
-    if (thisyear!=year) datestr +=" "+year;
-    return datestr;
-};
diff --git a/group_view.php b/group_view.php
deleted file mode 100644
index 66aedad..0000000
--- a/group_view.php
+++ /dev/null
@@ -1,367 +0,0 @@
-<?php
-defined('EMONCMS_EXEC') or die('Restricted access');
-    /*
-    All Emoncms code is released under the GNU Affero General Public License.
-    See COPYRIGHT.txt and LICENSE.txt.
-
-    ---------------------------------------------------------------------
-    Emoncms - open source energy visualisation
-    Part of the OpenEnergyMonitor project:
-    http://openenergymonitor.org
-    */
-
-    global $path, $embed;
-    global $fullwidth;
-    $fullwidth = true;
-    
-    $userid = 0;
-    if (isset($_GET['userid'])) $userid = (int) $_GET['userid'];
-    
-    $feedidsLH = "";
-    if (isset($_GET['feedidsLH'])) $feedidsLH = $_GET['feedidsLH'];
-
-    $feedidsRH = "";
-    if (isset($_GET['feedidsRH'])) $feedidsRH = $_GET['feedidsRH'];    
-?>
-
-<!--[if IE]><script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/flot/excanvas.min.js"></script><![endif]-->
-
-
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/flot/jquery.flot.min.js"></script>
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/flot/jquery.flot.time.min.js"></script>
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/flot/jquery.flot.selection.min.js"></script>
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/flot/jquery.flot.touch.min.js"></script>
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/flot/jquery.flot.togglelegend.min.js"></script>
-<!--
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/flot/flot.min.js"></script>
--->
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Modules/graph/vis.helper.js"></script>
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Lib/misc/clipboard.js"></script>
-
-<!-- toggle button to choose User or Group. Documentation: http://bootstrapswitch.com/options.html -->
-<link href="<?php echo $path; ?>Modules/graph/Lib/bootstrap-switch.css" rel="stylesheet">
-<script src="<?php echo $path; ?>Modules/graph/Lib/bootstrap-switch.js"></script>
-<link href="<?php echo $path; ?>Modules/graph/graph.css" rel="stylesheet">
-
-<div id="wrapper">
-    <div id="sidebar-wrapper">
-        <div style="padding-left:10px;">
-            <div id="sidebar-close" style="float:right; cursor:pointer; padding:10px;"><i class="icon-remove"></i></div>
-            <div id="vis-mode-toggle" class="hide">
-                <input type="checkbox" name="vis-mode-toggle" data-on-text="User" data-off-text="Groups" data-label-text="Mode" data-inverse="true" data-on-color="default" data-off-color="default" checked>
-            </div>
-        </div>
-        <div id='vis-mode-user' style="padding-left:10px;">            
-            <h3>Feeds</h3>
-            <div style="overflow-x: hidden; background-color:#f3f3f3; width:100%">
-                <table class="table" id="feeds">
-                </table>
-            </div>
-        </div>
-        <div id='vis-mode-groups' class='hide' style="padding-left:10px;">            
-            <h3>Groups</h3>
-            <select id='select-group'></select>
-            <div style="overflow-x: hidden; background-color:#f3f3f3; width:100%">
-                <div id='group-table' class='table'></div>
-            </div>
-        </div>
-
-        <div id="mygraphs" style="padding:10px;">
-            <h4>My Graphs</h4>
-
-            <select id="graph-select" style="width:215px">
-            </select>
-
-            <br><br>
-            <b>Graph Name:</b><br>
-            <input id="graph-name" type="text" style="width:200px" />
-            <div id="selected-graph-id" style="font-size:10px">Selected graph id: <span id="graph-id">None selected</span></div>
-            <button id="graph-delete" class="btn" style="display:none">Delete</button>
-            <button id="graph-save" class="btn">Save</button>
-        </div>
-    </div>
-
-    <div id="page-content-wrapper" style="max-width:1280px">
-        
-        <h3>Data viewer</h3> 
-
-        <div id="error" style="display:none"></div>
-
-        <div id="navigation" style="padding-bottom:5px;">
-            <button class="btn" id="sidebar-open"><i class="icon-list"></i></button>
-            <button class='btn graph_time' type='button' time='1'>D</button>
-            <button class='btn graph_time' type='button' time='7'>W</button>
-            <button class='btn graph_time' type='button' time='30'>M</button>
-            <button class='btn graph_time' type='button' time='365'>Y</button>
-            <button id='graph_zoomin' class='btn'>+</button>
-            <button id='graph_zoomout' class='btn'>-</button>
-            <button id='graph_left' class='btn'><</button>
-            <button id='graph_right' class='btn'>></button>
-            
-            <div class="input-prepend input-append" style="float:right; margin-right:22px">
-            <span class="add-on">Show</span>
-            <span class="add-on">missing data: <input type="checkbox" id="showmissing" style="margin-top:1px" /></span>
-            <span class="add-on">legend: <input type="checkbox" id="showlegend" style="margin-top:1px" /></span>
-            <span class="add-on">feed tag: <input type="checkbox" id="showtag" style="margin-top:1px" /></span>
-            </div>
-            
-            <div style="clear:both"></div>
-        </div>
-
-        <div id="histogram-controls" style="padding-bottom:5px; display:none;">
-            <div class="input-prepend input-append">
-                <span class="add-on" style="width:100px"><b>Histogram</b></span>
-                <span class="add-on" style="width:75px">Type</span>
-                <select id="histogram-type" style="width:150px">
-                    <option value="timeatvalue" >Time at value</option>
-                    <option value="kwhatpower" >kWh at Power</option>
-                </select>
-                <span class="add-on" style="width:75px">Resolution</span>
-                <input id="histogram-resolution" type="text" style="width:60px"/>
-            </div>
-            
-            <button id="histogram-back" class="btn" style="float:right">Back to main view</button>
-        </div>
-
-        <div id="placeholder_bound" style="width:100%; height:400px;">
-            <div id="placeholder"></div>
-        </div>
-
-        <div id="info" style="padding-top:20px; display:none">
-            
-            <div class="input-prepend" style="padding-right:5px">
-                <span class="add-on" style="width:50px">Start</span>
-                <input id="request-start" type="text" style="width:80px" />
-            </div>
-            
-            <div class="input-prepend" style="padding-right:5px">
-                <span class="add-on" style="width:50px">End</span>
-                <input id="request-end" type="text" style="width:80px" />
-            </div>
-            
-            <div class="input-prepend input-append" style="padding-right:5px">
-                <span class="add-on" style="width:50px">Type</span>
-                <select id="request-type" style="width:130px">
-                    <option value="interval">Fixed Interval</option>
-                    <option>Daily</option>
-                    <option>Weekly</option>
-                    <option>Monthly</option>
-                    <option>Annual</option>
-                </select>
-                
-            </div>
-            <div class="input-prepend input-append" style="padding-right:5px">
-                
-                <span class="fixed-interval-options">
-                    <input id="request-interval" type="text" style="width:60px" />
-                    <span class="add-on">Fix <input id="request-fixinterval" type="checkbox" style="margin-top:1px" /></span>
-                    <span class="add-on">Limit to data interval <input id="request-limitinterval" type="checkbox" style="margin-top:1px" /></span>
-                </span>
-            </div>
-            
-            <div class="input-prepend input-append">
-                <span class="add-on" style="width:50px">Y-axis:</span>
-                <span class="add-on" style="width:30px">min</span>
-                <input id="yaxis-min" type="text" style="width:50px" value="auto"/>
-
-                <span class="add-on" style="width:30px">max</span>
-                <input id="yaxis-max" type="text" style="width:50px" value="auto"/>
-                
-                <button id="reload" class="btn">Reload</button>
-            </div>
-            
-            <div id="window-info" style=""></div><br>
-            
-            <div class="feed-options hide">
-                <div class="feed-options-header">
-                    <div class="feed-options-title">Feeds in view</div>
-                    <div class="feed-options-show-options hide">Show options</div>
-                    <div class="feed-options-show-stats">Show statistics</div>
-                </div>
-
-                
-                <table id="feed-options-table" class="table">
-                    <tr><th>Feed</th><th>Type</th><th>Color</th><th>Fill</th><th style='text-align:center'>Scale</th><th style='text-align:center'>Delta</th><th style='text-align:center'>Average</th><th>DP</th><th style="width:120px"></th></tr>
-                    <tbody id="feed-controls"></tbody>
-                </table>
-                
-                <table id="feed-stats-table" class="table hide">
-                    <tr><th>Feed</th><th>Quality</th><th>Min</th><th>Max</th><th>Diff</th><th>Mean</th><th>Stdev</th><th>Wh</th></tr>
-                    <tbody id="feed-stats"></tbody>
-                </table>
-            </div>
-            <br>
-            
-            <div class="input-prepend input-append">
-                <button class="btn" id="showcsv" >Show CSV Output</button>
-                <span class="add-on csvoptions">Time format:</span>
-                <select id="csvtimeformat" class="csvoptions">
-                    <option value="unix">Unix timestamp</option>
-                    <option value="seconds">Seconds since start</option>
-                    <option value="datestr">Date-time string</option>
-                </select>
-                <span class="add-on csvoptions">Null values:</span>
-                <select id="csvnullvalues" class="csvoptions">
-                    <option value="show">Show</option>
-                    <option value="lastvalue">Replace with last value</option>
-                    <option value="remove">Remove whole line</option>
-                </select>
-                <div class="input-append"><!-- just to match the styling of the other items -->
-                    <button onclick="copyToClipboardCustomMsg(document.getElementById('csv'), 'copy-csv-feedback','Copied')" class="csvoptions btn" id="copy-csv" type="button">Copy <i class="icon-share-alt"></i></button>
-                </div>
-                <span id="copy-csv-feedback" class="csvoptions"></span>
-            </div> 
-            
-            
-            <textarea id="csv" style="width:98%; height:500px; display:none; margin-top:10px"></textarea>
-        </div>
-    </div>
-</div>
-
-<script language="javascript" type="text/javascript" src="<?php echo $path;?>Modules/graph/group_graph.js?v=1"></script>
-
-<script>
-    var session = <?php echo $session; ?>;
-    var group_support = <?php echo $group_support === 0 ? 'false' : 'true'; ?>;
-    var vis_mode = 'user';
-
-    /*********************************************
-     Load user feeds and groups (users and feeds)
-     *********************************************/
-    if (session) {
-        // Load user feeds
-        $.ajax({
-            url: path + "/feed/list.json",
-            async: false,
-            dataType: "json",
-            success: function (data_in) {
-                feeds = data_in;
-            }});
-
-        // Only show visualization mode switcher if groups module is installed and the user is member of a group (different than "passive member")
-        if (group_support === true) {
-            // Load user groups
-            $.ajax({url: path + "/group/mygroups.json", async: false, dataType: "json", success: function (data_in) {
-                    groups = data_in;
-                }});
-            if (groups.length === 0)
-                group_support = false; // Disable group support
-            else
-                $('#vis-mode-toggle').show();
-        }
-    }
-
-    /*********************************************
-     Init editor
-     *********************************************/
-    graph_init_editor();
-
-    /*********************************************
-     Assign active feedid from URL
-     *********************************************/
-    var urlparts = window.location.pathname.split("graph/");
-    if (urlparts.length == 2) {
-        var feedids = urlparts[1].split(",");
-        for (var z in feedids) {
-            var feedid = parseInt(feedids[z]);
-
-            if (feedid) {
-                if (session) {
-                    f = getfeed(feedid);
-                    feedlist.push({id: feedid, name: f.name, tag: f.tag, yaxis: 1, fill: 0, scale: 1.0, delta: false, dp: 1, plottype: 'lines'});
-                } else {
-                    feedlist.push({id: feedid, name: "undefined", tag: "undefined", yaxis: 1, fill: 0, scale: 1.0, delta: false, dp: 1, plottype: 'lines'});
-                }
-            }
-        }
-    }
-    if (urlparts.length > 2) {
-        // get data from URL
-        var groupid = urlparts[2].slice(0, urlparts[2].indexOf(','));
-        var feeds_string = urlparts[2].slice(urlparts[2].indexOf(',') + 1);
-        var feedids = feeds_string.split(",");
-
-        // Display groups mode and select the right group
-        $("[name='vis-mode-toggle']").bootstrapSwitch('state', false);
-        vis_mode = 'groups';
-        $('#vis-mode-groups').show();
-        $('#vis-mode-user').hide();
-        $('#select-group').val(get_group_index(groupid));
-        populate_group_table(get_group_index(groupid));
-
-        // fetch feeds to display
-        for (var z in feedids) {
-            var feedid = parseInt(feedids[z]);
-
-            if (feedid) {
-                if (session) {
-                    f = getfeedfromgroups(feedid);
-                    feedlist.push({id: feedid, name: f.name, tag: f.tag, yaxis: 1, fill: 0, scale: 1.0, delta: false, dp: 1, plottype: 'lines', source: 'group'});
-                } else {
-                    feedlist.push({id: feedid, name: "undefined", tag: "undefined", yaxis: 1, fill: 0, scale: 1.0, delta: false, dp: 1, plottype: 'lines'});
-                }
-            }
-        }
-    }
-
-    /*********************************************
-     Other initialitation
-     *********************************************/
-    sidebar_resize();
-
-    load_feed_selector();
-    if (!session)
-        $("#mygraphs").hide();
-    graph_resize();
-
-    var timeWindow = 3600000 * 24.0 * 7;
-    var now = Math.round(+new Date * 0.001) * 1000;
-    view.start = now - timeWindow;
-    view.end = now;
-    view.calc_interval();
-
-    graph_reloaddraw();
-
-    /******************************************
-     Visualization mode switcher
-     ******************************************/
-    $("[name='vis-mode-toggle']").bootstrapSwitch();
-    $("[name='vis-mode-toggle']").on('switchChange.bootstrapSwitch', function (event, state) {
-        // Clear data viewer
-        $('.feed-select-right').prop('checked', '');
-        $('.feed-select-left').prop('checked', '');
-        feedlist = [];
-        graph_reloaddraw();
-
-        //show the relevant info in editor
-        if (vis_mode == 'user') {
-            vis_mode = 'groups';
-            $('#vis-mode-groups').show();
-            $('#vis-mode-user').hide();
-        }
-        else {
-            vis_mode = 'user';
-            $('#vis-mode-groups').hide();
-            $('#vis-mode-user').show();
-        }
-    });
-
-    // stops a part upgrade error - this change requires emoncms/emoncms repo to also be updated 
-    // keep button hidden if new version of clipboard.js is not available
-    if (typeof copyToClipboardCustomMsg === 'function') {
-        document.getElementById('copy-csv').classList.remove('hidden');
-    } else {
-        copyToClipboardCustomMsg = function () {}
-    }
-
-    /******************************************
-     Functions
-     ******************************************/
-    function get_group_index(groupid) {
-        for (z in groups)
-            if (groups[z].groupid == groupid)
-                return z;
-    }
-</script>
-
-
diff --git a/view.php b/view.php
index 8a2ed6e..a4600d0 100644
--- a/view.php
+++ b/view.php
@@ -12,7 +12,7 @@
 
     global $path, $embed, $session, $settings;
     $userid = 0;
-    $v = 28;
+    $v = 30;
     
     $feedidsLH = "";
     if (isset($_GET['feedidsLH'])) $feedidsLH = $_GET['feedidsLH'];
@@ -54,7 +54,6 @@
 -->
 <script src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js"></script>
 
-<script>var min_feed_interval = <?php echo $min_feed_interval; ?>;</script>
 <script src="<?php echo $path;?>Modules/graph/vis.helper.js?v=<?php echo $v; ?>"></script>
 <script src="<?php echo $path;?>Lib/misc/clipboard.js?v=<?php echo $v; ?>"></script>
 <script src="<?php echo $path; ?>Lib/bootstrap-datetimepicker-0.0.11/js/bootstrap-datetimepicker.min.js"></script>
@@ -275,27 +274,22 @@
 </div>
 
 
-<script>
-    var apikey = "<?php echo $apikey; ?>";
-    var apikeystr = "";
-    if (apikey!="") apikeystr = "&apikey="+apikey;
-</script>
-
+<script src="<?php echo $path;?>Modules/graph/graph.utils.js?v=<?php echo $v; ?>"></script>
+<script src="<?php echo $path;?>Modules/graph/graph.legend.js?v=<?php echo $v; ?>"></script>
 <script src="<?php echo $path;?>Modules/graph/graph.js?v=<?php echo $v; ?>"></script>
+<script src="<?php echo $path;?>Modules/graph/graph.csv.js?v=<?php echo $v; ?>"></script>
+<script src="<?php echo $path;?>Modules/graph/graph.histogram.js?v=<?php echo $v; ?>"></script>
+<script src="<?php echo $path;?>Modules/graph/graph.saved.js?v=<?php echo $v; ?>"></script>
+<script src="<?php echo $path;?>Modules/graph/graph.editor.js?v=<?php echo $v; ?>"></script>
 <script src="<?php echo $path;?>Lib/moment.min.js?v=1"></script>
-<script>
-    var _user = {
-        lang : "<?php if (isset($_SESSION['lang'])) echo $_SESSION['lang']; ?>"
-    }
-    _locale_loaded = function (event){
-        // callback when locale file loaded
-        graph_reload(); // redraw xaxis with correct monthNames and dayNames
-    }
-</script>
 <script src="<?php echo $path; ?>Lib/user_locale.js"></script>
 <script src="<?php echo $path; ?>Lib/misc/gettext.js"></script>
-
 <script>
+    // PHP-injected configuration
+    var min_feed_interval = <?php echo $min_feed_interval; ?>;
+    var apikey = "<?php echo $apikey; ?>";
+    var apikeystr = apikey !== "" ? "&apikey=" + apikey : "";
+
     var session_write = <?php echo $session["write"]; ?>;
     var userid = <?php echo $userid; ?>;
     var feedidsLH = "<?php echo $feedidsLH; ?>";
@@ -303,6 +297,14 @@
     var load_savegraphs = "<?php echo $load_saved; ?>";
     var feeds = false;
 
+    var _user = {
+        lang: "<?php if (isset($_SESSION['lang'])) echo $_SESSION['lang']; ?>"
+    };
+    _locale_loaded = function(event) {
+        // callback when locale file loaded
+        graph_reload(); // redraw xaxis with correct monthNames and dayNames
+    };
+
     var _lang = <?php
         $lang['Select a feed'] = tr('Select a feed');
         $lang['Please select a feed from the Feeds List'] = tr('Please select a feed from the Feeds List');
@@ -321,102 +323,96 @@
         echo json_encode($lang) . ';';
         echo "\n";
     ?>;
-    
+
+    // stops a part upgrade error - this change requires emoncms/emoncms repo to also be updated
+    // keep button hidden if new version of clipboard.js is not available
+    if (typeof copyToClipboardCustomMsg === 'function') {
+        document.getElementById('copy-csv').classList.remove('hidden');
+    } else {
+        copyToClipboardCustomMsg = function() {};
+    }
+
     // Load public feeds for a particular user
     if (public_userid) {
-    
-        var public_username_str = "";
-        if (public_userid) public_username_str = public_username+"/";    
-    
+        const public_username_str = public_userid ? public_username + "/" : "";
         $.ajax({
-            url: path+public_username_str+"feed/list.json", async: false, dataType: "json",
+            url: path + public_username_str + "feed/list.json", async: false, dataType: "json",
             success: function(data_in) { feeds = data_in; }
         });
     } else {
-        // Load user feeds    
+        // Load user feeds
         $.ajax({
-            url: path+"feed/list.json"+apikeystr, async: false, dataType: "json",
+            url: path + "feed/list.json" + apikeystr, async: false, dataType: "json",
             success: function(data_in) { feeds = data_in; }
         });
     }
 
-    // stops a part upgrade error - this change requires emoncms/emoncms repo to also be updated
-    // keep button hidden if new version of clipboard.js is not available
-    if (typeof copyToClipboardCustomMsg === 'function') {
-        document.getElementById('copy-csv').classList.remove('hidden');
-    } else {
-        copyToClipboardCustomMsg = function () {}
-    }
-    
-    if (load_savegraphs=="") {
+    if (load_savegraphs === "") {
 
         // Assign active feedid from URL
-        var urlparts = window.location.pathname.split("graph/");
-        if (urlparts.length==2) {
-            var feedids = urlparts[1].split(",");
-                for (var z in feedids) {
-                    var feedid = parseInt(feedids[z]);
-                     
-                    if (feedid) {
-                        var f = getfeed(feedid);
-                    if (f==false) f = getfeedpublic(feedid);
-                    if (f!=false) feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:1, fill:0, scale: 1.0, average:0, delta:0, dp:1, plottype:'lines'});
-                      }
+        const urlparts = window.location.pathname.split("graph/");
+        if (urlparts.length === 2) {
+            const feedids = urlparts[1].split(",");
+            for (const z in feedids) {
+                const feedid = parseInt(feedids[z]);
+                if (feedid) {
+                    let f = getfeed(feedid);
+                    if (f === false) f = getfeedpublic(feedid);
+                    if (f !== false) feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:1, fill:0, scale:1.0, average:0, delta:0, dp:1, plottype:'lines'});
                 }
+            }
         }
-        
+
         // Left hand feed ids property
-        if (feedidsLH!="") {
-            var feedids = feedidsLH.split(",");
-                for (var z in feedids) {
-                    var feedid = parseInt(feedids[z]);
-                     
-                    if (feedid) {
-                        var f = getfeed(feedid);
-                    if (f==false) f = getfeedpublic(feedid);
-                    if (f!=false) feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:1, fill:0, scale: 1.0, average:0, delta:0, dp:1, plottype:'lines'});
-                      }
+        if (feedidsLH !== "") {
+            const feedids = feedidsLH.split(",");
+            for (const z in feedids) {
+                const feedid = parseInt(feedids[z]);
+                if (feedid) {
+                    let f = getfeed(feedid);
+                    if (f === false) f = getfeedpublic(feedid);
+                    if (f !== false) feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:1, fill:0, scale:1.0, average:0, delta:0, dp:1, plottype:'lines'});
                 }
+            }
         }
 
         // Right hand feed ids property
-        if (feedidsRH!="") {
-            var feedids = feedidsRH.split(",");
-                for (var z in feedids) {
-                    var feedid = parseInt(feedids[z]);
-                     
-                    if (feedid) {
-                        var f = getfeed(feedid);
-                    if (f==false) f = getfeedpublic(feedid);
-                    if (f!=false) feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:2, fill:0, scale: 1.0, average:0, delta:0, dp:1, plottype:'lines'});
-                      }
+        if (feedidsRH !== "") {
+            const feedids = feedidsRH.split(",");
+            for (const z in feedids) {
+                const feedid = parseInt(feedids[z]);
+                if (feedid) {
+                    let f = getfeed(feedid);
+                    if (f === false) f = getfeedpublic(feedid);
+                    if (f !== false) feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:2, fill:0, scale:1.0, average:0, delta:0, dp:1, plottype:'lines'});
                 }
+            }
         }
     }
 
     graph_init_editor();
     load_feed_selector();
-    
+
     graph_resize();
-    
-    var timeWindow = 3600000*24.0*7;
-    var now = Math.round(+new Date * 0.001)*1000;
+
+    const timeWindow = 3600000 * 24.0 * 7;
+    const now = Math.round(+new Date() * 0.001) * 1000;
     view.start = now - timeWindow;
     view.end = now;
     view.calc_interval();
-    
+
     graph_reload();
 
     $(function(){
         // manually add hide/show
-        $('#tables').collapse()
+        $('#tables').collapse();
 
         // trigger hide/show
-        $('.feed-options-title').on('click', function (event) {
+        $('.feed-options-title').on('click', function(event) {
             event.preventDefault();
             event.target.querySelector('.caret').classList.toggle('open');
             $('#tables').collapse('toggle');
-        })
+        });
     });
 
     <?php
@@ -427,7 +423,7 @@
         "Browser" => tr("Browser"),
         "Authentication Required" => tr("Authentication Required")
     );
-    printf("var translations = %s;\n",json_encode($translations));
+    printf("var translations = %s;\n", json_encode($translations));
     ?>
 
 </script>
diff --git a/vis.helper.js b/vis.helper.js
index 6e5f4a2..ccf7079 100644
--- a/vis.helper.js
+++ b/vis.helper.js
@@ -98,50 +98,47 @@ var view =
 
 function stats(data)
 {
-    var sum = 0;
-    var i=0;
-    var minval = 0;
-    var maxval = 0;
-    var npoints = 0;
-    var npointsnull = 0;
-    
-    var val = null;
-    for (var z in data)
+    let sum = 0;
+    let i = 0;
+    let minval = 0;
+    let maxval = 0;
+    let npoints = 0;
+    let npointsnull = 0;
+
+    for (const z in data)
     {
-        var val = data[z][1];                        // 1) only calculated based on present values
-        //if (data[z][1]!=null) val = data[z][1];    // 2) if value is missing use last value
-        if (val!=null) 
+        const val = data[z][1];
+        if (val !== null)
         {
-            if (i==0) {
+            if (i === 0) {
                 maxval = val;
                 minval = val;
             }
-            if (val>maxval) maxval = val;
-            if (val<minval) minval = val;
+            if (val > maxval) maxval = val;
+            if (val < minval) minval = val;
             sum += val;
             i++;
         }
-        if (data[z][1]==null) npointsnull++;
-        
-        npoints ++;
+        if (data[z][1] === null) npointsnull++;
+        npoints++;
     }
-    var mean = sum / i;
-    sum = 0, i=0;
-    for (z in data)
+    const mean = sum / i;
+    sum = 0; i = 0;
+    for (const z in data)
     {
         sum += (data[z][1] - mean) * (data[z][1] - mean);
         i++;
     }
-    var stdev = Math.sqrt(sum / i);
-    
+    const stdev = Math.sqrt(sum / i);
+
     return {
-        "minval":minval,
-        "maxval":maxval,
-        "diff":maxval-minval,
-        "mean":mean,
-        "stdev":stdev,
-        "npointsnull":npointsnull,
-        "npoints":npoints
+        "minval": minval,
+        "maxval": maxval,
+        "diff": maxval - minval,
+        "mean": mean,
+        "stdev": stdev,
+        "npointsnull": npointsnull,
+        "npoints": npoints
     };
 };
 
@@ -161,36 +158,33 @@ var urlParams;
 
 function tooltip(x, y, contents, bgColour)
 {
-    var offset = 15; // use higher values for a little spacing between `x,y` and tooltip
-    var elem = $('<div id="tooltip">' + contents + '</div>').css({
+    const offset = 15;
+    const elem = $('<div id="tooltip">' + contents + '</div>').css({
         position: 'absolute',
         display: 'none',
-        'font-weight':'bold',
+        'font-weight': 'bold',
         border: '1px solid rgb(255, 221, 221)',
         padding: '2px',
         'background-color': bgColour,
         opacity: '0.8'
     }).appendTo("body").fadeIn(200);
 
-    var elemY = y - elem.height() - offset;
-    var elemX = x - elem.width()  - offset;
-    if (elemY < 0) { elemY = 0; } 
-    if (elemX < 0) { elemX = 0; } 
-    elem.css({
-        top: elemY,
-        left: elemX
-    });
+    let elemY = y - elem.height() - offset;
+    let elemX = x - elem.width() - offset;
+    if (elemY < 0) elemY = 0;
+    if (elemX < 0) elemX = 0;
+    elem.css({ top: elemY, left: elemX });
 };
 
-function parseTimepickerTime(timestr){
-    var tmp = timestr.split(" ");
-    if (tmp.length!=2) return false;
+function parseTimepickerTime(timestr) {
+    const tmp = timestr.split(" ");
+    if (tmp.length !== 2) return false;
 
-    var date = tmp[0].split("/");
-    if (date.length!=3) return false;
+    const date = tmp[0].split("/");
+    if (date.length !== 3) return false;
 
-    var time = tmp[1].split(":");
-    if (time.length!=3) return false;
+    const time = tmp[1].split(":");
+    if (time.length !== 3) return false;
 
-    return new Date(date[2],date[1]-1,date[0],time[0],time[1],time[2],0).getTime() / 1000;
+    return new Date(date[2], date[1] - 1, date[0], time[0], time[1], time[2], 0).getTime() / 1000;
 }