mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-12 02:42:48 +00:00
Code Issues Releases Wiki Activity

added funcitonality to reset canvas

Browse Source
This commit is contained in:
mgerb42
2015-12-20 22:10:36 -06:00
parent 31ad768941
commit ad38313ee2
2 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/javascripts/sensor_information.js
View File

@@ -1,7 +1,7 @@
$(document).ready(function(){ $(document).ready(function(){
var yearChart_year = $("#option-year").val(); 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(); var text = $("#option-month option:selected").text();
@@ -9,7 +9,7 @@ $(document).ready(function(){
var month = $("#option-month").val(); var month = $("#option-month").val();
var monthChart_year = text.substring(text.length, text.length -4); 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; 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 month = this.value;
var year = text.substring(text.length, text.length -4); 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){ function displayChart(chart_id, chart_legend_id, year, month){
Chart.defaults.global.responsive = true; 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. // 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. // This will get the first returned node in the jQuery collection.
var myLineChart = new Chart(ctx).Line(data); var myLineChart = new Chart(ctx).Line(data);
$(chart_legend_id).html(myLineChart.generateLegend()); $("#" + chart_legend_id).html(myLineChart.generateLegend());
}); });

13
views/sensor_information.ejs
View File

@@ -33,10 +33,15 @@
</form> </form>
<br> <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> <br>
<div id="legend-year" class="chart-legend"></div> <div id="legend-year" class="chart-legend"></div>
<form class="text-center form-inline"> <form class="text-center form-inline">
<div class="form-group"> <div class="form-group">
<select class="form-control" id="option-month"> <select class="form-control" id="option-month">
@@ -51,7 +56,11 @@
</form> </form>
<br> <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> <br>
<div id="legend-month" class="chart-legend"></div> <div id="legend-month" class="chart-legend"></div>
</div> </div>