html2canvas to capture morris.js charts

Question

I'm trying to capture a chart using html2canvas which is rendered using morris.js charts library and it gets captured but only the container.

this is the chart:

and this is what gets captured

here is a link to an nonworking fiddle http://jsfiddle.net/4FMUF/

and here is the code:

html

<div id="mainDiv" style="">
   <div id="myfirstchart" style="height: 250px;"></div>
</div>

JS

Morris.Bar({
  element: 'myfirstchart',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

setTimeout(function(){
html2canvas($('#mainDiv'), {
      onrendered: function (canvas) {
          document.body.appendChild(canvas);
      }
  });
},2000);

Any idea what wrong?

Answer 1

setTimeout(function(){
    html2canvas($('#mainDiv')`[0]`, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        }
    });
},2000);

you should use not JQuery object in this function! Add [0] element index to do this! but morris chart use SVG and plugin will not bake image correctly! (on official site exists note about svg problem)

I'm searching solution for that too. If you have found - please, show us :)

Ooohh... BTW Morris Graphs Export as PDF?