From 70c84055becb98f0b6b47a104e301fc725a24038 Mon Sep 17 00:00:00 2001
From: mgerb42 <mgerb42@gmail.com>
Date: Sun, 20 Dec 2015 22:10:36 -0600
Subject: [PATCH] added funcitonality to reset canvas

---
 public/javascripts/sensor_information.js | 19 +++++++++++++------
 views/sensor_information.ejs             | 13 +++++++++++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/public/javascripts/sensor_information.js b/public/javascripts/sensor_information.js
index 25d4845..b9d52bc 100644
--- a/public/javascripts/sensor_information.js
+++ b/public/javascripts/sensor_information.js
@@ -1,7 +1,7 @@
 $(document).ready(function(){	
 	
 	var yearChart_year = $("#option-year").val();
-	displayChart("#info-chart-year", "#legend-year", yearChart_year, null);
+	displayChart("info-chart-year", "legend-year", yearChart_year, null);
 
 	
 	var text = $("#option-month option:selected").text();
@@ -9,7 +9,7 @@ $(document).ready(function(){
 	var month = $("#option-month").val();
 	var monthChart_year = text.substring(text.length, text.length -4);
 
-	displayChart("#info-chart-month", "#legend-month", monthChart_year, month);
+	displayChart("info-chart-month", "legend-month", monthChart_year, month);
 	
 });
 
@@ -17,7 +17,8 @@ $("#option-year").on("change", function(){
 
 	var year = this.value;
 
-	displayChart("#info-chart-year", "#legend-year", year, null);
+	resetCanvas("info-chart-year", "canvas1-id");
+	displayChart("info-chart-year", "legend-year", year, null);
 
 });
 
@@ -27,10 +28,16 @@ $("#option-month").on("change", function(){
 	var month = this.value;
 	var year = text.substring(text.length, text.length -4);
 
-	displayChart("#info-chart-month", "#legend-month", year, month);
+	resetCanvas("info-chart-month", "canvas2-id");
+	displayChart("info-chart-month", "legend-month", year, month);
 	
 });
 
+function resetCanvas(canvas_id, container_id){
+	$("#" + canvas_id).remove(); // this is my <canvas> element
+	$("#" + container_id).append('<canvas class="center" id="' + canvas_id + '" width="800" height="400"></canvas>');
+}
+
 function displayChart(chart_id, chart_legend_id, year, month){
 
 	Chart.defaults.global.responsive = true;
@@ -90,11 +97,11 @@ function displayChart(chart_id, chart_legend_id, year, month){
 		}
 
 		// Get context with jQuery - using jQuery's .get() method.
-		var ctx = $(chart_id).get(0).getContext("2d");
+		var ctx = $("#" + chart_id).get(0).getContext("2d");
 		// This will get the first returned node in the jQuery collection.
 		var myLineChart = new Chart(ctx).Line(data);
 
-		$(chart_legend_id).html(myLineChart.generateLegend());
+		$("#" + chart_legend_id).html(myLineChart.generateLegend());
 
 	});
 
diff --git a/views/sensor_information.ejs b/views/sensor_information.ejs
index 7acdca5..18b0dba 100644
--- a/views/sensor_information.ejs
+++ b/views/sensor_information.ejs
@@ -33,10 +33,15 @@
 </form>
 
 <br>
-<canvas class="center" id="info-chart-year" width="800" height="400"></canvas>
+<div id="canvas1-id">
+	<canvas class="center" id="info-chart-year" width="800" height="400"></canvas>
+</div>
+
 <br>
 <div id="legend-year" class="chart-legend"></div>
 
+
+
 <form class="text-center form-inline">
 	<div class="form-group">
 		<select class="form-control" id="option-month">
@@ -51,7 +56,11 @@
 </form>
 
 <br>
-<canvas class="center" id="info-chart-month" width="800" height="400"></canvas>
+
+<div id="canvas2-id">
+	<canvas class="center" id="info-chart-month" width="800" height="400"></canvas>
+</div>
+
 <br>
 <div id="legend-month" class="chart-legend"></div>
 </div>