Fixes redrawn graphs

2017-02-23 11:20:04 -06:00
parent bd23cd2ea4
commit a90422b7bd
3 changed files with 129 additions and 62 deletions
--- a/www/pocwww/pocwww/static/graphs.js
+++ b/www/pocwww/pocwww/static/graphs.js
@@ -1,6 +1,7 @@
+var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
+var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
+
 function drawCards(data){
-    var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
-    var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
    var graph_data = [] ;
    var json_data = data.card;
    var surf = document.getElementById("surfacecard");
@@ -78,8 +79,10 @@ function drawCards(data){
 }

 function drawChart(data){
-    var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
-    var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
+    if (typeof(scatterChart) != "undefined"){
+        console.log("Destroying existing chart");
+        scatterChart.destroy();
+    }
    var graph_data = [] ;
    var json_data = data.values;
    var ctx = document.getElementById("valueChart");
@@ -100,7 +103,7 @@ function drawChart(data){
        }
        graph_data.push(newObj);
    }
-    var scatterChart = new Chart(ctx, {
+    scatterChart = new Chart(ctx, {
        type: 'line',
        responsive: true,
        data: {
@@ -122,7 +125,56 @@ function drawChart(data){
    });
 }

-function drawSlider(data){
+function drawSingleGraph(data){
+    if (typeof(scatterChart) != "undefined"){
+        console.log("Destroying existing chart");
+        scatterChart.destroy();
+    }
+    var graph_data = [];
+    var values = data.values;
+    var ctx = document.getElementById("myChart");
+    var lines = ["currentValue", "maxDailyValue", "minDailyValue", "dailyAverage", "dailyTotal"];
+    for (var i = 0; i < lines.length; i++){
+        var baseObj = {
+            label: lines[i],
+            fill: false,
+            data: [],
+            lineTension: 0.05,
+            borderColor: color_scale[i % color_scale.length]
+        }
+        if (lines[i] == "dailyTotal"){
+            baseObj['hidden'] = true;
+        }
+        graph_data.push(baseObj);
+    }
+
+    for(var i = 0; i < values.length; i++){
+        for(var j = 0; j < lines.length; j++){
+            var lineName = lines[j]
+            graph_data[lines.indexOf(lineName)].data.push({
+                x: values[i].timestamp,
+                y: values[i][lineName]
+            });
+        }
+    }
+    scatterChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            datasets: graph_data
+        },
+        options: {
+            scales: {
+                xAxes: [{
+                    type: 'time',
+                    position: 'bottom'
+                }]
+            }
+        }
+    });
+}
+
+
+function drawAllSlider(data){

    var date_min = new Date(Date.parse(data.first_date));
    var date_max = new Date(Date.parse(data.last_date));
@@ -174,3 +226,55 @@ function drawSlider(data){
        }
    });
 }
+
+function drawSingleSlider(data){
+
+    var date_min = new Date(Date.parse(data.first_date));
+    var date_max = new Date(Date.parse(data.last_date));
+    console.log(data);
+    var min_val = date_min/1000;
+    var max_val = date_max/1000;
+
+    var endD = new Date();
+    var dummyDate = new Date();
+    var startD = new Date(dummyDate.setDate(endD.getDate() - 2));
+
+
+    var start_date = startD/1000;
+    $('#slider-start').html(startD.toString());
+    if(start_date < min_val){
+        start_date = min_val;
+        $('#slider-start').html(date_min.toString());
+    }
+
+    var end_date = endD/1000;
+    $('#slider-end').html(startD.toString());
+    if(end_date > max_val){
+        end_date = max_val;
+        $('#slider-end').html(date_max.toString());
+    }
+
+    $("#slider-range").slider({
+        range: true,
+        min: min_val,
+        max: max_val,
+        step: 10,
+        values: [start_date, end_date],
+        slide: function (e, ui) {
+            var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
+            $('#slider-start').html(dt_cur_from.toString());
+
+            var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
+            $('#slider-end').html(dt_cur_to.toString());
+        },
+        stop: function(e, ui){
+            var startD = new Date(ui.values[0]*1000);
+            var endD = new Date(ui.values[1]*1000);
+            $.ajax({
+                dataType: 'json',
+                url: "/json/values/tag/" + tagName + "/between/" + startD.toISOString() + "/" + endD.toISOString(),
+                success: drawSingleGraph
+            });
+        }
+    });
+}
--- a/www/pocwww/pocwww/templates/values_single.jinja2
+++ b/www/pocwww/pocwww/templates/values_single.jinja2
@@ -7,65 +7,25 @@
            <h2>Latest Tag Values: {{tagname}}</h2>
        </div>
    </div>
