PDA

View Full Version : Chart is not show in IE8 it OK in Firefox



chid007
1 Jul 2010, 8:35 PM
this code

Ext.chart.Chart.CHART_URL = '../../ScriptExtjs/resources/charts.swf?nocache='+Math.floor(Math.random()*10000);

Ext.onReady(function() {

var store = new Ext.data.JsonStore({
fields: ['name', 'visits', 'views'],
data: [
{ name: 'Jul 07', visits: 245000, views: 3000000 },
{ name: 'Aug 07', visits: 240000, views: 3500000 },
{ name: 'Sep 07', visits: 355000, views: 4000000 },
{ name: 'Oct 07', visits: 375000, views: 4200000 },
{ name: 'Nov 07', visits: 490000, views: 4500000 },
{ name: 'Dec 07', visits: 495000, views: 5800000 },
{ name: 'Jan 08', visits: 520000, views: 6000000 },
{ name: 'Feb 08', visits: 620000, views: 7500000 }
]
});

// extra extra simple
new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'totalemp',
width: "100%",
height: 250,
layout: 'fit',
items: {

xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits',
listeners: {
itemclick: function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});





new Ext.Panel({
title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
renderTo: 'salary',
width: "100%",
height: 250,
layout: 'fit',

items: {
xtype: 'columnchart',
store: store,
url: '../../ScriptExtjs/resources/charts.swf?nocache=1000',
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer: Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer: function(chart, record, index, series) {
if (series.yField == 'visits') {
return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
} else {
return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
}
},
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size: 1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: { color: 0x69aBc8, length: 4 },
minorTicks: { color: 0x69aBc8, length: 2 },
majorGridLines: { size: 1, color: 0xeeeeee }
},
yAxis: {
color: 0x69aBc8,
majorTicks: { color: 0x69aBc8, length: 4 },
minorTicks: { color: 0x69aBc8, length: 2 },
majorGridLines: { size: 1, color: 0xdfe8f6 }
}
},
series: [{
type: 'column',
displayName: 'Page Views',
yField: 'views',
style: {
image: 'bar.gif',
mode: 'stretch',
color: 0x99BBE8
}
}, {
type: 'line',
displayName: 'Visits',
yField: 'visits',
style: {
color: 0x15428B
}
}]
}
});


});

mankz
1 Jul 2010, 10:07 PM
Just a guess, your width declaration should be in pixels. From the docs:


width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto)

chid007
1 Jul 2010, 10:38 PM
I set width is 470 and height is 300 it not show In IE but it work in Firefox