save as svg button work

3 files changed, 31 insertions, 10 deletions

diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
index 4a0f2c55..43ac6086 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -121,6 +121,25 @@ function chartupdatedata() {
     nv.utils.windowResize(chart.update);
 }
 
+function savesvg(svgEl, name) {
+    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    var svgData = svgEl.outerHTML;
+    var preface = '<?xml version="1.0" standalone="no"?>\r\n';
+    preface += '<?xml-stylesheet type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css"?>\r\n';
+    var svgBlob = new Blob([preface, svgData], {type:"image/svg+xml;charset=utf-8"});
+    var svgUrl = URL.createObjectURL(svgBlob);
+    var downloadLink = document.createElement("a");
+    downloadLink.href = svgUrl;
+    downloadLink.download = name;
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+}
+
+function saveassvg_pcs() {
+    savesvg($("#svg_pcs")[0], "Pearson Correlation Scatterplot.svg");
+}
+
 drawg();
 chartupdate();
 chartupdatewh();
diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js
index 08ddc825..d0392dd7 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js
@@ -21,8 +21,8 @@ function srdrawg () {
     ymin = d3.min(js_data.rdata[1]);
     ymax = d3.max(js_data.rdata[1]);
     yrange = ymax - ymin;
-    srchart.xDomain([xmin - xrange/10, xmax + xrange/10]);
-    srchart.yDomain([ymin - yrange/10, ymax + yrange/10]);
+    srchart.xDomain([0, xmax + xrange/10]);
+    srchart.yDomain([0, ymax + yrange/10]);
     srchart.xAxis.tickFormat(d3.format(srcheckformat(xrange)));
     srchart.yAxis.tickFormat(d3.format(srcheckformat(yrange)));
     //
@@ -115,6 +115,10 @@ function srchartupdatedata() {
     nv.utils.windowResize(srchart.update);
 }
 
+function saveassvg_srcs() {
+    savesvg($("#svg_srcs")[0], "Spearman Rank Correlation Scatterplot.svg");
+}
+
 srdrawg();
 srchartupdate();
 srchartupdatewh();
diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html
index 56616ab6..fb2bd55c 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -170,10 +170,12 @@
 	</tr>

 </table>

 

+<div><a id="a_svg_pcs" href="#" onclick="javascript:saveassvg_pcs();" class="btn btn-primary">Save as SVG</a></div>

+

 <div style="width: 1000px; text-align: center;"><h2>Pearson Correlation Scatterplot</h2></div>

 

 <div id="scatterplot2">

-	<svg style="width: 1000px; height: 800px; margin-left: 10px;"></svg>

+	<svg id="svg_pcs" style="width: 1000px; height: 800px; margin-left: 10px;"></svg>

 </div>

 

 <br>

@@ -243,16 +245,12 @@
 	</tr>

 </table>

 

+<div><a id="a_svg_srcs" href="#" onclick="javascript:saveassvg_srcs();" class="btn btn-primary">Save as SVG</a></div>

+

 <div style="width: 1000px; text-align: center;"><h2>Spearman Rank Correlation Scatterplot</h2></div>

 

 <div id="srscatterplot2">

-	<svg style="width: 1000px; height: 800px; margin-left: 10px;"></svg>

-</div>

-

-<br>

-

-<div class="alert alert-info" style="width: 200px; margin-left: 80px;">

-    y = {{'%0.3f' % jsdata.srslope}} * x + {{'%0.3f' % jsdata.srintercept}}

+	<svg id="svg_srcs" style="width: 1000px; height: 800px; margin-left: 10px;"></svg>

 </div>

 

 <br>