+    <div class="row">
+        <div class="col-xs-12">
+            <div id="time-range">
+                <p><span id="slider-start" class="slider-time pull-left well"></span><span id="slider-end" class="slider-time pull-right well"></span></p>
+                <div class="sliders_step1">
+                    <div id="slider-range"></div>
+                </div>
+            </div>
+        </div>
+    </div>
    <div class="row">
        <div class="col-xs-12">
            <canvas id="myChart" height="120"></canvas>
        </div>
    </div>
 </div>
-<meta id="tag_data" data-name="{{tag_values}}">
-<script type="text/javascript" src="{{request.static_url('pocwww:static/linechart.js')}}"></script>
+
+
 <script>
-var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
-var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
-
-var graph_data = [] ;
-// var data = $('#tag_data').data().name.replace(/'/g, '"');
-// var json_data = JSON.parse(data);
-
-function drawSingleGraph(data){
-    console.log(data);
-    var ctx = document.getElementById("myChart");
-    var lines = ["currentValue", "maxDailyValue", "minDailyValue", "dailyAverage", "dailyTotal"];
-    for (var i = 0; i < lines.length; i++){
-        var baseObj = {
-            label: lines[i],
-            fill: false,
-            data: [],
-            lineTension: 0.05,
-            borderColor: color_scale[i % color_scale.length]
-        }
-        if (lines[i] == "dailyTotal"){
-            baseObj['hidden'] = true;
-        }
-        graph_data.push(baseObj);
-    }
-
-    for(var i = 0; i < data.length; i++){
-        for(var j = 0; j < lines.length; j++){
-            var tagname = lines[j]
-            graph_data[lines.indexOf(tagname)].data.push({
-                x: data[i].timestamp,
-                y: data[i][tagname]
-            });
-        }
-    }
-
-    var scatterChart = new Chart(ctx, {
-        type: 'line',
-        data: {
-            datasets: graph_data
-        },
-        options: {
-            scales: {
-                xAxes: [{
-                    type: 'time',
-                    position: 'bottom'
-                }]
-            }
-        }
-    });
-}

 var urlparts = decodeURIComponent(window.location).split("/").slice(3)
 var endD = new Date();
@@ -73,6 +33,8 @@ var end = endD.toISOString();
 var dummyDate = new Date();
 var startD = new Date(dummyDate.setDate(endD.getDate() - 2));
 var start = startD.toISOString();
+var tagName = "{{tagname}}";
+var scatterChart;

 if(urlparts.length >= 5){
    start = urlparts[3];
@@ -82,13 +44,13 @@ if(urlparts.length >= 5){
 $.ajax({
    dataType: 'json',
    url:"/json/values/tag/{{tagname}}/daterange",
-    success: drawSlider
+    success: drawSingleSlider
 });

 $.ajax({
    dataType: 'json',
-    url:"/json/values/tag/{{tagname}}/between/" + start + "/" + end,
-    success: drawChart
+    url: "/json/values/tag/" + tagName + "/between/" + start + "/" + end,
+    success: drawSingleGraph
 });

 </script>
--- a/www/pocwww/pocwww/templates/valuesall.jinja2
+++ b/www/pocwww/pocwww/templates/valuesall.jinja2
@@ -68,6 +68,7 @@
    var dummyDate = new Date();
    var startD = new Date(dummyDate.setDate(endD.getDate() - 2));
    var start = startD.toISOString();
+    var scatterChart;

    if(urlparts.length >= 3){
        start = urlparts[1];
@@ -77,7 +78,7 @@
    $.ajax({
        dataType: 'json',
        url:"/json/values/daterange",
-        success: drawSlider
+        success: drawAllSlider
    });

    $.ajax({