PDA

View Full Version : How to enable copy for a chart or a grid?



kislay.kishore
5 Jan 2012, 10:55 PM
I want my chart and grid to be copied. I tried to google an do some R&D, but could reach anywhere.

Please suggest, how to go forward?

I tried the below code, but note sure if this will work and what to write in handler?


contextMenu = new Ext.menu.Menu({
items: [{
text: 'Copy',
iconCls: 'copy',
handler: // what to do here?
}]
});
// chart-div is the div where chart would be render
Ext.getCmp('chart-div').getEl().on('contextmenu', function(e) {
e.preventDefault();
contextMenu.show(Ext.getCmp('chart-div').getEl());
});

mitchellsimoens
6 Jan 2012, 12:37 PM
What do you mean copied?

kislay.kishore
7 Jan 2012, 3:54 AM
By Copied I mean, once I do the right click on the chart area (div)or the grid area (div), It should show me a menu with copy option and when i click on copy the chart/grid should be copied to the windows/other OS clipboard, so that I can paste it in an excel or ppt or a doc, where ever I need it.

fschaeffer
21 Mar 2012, 1:56 AM
I think you won't get any answer on this.

Copying to a clipboard is not possible for Ext components, the only way to get the chart would be to use the built-in Chart export function (which transmits the SVG-data to sencha.io and returns a rendered image from them - or you could build your own server-side-processing-routine (using batiq) to save the SVG as image). Same for the grid data, there are some plugins which export the grid's data to a new window printing the whole data as HTML table.

I usually create a tool item for excel export which sends all relevant data (that is filter data, column sort order, row sort order, hidden / shown columns) to the server and then create the excel-export-file server-side ...

So: no easy way to copy&paste a grid or a chart...

kislay.kishore
21 Mar 2012, 11:15 PM
Ok....It make some sense to export grid to excel...but still you answer gives me a hint that there is some way to export chart as image. Can you please elaborate more on this? Any doc reference or some example code?


I think you won't get any answer on this.

Copying to a clipboard is not possible for Ext components, the only way to get the chart would be to use the built-in Chart export function (which transmits the SVG-data to sencha.io and returns a rendered image from them - or you could build your own server-side-processing-routine (using batiq) to save the SVG as image). Same for the grid data, there are some plugins which export the grid's data to a new window printing the whole data as HTML table.

I usually create a tool item for excel export which sends all relevant data (that is filter data, column sort order, row sort order, hidden / shown columns) to the server and then create the excel-export-file server-side ...

So: no easy way to copy&paste a grid or a chart...

kislay.kishore
22 Mar 2012, 12:34 AM
I just read there is option to export the chart as PNG in extJs 4.1. :)
Reference : http://www.sencha.com/blog/ext-js-4-1-developer-preview/
( See the comment section, comment added by MrSparks )

Any example or demo/sample code for the same? Anyone knows in detail about this?

fschaeffer
22 Mar 2012, 8:38 AM
This is exactly what I described in my post.

Export of chart to PNG is done via sending the SVG-data to sencha.io and there it is rendered via Batiq and then the rendered PNG-image is sent back ....

kislay.kishore
27 Mar 2012, 12:53 AM
How do we do this progrmatically? Any suggestion or reference?

fschaeffer
27 Mar 2012, 2:18 AM
From the 4.1 docs (included in 4.1.RC download)

function save of Ext.chart.Chart:

Saves the chart by either triggering a download or returning a string containing the chart data. The action depends on the export type specified in the passed configuration.
Possible export types: - "image/png" - "image/svg+xml"


Other configuration properties: - width




Example usage:


chart.save({


type: 'image/png'
});

kislay.kishore
17 May 2012, 6:06 AM
I tried few things, but then I am not sure how to go ahead further on this?
Where does the code/cofig params will fit in for saving chart in below sample code


Ext.onReady(function () {
store1.loadData(generateData(6, 20));
var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(6, 20));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store1.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'bottom',
contrast: true,
font: '18px Arial'
}
}]
}
});
});

fschaeffer
17 May 2012, 9:01 PM
Just add another button to your toolbar and then use the charts' save-method. But be aware, that this tansfers your chart data to a server located at Sencha which renders the PNG and responds with the PNG-data ....

So your client has to have access to the Internet and must be allowed to access the Sencha server. And your data should not contain any sensible data ....




tbar: [
{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(6, 20));
}
},
{
text: 'Save chart',
handler: function () {
Ext.getCmp('chartCmp').save({
type: 'image/png'
});
}
}

kislay.kishore
18 May 2012, 12:46 AM
Thanks for clarification here! It really helps to understand me here.

I am wondering why Sencha is sticking to sending data to their own server. This is not a viable solution. And, its obvious that if an application is developed in an enterprise, it wont allow to send their data to any external server.

Though, I am sure Sencha would have thought this. But still its a solution which may not be considered many of the times. :(

fschaeffer
20 May 2012, 8:50 PM
You could provide an own batiq server which takes the transferred SVG-data and renders a PNG out of it. It would be great if sencha would provide the server-setup and the converting script, but I think you will have to try it by yourself. I read some participants of this forum have already setup such a server so it can't be too big of a deal.

You will have to override the sencha.io-URL or build your own ext-library with your new URL in the chart component. I already saw some feature request, so make this URL a config-option so it should be easier to setup your own server...

PS: if your question is answered please mark this thread as answered by picking the best answer...

kislay.kishore
23 Aug 2012, 4:31 AM
Hi,

I finally implemented this by providing server side batik (Batik Transcoder API (http://xmlgraphics.apache.org/batik/using/transcoder.html) ) implementation.

However, the only limitation of this solution is, it doesnt work with IE 8 and lower versions. B'coz IE8 and lower versions doesnt use SVG, rather it uses VML to render charts. And, Batik only supports SVG. As IE9 onwards microsoft has started providing SVG support, so it works fine there.

So, on this note, I would like to thank all the forum members who responded to this thread or tried to help me out, specially, Florian. :)

Thanks!~o)

fschaeffer
23 Aug 2012, 4:38 AM
You're welcome, and good to know that it is possible to implement it on an own installation of batik... maybe Sencha (or you) could provide a howto so that others could also implement this solution.

Florian