From 79edd16cd8f8d6d19a27571f8e91b9b54a69d85a Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Fri, 11 Sep 2015 20:51:50 +0200
Subject: [PATCH 1/9] Address issue: Save graphs as image #32 Added a button to
 save chart as PNG

---
 beer-panel.php      |   6 +
 index.php           |   1 +
 js/beer-chart.js    |   8 +
 js/dygraph-extra.js | 354 ++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 369 insertions(+)
 create mode 100644 js/dygraph-extra.js

diff --git a/beer-panel.php b/beer-panel.php
index aca8c76..7ed7cb1 100644
--- a/beer-panel.php
+++ b/beer-panel.php
@@ -44,6 +44,12 @@
 				<button class="refresh-curr-beer-chart" title="Refresh"></button>
 	    		<div class="beer-chart-legend-label">Refresh Chart</div>
 	    		<br class="crystal" />
+	    	</div>
+			<div class="beer-chart-legend-row">
+				<button class="save-curr-beer-chart" title="Save"></button>
+	    		<div class="beer-chart-legend-label">Save Chart</div>
+	    		<br class="crystal" />
+				<img id="hiddenBeerChartImg" style="display: none;" />
 	    	</div>
 	    	<div class="beer-chart-legend-row last">
 				<button class="chart-help" title="Help"></button>
diff --git a/index.php b/index.php
index 1b848d7..938758a 100644
--- a/index.php
+++ b/index.php
@@ -95,6 +95,7 @@ function prepareJSON($input) {
 		<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
 		<script type="text/javascript" src="js/spin.js"></script>
 		<script type="text/javascript" src="js/dygraph-combined.js"></script>
+		<script type="text/javascript" src="js/dygraph-extra.js"></script>
 		<script type="text/javascript">
 			// pass parameters to JavaScript
 			window.tempFormat = <?php echo "'$tempFormat'" ?>;
diff --git a/js/beer-chart.js b/js/beer-chart.js
index 2128643..a2d58ef 100644
--- a/js/beer-chart.js
+++ b/js/beer-chart.js
@@ -436,6 +436,13 @@ function drawBeerChart(beerToDraw, div){
                 }
             }
         }
