aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLei Yan2017-10-02 22:44:17 +0000
committerLei Yan2017-10-02 22:44:17 +0000
commit0ba135a1ff55bf97035ffda4715533d341d16a6c (patch)
treed22cd385a1a0e57ba9cea8bd59bea737a532b56f
parent27029cb0cb3ea060389268e55bd36e308fed9036 (diff)
downloadgenenetwork2-0ba135a1ff55bf97035ffda4715533d341d16a6c.tar.gz
save as svg button work
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js19
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js8
-rw-r--r--wqflask/wqflask/templates/corr_scatterplot.html14
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>