Switches to entirely local export of chart as SVG only.

montera34 · Jun 3, 2013 · 4357455 · 4357455
1 parent 24a9949
commit 4357455
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 23 deletions.
diff --git a/app/assets/javascripts/dataviz.js b/app/assets/javascripts/dataviz.js
@@ -3,18 +3,21 @@ var dataviz = (function () {
 var getProperty = function (name) { return function (d) { return d[name]; }; };
 var getValues = function (d) { return d.values; };
 var getKey = function (d) { return d.key; };
-
+// Utility functions
 var mapValues = function (a, f) { return {key:a.key, values:a.values.map(f) }; };
 var isNonzero = function (d) { return d.percent > 0; };
-
 var formatDate = function (dateString) {
     var d = new Date(dateString + ' 00:00:00');
     return (d.getMonth() + 1) + '/' + d.getDate();
 };
-
+// The dataviz object
 var dataviz = {
+    width: 0,
+    height: 0,
     drawCodedThread: function(width, height, padding, thread) {
         // Configuration
+        this.width = width;
+        this.height = height;
         var chartHeight = height - padding.top - padding.bottom;
         var chartWidth = width - padding.left - padding.right;
         // Convert flat data to a nested tree
@@ -133,6 +136,11 @@ var dataviz = {
             .attr('height', function (d) { return Math.ceil(y(d.percent / d.image_count)); })
             .attr('fill', function (d) { return thread['colors'][d.code]; });
     },
+    exportToSvg: function (svgNode, imgNode) {
+        html = this.getSvg(svgNode);
+        d3.select(imgNode)
+            .attr("src", "data:image/svg+xml;base64," + btoa(html));
+    },
     getTitle: function (node) {
         var title = '';
         d3.select(node).each(function (d) {
@@ -155,9 +163,13 @@ var dataviz = {
         });
         return content;
     },
-    getSvg: function (width, height) {
-        svg = $('#chart_div')[0].innerHTML;
-        return svg;
+    getSvg: function (node) {
+        html = d3.select(node)
+            .attr("title", "PageOneX Export")
+            .attr("version", 1.1)
+            .attr("xmlns", "http://www.w3.org/2000/svg")
+            .node().parentNode.innerHTML
+        return html;
     }
 };
 return dataviz;

diff --git a/app/assets/javascripts/display.js b/app/assets/javascripts/display.js
@@ -103,7 +103,3 @@ $(function () {
 	})
 
 })
-
-$('#chart-modal form').submit(function () {
-	$('#chart-modal').modal('hide');
-});
diff --git a/app/assets/stylesheets/coding.css.scss b/app/assets/stylesheets/coding.css.scss
@@ -14,4 +14,8 @@
 
 .above-image-alert form {
   margin-bottom: 0px;
+}
+
+#chart-export-img {
+  box-shadow: 2px 2px 5px #888888;
 }
diff --git a/app/views/coding/display.html.erb b/app/views/coding/display.html.erb
@@ -87,24 +87,14 @@
 <div class="row">
         <a href="#chart-modal" role="button" class="btn pull-right" data-toggle="modal">Export chart</a>
         <div id="chart-modal" class="modal hide fade">
-                <form method="post" action="/export_chart">
-                <input type="hidden" name="format" value="svg"/>
-                <input id="svgdata" type="hidden" name="svgdata" value=""/>
                 <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                         <h3>Export Chart</h3>
                 </div>
                 <div class="modal-body">
-                        <div>
-                                <select name="format">
-                                        <option value="svg">SVG</option>
-                                </select>
-                        </div>
-                        <div>
-                                <button type="submit" class="btn btn-primary">Export</button>
-                        </div>
+                        <p>To export the chart, right click the image below and select "Save Image As..." This will download the chart in SVG format.</p>
+                        <img id="chart-export-img" />
                 </div>
-                </form>
         </div>
 	<div id="chart_div" style="margin-left: 110px;width: 1210px; margin-bottom: -15px;"></div><!--div to display bar chart-->
 </div>
@@ -239,7 +229,7 @@ var height = 200;
 var width = 1210;
 var padding = {"top": 40, "right": 120, "bottom": 40, "left": 120 };
 dataviz.drawCodedThread(width, height, padding, thread);
-$('#svgdata').val(dataviz.getSvg(width, height));
+dataviz.exportToSvg($('#chart_div svg')[0], $('#chart-export-img')[0]);
 $('.code').hover(function () {
         var title = dataviz.getTitle(this);
         var content = dataviz.getContent(this);