Export Chart as an image

[Leiha Sellier]

Hi

I want share with you the best solution for transform a chart (and secondarily all html node ;)) as an image :

You must take 2 libraries :
  - Html2Canvas   : http://html2canvas.hertzen.com/
  - Canvas2Image : http://www.nihilogic.dk/labs/canvas2image/

It's all ;)

Little example :

    var nodeToTransform = $("div.chart")[0];
    html2canvas(nodeToTransform , {
        onrendered: function(canvas) {
            Canvas2Image.saveAsPNG(canvas)
       }
    });

Enjoy ;)

[tburdini]

Hi Leiha,

Your solution is very smart hehe

Although I didn't get it to work here... which flot version do you use?
I am using 0.8, should it be 0.9?

Thanks

[Leiha Sellier]

Hi 

I use 0.8.1 but i think it works with all versions.

[tburdini]

I got it working with my current version normally. The selector I was using wasn't give me the chart image, after checking many possibilities I got the right one and it is ok now.

[nguyen dang Thanh]

How about IE, it works fine for me in Chrome 

But with IE 10 , i got

 "SCRIPT5022: IndexSizeError 

html2canvas.js, line 2859 character 9

"

can u help me?

[nguyen dang Thanh]

I'm sorry

this is error

"SCRIPT122: The data area passed to a system call is too small.

canvas2image.js, line 148 character 3

SCRIPT122:  

canvas2image.js, line 148 character 3 "

best regards!

[Pakorn Rattanakreep]

Hi Leiha,

Thank you very much for your kind information.
Html2canvas works for me as well.
However, the foreign language get corrupt when I used html2canvas with Org Chart.

Do you have any recommendation for me please?

Kind Regards,

Pakorn