PDA

View Full Version : Save charts as image



jksuf
9 Feb 2015, 2:47 AM
Hi guy,

I'm using EXTJS 5.1, and I have a panel with many charts in it. I would like to save as image (jpg or png):

The panel containing all the charts
If the panel cannot be saved, just on chart then
I know that there is the method chart.save() in Extjs 4, but it isn't present in Extjs 5.1 ^^ !
Do you guys have any ideas on how I could save the panel or at least on chart?

Thanks in advance :) !

The0s
9 Feb 2015, 8:00 AM
This may be of use to you:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement.toDataURL

bernard.chung
9 Feb 2015, 9:38 PM
You can either do

chart.preview(); which will bring up a window that you can right click and save the image

OR

In JS


currentChart.getImage().data.replace('data:image/png;base64,', '');


If sending to java


// Save Base64 To Image
public String saveBase64ToImage(SenchaChart senchaChart) {
try {
Long chartWidth = senchaChart.getWidth() + 100;
Long chartHeight = senchaChart.getHeight() + 100;


// Set Save File Base Path
StringBuilder filePath = new StringBuilder();
StringBuilder uri = new StringBuilder();
filePath.append(this.getRealPath());
filePath.append("/");
filePath.append(this.getDownloadFolder());
File tempFolder = new File(filePath.toString());
if (!tempFolder.exists()) {
tempFolder.mkdir();
}


// Set FileName
StringBuffer fileName = new StringBuffer();
fileName.append("Apogee_Report");
fileName.append("_");
fileName.append(new Date().getTime());
fileName.append(".png");


// Set Created Image File Path
uri.append(this.getRealPath());
uri.append("/");
uri.append(this.getDownloadFolder());
uri.append("/");
uri.append(fileName);


// Create Image File
byte[] data = Base64.decodeBase64(senchaChart.getSvg().getBytes());
FileOutputStream stream = new FileOutputStream(uri.toString());
stream.write(data);


return uri.toString();
} catch (Exception e) {
throw new AirException(e);
}
}

jksuf
10 Feb 2015, 2:31 AM
Hi The0s,Thanks a lot for your answer :) !! If I understand correctly, if I want to save my panel containing my charts, I first have to render the panel and it's chart inside a canvas, and then save the canvas using the link you provided ^^ !I thought it would be easier to do so ^^" ! Never mind, I just hope that I can transform my panel into a canvas even if the charts inside my panel are already canvas ;) !Thanks again buddy ! If anyone has other ideas, I'm taking ;) !

josei
10 Feb 2015, 3:43 AM
Hi!


I do as follows (for a single chart):




dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Download as PNG',

handler: function(btn, e, eOpts) {
btn.up('panel').down("cartesian").download({
filename: "theName",
// format: 'jpeg',
format: 'png'
})
}
}, {
xtype: 'button',
text: 'Preview chart',
handler: function(btn, e, eOpts) {
btn.up('panel').down("cartesian").preview()
}
}]
}]


I hope this helps!

jksuf
12 Feb 2015, 2:06 AM
Thanks you bernard and josei for the solutions !! I tried both worked as I wanted :) !!I will now try to render the panel into a canvas which I can save, otherwise your solutions fits my need also :) ! Thanks again guys :) !