Client side chart rendering (work in progress)

templates/chart-publish.twig

@@ -3,6 +3,9 @@
 
 {{ parent() }}
 
+<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
+<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
+
 <script type="text/javascript">
 $(function() {
 
@@ -38,6 +41,59 @@ $(function() {
     }
 
     resizeIFrame();
+
+    function snapshot(width, height) {
+        // 1. make iframe and load chart
+        var iframe = $('<iframe />');
+        iframe.attr({
+            src: 'http://{{ DW_DOMAIN }}/chart/{{ chart.id }}'
+        });
+        iframe.css({
+            position: 'absolute',
+            top: 0,
+            left: -4000,
+            width: width+'px',
+            height: height+'px'
+        });
+        $('body').append(iframe);
+        // 2.
+        var canvas = $('<canvas id="canvas" width="'+width+'px" height="'+height+'px"></canvas>')
+        $('body').append(canvas);
+
+        function px(s) {
+            return Number(s.substr(0, s.length-2));
+        }
+
+        setTimeout(function() {
+            var body = iframe.get(0).contentDocument,
+                ctx = canvas.get(0).getContext('2d');
+            canvg('canvas', $('svg', body).get(0).innerSVG);
+            $('.label', body).each(function(i, lbl) {
+                lbl = $(lbl);
+                var x = px(lbl.css('left')),
+                    y = px(lbl.css('top')),
+                    txt = $('span', lbl).html();
+                console.log(x,y,txt);
+                ctx.font = "8pt Arial";
+                ctx.fillText(txt, x, y);
+
+            });
+        }, 1000);
+
+    }
+
+
+    setTimeout(function() {
+       /* var iframe = $('#iframe-vis'),
+            ibody = iframe.get(0).contentDocument,
+            svgXml = $('svg', ibody).get(0).innerSVG,
+            canvas = $('<canvas id="canvas" width="1000px" height="600px"></canvas>');
+        console.debug(svgXml);
+        //$('body').append(canvas);
+        canvg('canvas', svgXml);
+        $('body').append(canvas);*/
+        snapshot(1200,600);
+    },4000);
 });
 
 </script>

templates/chart.twig

@@ -14,6 +14,9 @@ body {
     </script>
     <![endif]-->
 
+    <script type="text/javascript" src="/static/vendor/innersvg/innersvg.js"></script>
+
+
 {% for src in stylesheets %}
     <link rel="stylesheet" type="text/css" href="{{ src }}"></link>
 {% endfor %}

www/static/vendor/innersvg/innersvg.js

@@ -0,0 +1,26 @@
+Object.defineProperty(SVGElement.prototype, 'innerSVG', {
+  get: function() {
+    var $node, $temp;
+    $temp = document.createElement('div');
+    $node = this.cloneNode(true);
+    $temp.appendChild($node);
+    return $temp.innerHTML;
+  },
+  set: function(markup) {
+    var $element, $temp, _i, _len, _ref, _results;
+    $temp = document.createElement('div');
+    $temp.innerHTML = markup;
+    while (this.firstChild) {
+      this.firstChild.parentNode.removeChild(this.firstChild);
+    }
+    _ref = $temp.children;
+    _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      $element = _ref[_i];
+      _results.push(this.appendChild($element));
+    }
+    return _results;
+  },
+  enumerable: false,
+  configurable: true
+});