PDA

View Full Version : How to get chart as Image



jagadeeshkasa
3 Feb 2012, 11:36 PM
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.

lorezyra
4 Feb 2012, 5:01 AM
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);
while (output.hasChildNodes())
{
output.removeChild(output.firstChild);
}
output.appendChild(img);
*/
newwindow = window.open(url, 'canvas generated image');
}




Here's some recommended reading: http://msdn.microsoft.com/en-us/ie/dd797413

jagadeeshkasa
5 Feb 2012, 10:03 PM
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.