Skip to content
Browse files

Client side chart rendering (work in progress)

  • Loading branch information...
1 parent 6a798bb commit 17d136bbd76f410fe7ac88c1e51a440153dc124b @gka gka committed Sep 12, 2012
Showing with 85 additions and 0 deletions.
  1. +56 −0 templates/chart-publish.twig
  2. +3 −0 templates/chart.twig
  3. +26 −0 www/static/vendor/innersvg/innersvg.js
View
56 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>
View
3 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 %}
View
26 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
+});

0 comments on commit 17d136b

Please sign in to comment.
Something went wrong with that request. Please try again.