PDA

View Full Version : Graphs not rendering in firefox 8.



cnhanna01
30 Nov 2011, 11:49 AM
I'm having a problem with my graphs not rendering in firefox. They work in chrome. However, I can get them to render in firefox if I copy and paste the code into the firebug javascript console. After the page has loaded and first attempt has failed.

Also, after the failed load, the javascript console has a repeated warning of 'Unexpected value NaN parsing x attribute.'

Here is the code:


Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.onReady(function () {

var data = [
{field: 'Complete', amount: 995 },
{field: 'Incomplete', amount: 4 }
];
alert(data[0].amount + " " + data[1].amount);
var store1= new Ext.data.JsonStore({
fields: ['field', 'amount'],
data : data
});
var chart = Ext.create('Ext.chart.Chart', {
id: 'equipInspectChart',
renderTo: Ext.Element.get('equipInspectGraph'),
width: 340,
height: 200,
animate: true,
shadow: true,
store: store1,
hidden: false,
legend: {
position: 'left'
},
insetPadding: 30,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'amount',
showInLegend: true,
tips: {
trackMouse: true,
width: 100,
height: 25,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('field') + ': ' + storeItem.get('amount') );
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'field',
display: 'rotate',
contrast: true,
font: '13px Arial Bold'
}
}],
});

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'percent'],
data: [
{ 'name': 'Violations', 'percent':0.2 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.Element.get('patientViolationsGraph'),
width: 150,
height: 100,
title: 'Patient to Patient Equipment Transfer Violations',
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['percent'],
label: {
renderer: Ext.util.Format.numberRenderer('0.0')
},
grid: true,
minimum: 0
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 40,
renderer: function(storeItem, item) {
this.setTitle('Equipment Transfer ' + storeItem.get('name') + ': ' + storeItem.get('percent') + '%');
}
},
xField: 'name',
yField: ['percent']
}]
});



});

mitchellsimoens
30 Nov 2011, 11:59 AM
Do you get any error as in my Firefox 8 it works. The only changes I did was remove the alert() (try using console.log instead), and the two renerTo configs I changed to Ext.getBody() so it will just render to document.body.

cnhanna01
1 Dec 2011, 6:34 AM
I actually realized that it had nothing to do with firefox because it is not rendering correctly in chrome either. I have traced it down to attaching the element to a div with an id. Example: 'renderTo: Ext.Element.get('equipInspectGraph')' doesn't render correctly but 'renderTo: Ext.Element.getBody()' does. Am I using renderTo wrong?

mitchellsimoens
1 Dec 2011, 6:35 AM
What is the size of the 'equipInspectGraph' element?

cnhanna01
1 Dec 2011, 6:45 AM
Here is the whole element.

<div id="equipInspectGraph" style="width: 350px; height: 260px;" class="floatLeft"></div>

Thanks for your help!