Chart rendered in browser but not displayed up on button click

[kunal seth]

function getcharts(){
Ext.application({
requires:
['Ext.chart.*',
'Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']
,
name: 'AppName',
launch: function () {
Ext.onReady(function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1'], //, 'data2', 'data3', 'data4', 'data5'],
data: [
{ 'name': 'BNWDev15', 'data1': 10 }
//{ 'name': 'BNWDev15', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 }//,
// { 'name': 'BNWDev15', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
// { 'name': 'BNWDev16', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
// { 'name': 'BNWDev16', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
// { 'name': 'BNWDev16', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
]
});
var colors = ['rgb(47, 162, 223)',
'rgb(60, 133, 46)',
'rgb(234, 102, 17)',
'rgb(154, 176, 213)',
'rgb(186, 10, 25)',
'rgb(40, 40, 40)'];


Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
constructor: function (config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: colors
}, config));
}
});
var chart1 = new Ext.create('Ext.chart.Chart', {
//renderTo: Ext.get('finalcontent'),
width: 500,
height: 300,
animate: true,
store: store,
theme: 'Browser:gradients',
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Error Count',
grid: true,
style: { fill: 'red' },
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Server Name'
}],
series: [{
type: 'bar',
axis: 'bottom',
//highlight: true,
/*tips: {
//trackMouse: true,
width: 840,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},*/
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#000',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data1',
style: {
lineWidth: 1,
stroke: '#666',
color: 'red'//,
//opacity: 0.86
}
}]
});
Ext.create(Ext.panel.Panel, {
bodyStyle: 'background-color:green',
width: 550,
layout: 'fit',
title: 'Ebix Chart',
renderTo: 'finalcontent',
items: chart1,
html: '<b>TEST 01</b>'
});



});
}
});
}

[mitchellsimoens]

Why do you have Ext.onReady within Ext.application's launch method? You shouldn't have the Ext.onReady in there