PDA

View Full Version : How to get a chart in order to save it as Jpeg file?



marxan
20 Nov 2012, 6:04 AM
Hi,

Everything is in the title. When I try to retrieve my chart by using Ext.getCmp(''); The object is undefined.

Here's my code:

My main controller:


init: function () {
'button[action = saveChart]': {
click: this.downloadChart
}
},

downloadChart: function (){ Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart = Ext.getCmp('StandardGraphId');
console.log(chart);
chart.save({
type: 'image/png'
});
}
});
},

Container that contains my chart:

Ext.define('TAB.view.GraphContainer', { extend: 'Ext.Window',
alias: 'widget.graphcontainer',
// layout: 'fit',
width: 800,
height: 800,
id: 'graphContainerId',
//closeAction: 'hide',
tbar: [{
text: 'Save Chart',
action: 'saveChart'

}],

initComponent: function() {
this.items = [
{
xtype: 'standardgraph',
id: 'standardGraphId'
}
],

this.callParent(arguments);
}
});

The chart to be saved:


Ext.define('TAB.view.chart.StandardGraph', { extend: 'Ext.chart.Chart',
alias: 'widget.standardgraph',
store: 'StandardGraphStore',
id: 'StandardGraphId',
width: 800,
height: 800,
axes: [ {
title: '%',
type: 'Numeric',
position: 'left',
fields: ['VALUE'],
grid: true,
minimum: -200,
maximum : 200
},
{
title: 'Countries',
type: 'Category',
position: 'bottom',
fields: ['LABEISO'],
label: {
rotate: {
degrees: 270
}
}
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 180,
height: 28,
renderer: function(store, item) {
this.setTitle(store.get('LABEISO') + ': ' + store.get('VALUE') );
}
},
label: {
display: 'insideEnd',
field: 'data1',
// renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#444',
'text-anchor': 'middle'
},
xField: 'LABEISO',
yField: 'VALUE'
}
]
});




Thanks for any help.

mitchellsimoens
22 Nov 2012, 6:18 AM
As long as the id on the component, there is an instance of the component and you pass in the id (case sensitive) it should be able to find it with getCmp no problems.

dawesi
22 Nov 2012, 8:24 PM
unless you have two charts with the same id