+		
+		$("button.save-curr-beer-chart").button({	icons: {primary: "ui-icon-refresh" }, text: false }).click(function(){
+			var img = document.getElementById('hiddenBeerChartImg');
+			Dygraph.Export.asPNG(beerChart, img);
+			window.location.href = img.src.replace('image/png','image/octet-stream');
+		});
+	
         var idx = 0;
         $('#curr-beer-chart-legend .beer-chart-legend-row').each(function() {
             if ( ! $(this).hasClass("time") && ! $(this).is(":hidden") ) {
@@ -518,6 +525,7 @@ $(document).ready(function(){
     $("button.refresh-curr-beer-chart").button({	icons: {primary: "ui-icon-refresh" }, text: false }).click(function(){
         drawBeerChart(window.beerName, 'curr-beer-chart');
     });
+	
 
     $('#chart-help-popup')
         .dialog({
diff --git a/js/dygraph-extra.js b/js/dygraph-extra.js
new file mode 100644
index 0000000..49b56c4
--- /dev/null
+++ b/js/dygraph-extra.js
@@ -0,0 +1,354 @@
+/*jslint vars: true, nomen: true, plusplus: true, maxerr: 500, indent: 4 */
+
+/**
+ * @license
+ * Copyright 2011 Juan Manuel Caicedo Carvajal (juan@cavorite.com)
+ * MIT-licensed (http://opensource.org/licenses/MIT)
+ */
+
+/**
+ * @fileoverview This file contains additional features for dygraphs, which
+ * are not required but can be useful for certain use cases. Examples include
+ * exporting a dygraph as a PNG image.
+ */
+
+/**
+ * Demo code for exporting a Dygraph object as an image.
+ *
+ * See: http://cavorite.com/labs/js/dygraphs-export/
+ */
+
+Dygraph.Export = {};
+
+Dygraph.Export.DEFAULT_ATTRS = {
+
+    backgroundColor: "transparent",
+
+    //Texts displayed below the chart's x-axis and to the left of the y-axis 
+    titleFont: "bold 18px serif",
+    titleFontColor: "black",
+
+    //Texts displayed below the chart's x-axis and to the left of the y-axis 
+    axisLabelFont: "bold 14px serif",
+    axisLabelFontColor: "black",
+
+    // Texts for the axis ticks
+    labelFont: "normal 12px serif",
+    labelFontColor: "black",
+
+    // Text for the chart legend
+    legendFont: "bold 12px serif",
+    legendFontColor: "black",
+
+    // Default position for vertical labels
+    vLabelLeft: 20,
+
+    legendHeight: 20,    // Height of the legend area
+	legendMargin: 20,
+	lineHeight: 30,
+	maxlabelsWidth: 0,
+	labelTopMargin: 35,
+	magicNumbertop: 8
+	
+};
+
+/**
+ * Tests whether the browser supports the canvas API and its methods for 
+ * drawing text and exporting it as a data URL.
+ */
+Dygraph.Export.isSupported = function () {
+    "use strict";
+    try {
+        var canvas = document.createElement("canvas");
+        var context = canvas.getContext("2d");
+        return (!!canvas.toDataURL && !!context.fillText);
+    } catch (e) {
+        // Silent exception.
+    }
+    return false;
+};
+
+/**
+ * Exports a dygraph object as a PNG image.
+ *
+ *  dygraph: A Dygraph object
+ *  img: An IMG DOM node
+ *  userOptions: An object with the user specified options.
+ *
+ */
+Dygraph.Export.asPNG = function (dygraph, img, userOptions) {
+    "use strict";
+    var canvas = Dygraph.Export.asCanvas(dygraph, userOptions);
+    img.src = canvas.toDataURL();
+};
+
+/**
+ * Exports a dygraph into a single canvas object.
+ *
+ * Returns a canvas object that can be exported as a PNG.
+ *
+ *  dygraph: A Dygraph object
+ *  userOptions: An object with the user specified options.
+ *
+ */
+Dygraph.Export.asCanvas = function (dygraph, userOptions) {
+    "use strict";
+    var options = {}, 
+        canvas = Dygraph.createCanvas();
+    
+    Dygraph.update(options, Dygraph.Export.DEFAULT_ATTRS);
+    Dygraph.update(options, userOptions);
+
+    canvas.width = dygraph.width_;
+    canvas.height = dygraph.height_ + options.legendHeight;
+
+    Dygraph.Export.drawPlot(canvas, dygraph, options);    
+    Dygraph.Export.drawLegend(canvas, dygraph, options);
+    
+    return canvas;
+};
+
+/**
+ * Adds the plot and the axes to a canvas context.
+ */
+Dygraph.Export.drawPlot = function (canvas, dygraph, options) {
+    "use strict";
+    var ctx = canvas.getContext("2d");
+
+    // Add user defined background
+    ctx.fillStyle = options.backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Copy the plot canvas into the context of the new image.
+    var plotCanvas = dygraph.hidden_;
+    
+    var i = 0;
+    
+    ctx.drawImage(plotCanvas, 0, 0);
+
+
+    // Add the x and y axes
+    var axesPluginDict = Dygraph.Export.getPlugin(dygraph, 'Axes Plugin');
+    if (axesPluginDict) {
+        var axesPlugin = axesPluginDict.plugin;
+        
+        for (i = 0; i < axesPlugin.ylabels_.length; i++) {
+            Dygraph.Export.putLabel(ctx, axesPlugin.ylabels_[i], options,
+                options.labelFont, options.labelFontColor);
+        }
+        
+        for (i = 0; i < axesPlugin.xlabels_.length; i++) {
+            Dygraph.Export.putLabel(ctx, axesPlugin.xlabels_[i], options,
+                options.labelFont, options.labelFontColor);
+        }
+    }
+
+    // Title and axis labels
+
+    var labelsPluginDict = Dygraph.Export.getPlugin(dygraph, 'ChartLabels Plugin');
+    if (labelsPluginDict) {
+        var labelsPlugin = labelsPluginDict.plugin;
+
+        Dygraph.Export.putLabel(ctx, labelsPlugin.title_div_, options, 
+            options.titleFont, options.titleFontColor);
+
+        Dygraph.Export.putLabel(ctx, labelsPlugin.xlabel_div_, options, 
+            options.axisLabelFont, options.axisLabelFontColor);
+
+        Dygraph.Export.putVerticalLabelY1(ctx, labelsPlugin.ylabel_div_, options, 
+            options.axisLabelFont, options.axisLabelFontColor, "center");
+
+        Dygraph.Export.putVerticalLabelY2(ctx, labelsPlugin.y2label_div_, options, 
+            options.axisLabelFont, options.axisLabelFontColor, "center");
+    }
+
+
+	for (i = 0; i < dygraph.layout_.annotations.length; i++) {
+        Dygraph.Export.putLabelAnn(ctx, dygraph.layout_.annotations[i], options, 
+                options.labelFont, options.labelColor);
+    }
+	
+};
+
+/**
+ * Draws a label (axis label or graph title) at the same position 
+ * where the div containing the text is located.
+ */
+Dygraph.Export.putLabel = function (ctx, divLabel, options, font, color) {
+    "use strict";
+
+    if (!divLabel || !divLabel.style) {
+        return;
+    }
+
+    var top = parseInt(divLabel.style.top, 10);
+    var left = parseInt(divLabel.style.left, 10);
+    
+    if (!divLabel.style.top.length) {
+        var bottom = parseInt(divLabel.style.bottom, 10);
+        var height = parseInt(divLabel.style.height, 10);
+
+        top = ctx.canvas.height - options.legendHeight - bottom - height;
+    }
+
+    // FIXME: Remove this 'magic' number needed to get the line-height. 
+    top = top + options.magicNumbertop;
+
+    var width = parseInt(divLabel.style.width, 10);
+
+    switch (divLabel.style.textAlign) {
+    case "center":
+        left = left + Math.ceil(width / 2);
+        break;
+    case "right":
+        left = left + width;
+        break;
+    }
+
+    Dygraph.Export.putText(ctx, left, top, divLabel, font, color);
+};
+ 
+/**
+ * Draws a label Y1 rotated 90 degrees counterclockwise.
+ */
+Dygraph.Export.putVerticalLabelY1 = function (ctx, divLabel, options, font, color, textAlign) {
+    "use strict";
+    if (!divLabel) {
+        return;
+    }
+
+    var top = parseInt(divLabel.style.top, 10);
+    var left = parseInt(divLabel.style.left, 10) + parseInt(divLabel.style.width, 10) / 2;
+    var text = divLabel.innerText || divLabel.textContent;
+
+
+    // FIXME: The value of the 'left' property is frequently 0, used the option.
+    if (!left)
+        left = options.vLabelLeft;
+
+    if (textAlign == "center") {
+        var textDim = ctx.measureText(text);
+        top = Math.ceil((ctx.canvas.height - textDim.width) / 2 + textDim.width);
+    }
+
+    ctx.save();
+    ctx.translate(0, ctx.canvas.height);
+    ctx.rotate(-Math.PI / 2);
+
+    ctx.fillStyle = color;
+    ctx.font = font;
+    ctx.textAlign = textAlign;
+    ctx.fillText(text, top, left);
+    
+    ctx.restore();
+};
+
+/**
+ * Draws a label Y2 rotated 90 degrees clockwise.
+ */
+Dygraph.Export.putVerticalLabelY2 = function (ctx, divLabel, options, font, color, textAlign) {
+    "use strict";
+    if (!divLabel) {
+        return;
+    }
+        
+    var top = parseInt(divLabel.style.top, 10);
+    var right = parseInt(divLabel.style.right, 10) + parseInt(divLabel.style.width, 10) * 2;
+    var text = divLabel.innerText || divLabel.textContent;
+
+    if (textAlign == "center") {
+        top = Math.ceil(ctx.canvas.height / 2);
+    }
+    
+    ctx.save();
+    ctx.translate(parseInt(divLabel.style.width, 10), 0);
+    ctx.rotate(Math.PI / 2);
+
+    ctx.fillStyle = color;
+    ctx.font = font;
+    ctx.textAlign = textAlign;
+    ctx.fillText(text, top, right - ctx.canvas.width);
+    
+    ctx.restore();
+};
+
+/**
+ * Draws the text contained in 'divLabel' at the specified position.
+ */
+Dygraph.Export.putText = function (ctx, left, top, divLabel, font, color) {
+    "use strict";
+    var textAlign = divLabel.style.textAlign || "left";    
+    var text = divLabel.innerText || divLabel.textContent;
+
+    ctx.fillStyle = color;
+    ctx.font = font;
+    ctx.textAlign = textAlign;
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, left, top);
+};
+
+/**
+ * Draws the legend of a dygraph
+ *
+ */
+Dygraph.Export.drawLegend = function (canvas, dygraph, options) {
+    "use strict";
+    var ctx = canvas.getContext("2d");
+
+    // Margin from the plot
+    var labelTopMargin = 10;
+
+    // Margin between labels
+    var labelMargin = 5;
+    
+    var colors = dygraph.getColors();
+    // Drop the first element, which is the label for the time dimension
+    var labels = dygraph.attr_("labels").slice(1);
+    
+    // 1. Compute the width of the labels:
+    var labelsWidth = 0;
+    
+    var i;
+    for (i = 0; i < labels.length; i++) {
+        labelsWidth = labelsWidth + ctx.measureText("- " + labels[i]).width + labelMargin;
+    }
+
+    var labelsX = Math.floor((canvas.width - labelsWidth) / 2);
+    var labelsY = canvas.height - options.legendHeight + labelTopMargin;
+
+
+    var labelVisibility=dygraph.attr_("visibility");
+
+    ctx.font = options.legendFont;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+
+    var usedColorCount=0;
+    for (i = 0; i < labels.length; i++) {
+        if (labelVisibility[i]) {
+            //TODO Replace the minus sign by a proper dash, although there is a
+            //     problem when the page encoding is different than the encoding 
+            //     of this file (UTF-8).
+            var txt = "- " + labels[i];
+            ctx.fillStyle = colors[usedColorCount];
+            usedColorCount++
+            ctx.fillText(txt, labelsX, labelsY);
+            labelsX = labelsX + ctx.measureText(txt).width + labelMargin;
+        }
+    }
+};
+
+/**
+ * Finds a plugin by the value returned by its toString method..
+ *
+ * Returns the the dictionary corresponding to the plugin for the argument.
+ * If the plugin is not found, it returns null.
+ */
+Dygraph.Export.getPlugin = function(dygraph, name) {
+    for (i = 0; i < dygraph.plugins_.length; i++) {
+        if (dygraph.plugins_[i].plugin.toString() == name) {
+            return dygraph.plugins_[i];
+        }
+    }
+    return null;
+}

From 9103ea582410eecfa7f6c2b0c6d65809360be12f Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Fri, 11 Sep 2015 21:12:36 +0200
Subject: [PATCH 2/9] testing

---
 js/dygraph-extra.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/dygraph-extra.js b/js/dygraph-extra.js
index 49b56c4..cdeff8c 100644
--- a/js/dygraph-extra.js
+++ b/js/dygraph-extra.js
@@ -164,8 +164,8 @@ Dygraph.Export.drawPlot = function (canvas, dygraph, options) {
 
 
 	for (i = 0; i < dygraph.layout_.annotations.length; i++) {
-        Dygraph.Export.putLabelAnn(ctx, dygraph.layout_.annotations[i], options, 
-                options.labelFont, options.labelColor);
+        /*Dygraph.Export.putLabelAnn(ctx, dygraph.layout_.annotations[i], options, 
+                options.labelFont, options.labelColor);*/
     }
 	
 };

From d6ea8f6ad4eb339c06333c8c553c4451d1b50b47 Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Sat, 23 Jan 2016 17:03:00 +0100
Subject: [PATCH 3/9] Added file saving capabilities to Dygraph, with correct
 downloading and extension

---
 js/beer-chart.js    | 2 +-
 js/dygraph-extra.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/js/beer-chart.js b/js/beer-chart.js
index a2d58ef..33f4a04 100644
--- a/js/beer-chart.js
+++ b/js/beer-chart.js
@@ -440,7 +440,7 @@ function drawBeerChart(beerToDraw, div){
 		$("button.save-curr-beer-chart").button({	icons: {primary: "ui-icon-refresh" }, text: false }).click(function(){
 			var img = document.getElementById('hiddenBeerChartImg');
 			Dygraph.Export.asPNG(beerChart, img);
-			window.location.href = img.src.replace('image/png','image/octet-stream');
+			
 		});
 	
         var idx = 0;
diff --git a/js/dygraph-extra.js b/js/dygraph-extra.js
index cdeff8c..43e6131 100644
--- a/js/dygraph-extra.js
+++ b/js/dygraph-extra.js
@@ -79,7 +79,11 @@ Dygraph.Export.isSupported = function () {
 Dygraph.Export.asPNG = function (dygraph, img, userOptions) {
     "use strict";
     var canvas = Dygraph.Export.asCanvas(dygraph, userOptions);
-    img.src = canvas.toDataURL();
+    //img.src = canvas.toDataURL();
+    
+    img.download = "chart.png";
+    img.href = canvas.toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+    
 };
 
 /**

From 6aee4c0c7e0d75d9bcaf8ac8b6dfd76d83d5ced3 Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Sat, 23 Jan 2016 17:11:14 +0100
Subject: [PATCH 4/9] Corrected wrong reference to canvas

---
 js/beer-chart.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/beer-chart.js b/js/beer-chart.js
index 33f4a04..0db96d1 100644
--- a/js/beer-chart.js
+++ b/js/beer-chart.js
@@ -439,7 +439,7 @@ function drawBeerChart(beerToDraw, div){
 		
 		$("button.save-curr-beer-chart").button({	icons: {primary: "ui-icon-refresh" }, text: false }).click(function(){
 			var img = document.getElementById('hiddenBeerChartImg');
-			Dygraph.Export.asPNG(beerChart, img);
+			Dygraph.Export.asPNG(currBeerChart, img);
 			
 		});
 	

From ab4fd860b34b2855f9be75cd82f3fb707a159fea Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Sat, 23 Jan 2016 21:08:38 +0100
Subject: [PATCH 5/9] Small improvement

---
 js/dygraph-extra.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/dygraph-extra.js b/js/dygraph-extra.js
index 43e6131..3e8f04d 100644
--- a/js/dygraph-extra.js
+++ b/js/dygraph-extra.js
@@ -80,9 +80,10 @@ Dygraph.Export.asPNG = function (dygraph, img, userOptions) {
     "use strict";
     var canvas = Dygraph.Export.asCanvas(dygraph, userOptions);
     //img.src = canvas.toDataURL();
+    window.open(canvas.toDataURL("image/png"));
     
-    img.download = "chart.png";
-    img.href = canvas.toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+    //img.download = "chart.png";
+    //img.href = canvas.toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
     
 };
 

From 807b072a37221f250ef966f270044b5b6bb28346 Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Sat, 23 Jan 2016 17:03:00 +0100
Subject: [PATCH 6/9] Added file saving capabilities to Dygraph, with correct
 downloading and extension

---
 js/beer-chart.js    | 2 +-
 js/dygraph-extra.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/js/beer-chart.js b/js/beer-chart.js
index a2d58ef..33f4a04 100644
--- a/js/beer-chart.js
+++ b/js/beer-chart.js
@@ -440,7 +440,7 @@ function drawBeerChart(beerToDraw, div){
 		$("button.save-curr-beer-chart").button({	icons: {primary: "ui-icon-refresh" }, text: false }).click(function(){
 			var img = document.getElementById('hiddenBeerChartImg');
 			Dygraph.Export.asPNG(beerChart, img);
-			window.location.href = img.src.replace('image/png','image/octet-stream');
+			
 		});
 	
         var idx = 0;
diff --git a/js/dygraph-extra.js b/js/dygraph-extra.js
index cdeff8c..43e6131 100644
--- a/js/dygraph-extra.js
+++ b/js/dygraph-extra.js
@@ -79,7 +79,11 @@ Dygraph.Export.isSupported = function () {
 Dygraph.Export.asPNG = function (dygraph, img, userOptions) {
     "use strict";
     var canvas = Dygraph.Export.asCanvas(dygraph, userOptions);
-    img.src = canvas.toDataURL();
+    //img.src = canvas.toDataURL();
+    
+    img.download = "chart.png";
+    img.href = canvas.toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+    
 };
 
 /**

From 68a9702725df92180838a1c1a70c7411b5d747d8 Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Sat, 23 Jan 2016 17:11:14 +0100
Subject: [PATCH 7/9] Corrected wrong reference to canvas

---
 js/beer-chart.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/beer-chart.js b/js/beer-chart.js
index 33f4a04..0db96d1 100644
--- a/js/beer-chart.js
+++ b/js/beer-chart.js
@@ -439,7 +439,7 @@ function drawBeerChart(beerToDraw, div){
 		
 		$("button.save-curr-beer-chart").button({	icons: {primary: "ui-icon-refresh" }, text: false }).click(function(){
 			var img = document.getElementById('hiddenBeerChartImg');
-			Dygraph.Export.asPNG(beerChart, img);
+			Dygraph.Export.asPNG(currBeerChart, img);
 			
 		});
 	

From c703995e16bca5b3b3f7e0c234f652b9d97b6c27 Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Sat, 23 Jan 2016 21:08:38 +0100
Subject: [PATCH 8/9] Small improvement

---
 js/dygraph-extra.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/dygraph-extra.js b/js/dygraph-extra.js
index 43e6131..3e8f04d 100644
--- a/js/dygraph-extra.js
+++ b/js/dygraph-extra.js
@@ -80,9 +80,10 @@ Dygraph.Export.asPNG = function (dygraph, img, userOptions) {
     "use strict";
     var canvas = Dygraph.Export.asCanvas(dygraph, userOptions);
     //img.src = canvas.toDataURL();
+    window.open(canvas.toDataURL("image/png"));
     
-    img.download = "chart.png";
-    img.href = canvas.toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+    //img.download = "chart.png";
+    //img.href = canvas.toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
     
 };
 

From fcc2e8ff5ef3f0661fdaffa2a81c43f92f00405b Mon Sep 17 00:00:00 2001
From: Lukas Demetz <lukas@lukepower.com>
Date: Sat, 23 Jan 2016 23:20:31 +0100
Subject: [PATCH 9/9] Added chart export also for beer profile

---
 control-panel.php   | 1 +
 js/control-panel.js | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/control-panel.php b/control-panel.php
index 181e259..9977710 100644
--- a/control-panel.php
+++ b/control-panel.php
@@ -39,6 +39,7 @@
 		<button id="new-controls">New</button>
 		<button id="edit-controls">Edit</button>
 		<button id="saveas-controls">Save As</button>
+		<button id="savepng-controls">Save as Image</button>
 		<button id="refresh-controls">Refresh</button>
 		<button id="help-profile" class="profile-help">Help</button>
 	</div>
diff --git a/js/control-panel.js b/js/control-panel.js
index cd780e4..5953c18 100644
--- a/js/control-panel.js
+++ b/js/control-panel.js
@@ -158,6 +158,7 @@ function applySettings(){
 var profileTable;
 var profileEdit;
 var profileSelect;
+var currBeerProfileChart;
 
 function renderProfile(beerProfile) {
     "use strict";
@@ -166,6 +167,7 @@ function renderProfile(beerProfile) {
     $("#profileTableName").text(decodeURIComponent(window.profileName));
     $("button#edit-controls").show();
     $("button#saveas-controls").show();
+    $("button#savepng-controls").show();
     drawProfileChart("profileChartDiv", profileTable );
 }
 
@@ -323,6 +325,7 @@ function drawProfileChart(divId, profileObj) {
         profileObj.toCSV(true, ['date', 'temperature']),
         chartConfig
     );
+    currBeerProfileChart = chart;
 }
 
 function loadProfile(profile, onProfileLoaded) {
@@ -586,6 +589,11 @@ $(document).ready(function(){
         profileEdit.render( profileTable.toJSON() );
         showProfileEditDialog(true, "Save Temperature Profile As", true);
     }).hide();
+    
+    $("button#savepng-controls").button({  icons: {primary: "ui-icon-copy" } }).click(function() {
+        var img = document.getElementById('hiddenBeerChartImg');
+				Dygraph.Export.asPNG(currBeerProfileChart, img);
+    }).hide();
 
     $("button#help-profile").button({  icons: {primary: "ui-icon-help" } }).click(function() {
         showProfileHelpDialog();