PDA

View Full Version : Charts display in Safari, not FF/IE



hlship
13 Oct 2009, 4:51 PM
I'm having the oddest problem; I'm getting javascript errors when trying to use a LineChart component.

The examples (from http://www.extjs.com/deploy/dev/examples/chart/charts.html) work in my environment.

If, on the same page, I add my own Chart, it fails.

My JavaScript (it is heavily componentized, to work within Tapestry) is in two parts:



Tapestry.Initializer.lineChart = function(spec)
{
var store = new Ext.data.JsonStore(spec.storeConfig);

// Necessary to force the Ajax request, otherwise no data
// is displayed.

// store.load();

new Ext.Panel({
title: spec.title,
renderTo: spec.clientId,
layout: 'fit',

width: 500,
height: 400,


items: {
xtype: 'linechart',
store: store,
xField: spec.xfield,
yField: spec.yfield
}
});


};This is initialized from the following:



Tapestry.onDOMLoaded(function() {
Ext.BLANK_IMAGE_URL = '/assets/ctx/4ec4b52df4f6619e/ext-3.0.0/resources/images/blue/s.gif';
Ext.chart.Chart.CHART_URL = '/assets/ctx/4ec4b52df4f6619e/ext-3.0.0/resources/charts.swf';
Tapestry.init({"lineChart":[{"yfield":"value","title":"Demo LineChart (FuzzDats)","storeConfig":{"data":[{"title":"Goober","value":517},{"title":"Daedalus","value":723},{"title":"Mr. Smith","value":215},{"title":"Cooper","value":935},{"title":"Barney","value":89},{"title":"Elektra","value":361},{"title":"Harvey","value":548},{"title":"Lucas","value":225},{"title":"Buffy","value":225},{"title":"Cougar","value":899},{"title":"Stinkweed","value":407}],"fields":[{"name":"title","type":"string"},{"name":"value","type":"int"}]},"xfield":"title","clientId":"linechart"}]});
});
The Tapestry.init() call will turn into a call as follows:



Tapestry.Initializer.lineChart(
{"yfield":"value","title":"Demo LineChart (FuzzDats)","storeConfig":{"data":[{"title":"Goober","value":517},{"title":"Daedalus","value":723},{"title":"Mr. Smith","value":215},{"title":"Cooper","value":935},{"title":"Barney","value":89},{"title":"Elektra","value":361},{"title":"Harvey","value":548},{"title":"Lucas","value":225},{"title":"Buffy","value":225},{"title":"Cougar","value":899},{"title":"Stinkweed","value":407}],"fields":[{"name":"title","type":"string"},{"name":"value","type":"int"}]},"xfield":"title","clientId":"linechart"});
I've actually simplified this a lot already, including removing the part that configures a Ajax call to get the data (instead, passing it down explicitly).

The error I get is consistent across Safari and Firefox:



this.swf.setType is not a function this.swf.setType(this.type);


This is in the onSwfReady() event handler method of the Chart component. Inspecting this indicates that it is the LineChart component (this.xtype == "linechart").

this.swf is not defined, that's the root of the problem.

Interestingly, if I enable the following code within the same file (that has the Tapestry.Initializer.lineChart function):



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: document.body,
width:500,
height:300,
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'));
}
}
}
});
});


It works correctly! That is really throwing me for a loop. I'm having trouble deducing what the difference is between the two examples!

I'm concerned that there's some issue with the configuration object, or the nested storeConfig object. It's in JSON format, and I don't think
that there should be any difference between:



{ data: [ . . . ] }


and



{ "data": [ . . . ] }
... but perhaps I'm mistaken?

hlship
13 Oct 2009, 5:06 PM
May have found it ... Prototype's "dom:loaded" event is not quite the same as the Ex.onReady() event. Deferring the call to T.I.lineChart() until ready seems to have resolved this.