3 Feb 2012 11:36 PM #1
Unanswered: How to get chart as Image
I draw line,bar,column,pie charts etc using extjs4 charts .
Now i want those graphs to download as jpeg/png or like an image by click on download button. and save those image in server.
How to get Image from those graphs and store.
4 Feb 2012 5:01 AM #2
Converts the canvas to a PNG
For your use-case, it's not practical to upload an image to the server programmatically. Regarding enabling the user to "download" an image of the chart, you could look at using the canvas feature to convert the data to a base64 URL. Check this out:
* Converts the canvas to a PNG and modifies the document location to it
* @param canvasElement
function convertToPng ( canvasElement, outputElement )
var canvas = document.getElementById(canvasElement);
var url = canvas.toDataURL();
var img = document.createElement("img");
img.src = url;
// document.location.href = strDataURI;
var output = document.getElementById(outputElement);
newwindow = window.open(url, 'canvas generated image');
Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...
When in doubt, check the d4mn source code!
And here are my terms...
- I don't care if you use my source code. (Known as "Code.")
- I don't care if I get any monetary compensation.
- I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
- Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
- By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
- You are welcome to change and improve the Code to best meet your needs.
- I don't care if you use the Code in a commercial or open-source project.
- You are not required to contact me prior to using the Code.
5 Feb 2012 10:03 PM #3
i place one button to download. when i click on that button it is saying
canvas.toDataURL() is not function.
can u give complte code to download as image.