PDA

View Full Version : Latest charts.swf not displaying



mitchellsimoens
10 Oct 2009, 5:00 PM
I have a TabPanel with 3 tabs each holding 1 graph with 2 lines. I used the new charts.swf as directed by this thread (http://www.extjs.com/forum/showthread.php?t=82458) but nothing displays. The only thing I change is the url attribute. When I use the new charts.swf, firebug doesn't return any errors, the TabPanel displays the tabs, and the data store gets the items just no chart.


var chartTabs = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width: bodySize.width,
height: bodySize.height,
plain: true,
defaults: {autoScroll: true},
items:[{
title: "Gas Cost",
items: [
new Ext.Panel({
frame: false,
items: {
xtype: "linechart",
store: GasDataStore,
// url: "ext3/resources/charts.old.swf", //old charts.swf
url: "ext3/resources/charts.swf", //new charts.swl
xField: "date",
extraStyle: {
xAxis: {
labelRotation: -90
},
yAxis: {
titleRotation: -90
}
},
yAxis: new Ext.chart.NumericAxis({
title: "Gas Cost",
displayName: "Gas Cost",
labelRenderer : Ext.util.Format.numberRenderer("0.00"),
maximum: "4.00",
minimum: "1.30",
alwaysShowZero: false
}),
xAxis: new Ext.chart.TimeAxis({
title: "Date",
displayName: "Date",
labelRenderer: Ext.util.Format.dateRenderer("m/d/Y"),
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == "gasCost"){
return Ext.util.Format.number(record.data.gasCost, "0.00") + " \n " + record.data.date;
}else{
return Ext.util.Format.number(record.data.medium1, "0.00") + " \n " + record.data.date;
}
},
series: [{
type: "line",
displayName: "Page Views",
yField: "medium1",
style: {
color:0x99BBE8
}
},{
type:"line",
displayName: "Visits",
yField: "gasCost",
style: {
color: 0x15428B
}
}]
}
})
]
},{
title: "MPG Per Transaction",
items: [
new Ext.Panel({
frame: false,
items: {
xtype: "linechart",
store: GasDataStore,
url: "ext3/resources/charts.old.swf", //old charts.swf
// url: "ext3/resources/charts.swf", //new charts.swl
xField: "date",
extraStyle: {
xAxis: {
labelRotation: -90
},
yAxis: {
titleRotation: -90
}
},
yAxis: new Ext.chart.NumericAxis({
title: "Miles Per Gallon",
displayName: "MPG",
labelRenderer : Ext.util.Format.numberRenderer("0.00"),
maximum: "40.00",
minimum: "15.00",
alwaysShowZero: false
}),
xAxis: new Ext.chart.TimeAxis({
title: "Date",
displayName: "Date",
labelRenderer: Ext.util.Format.dateRenderer("m/d/Y"),
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == "mpg"){
return Ext.util.Format.number(record.data.mpg, "0.00") + " \n " + record.data.date;
}else{
return Ext.util.Format.number(record.data.medium2, "0.00") + " \n " + record.data.date;
}
},
series: [{
type: "line",
displayName: "Average MPG",
yField: "medium2",
style: {
color:0x99BBE8
}
},{
type:"line",
displayName: "MPG",
yField: "mpg",
style: {
color: 0x15428B
}
}]
}
})
]
},{
title: "Value",
items: [
new Ext.Panel({
frame: false,
items: {
xtype: "linechart",
store: GasDataStore,
url: "ext3/resources/charts.old.swf", //old charts.swf
// url: "ext3/resources/charts.swf", //new charts.swl
xField: "date",
extraStyle: {
xAxis: {
labelRotation: -90
},
yAxis: {
titleRotation: -90
}
},
yAxis: new Ext.chart.NumericAxis({
title: "Total Cost Per Transaction",
displayName: "Total Cost per Transaction",
labelRenderer: Ext.util.Format.numberRenderer("0.00"),
maximum: "0.25",
minimum: "0.05",
alwaysShowZero: false,
majorUnit: "0.02",
minorUnit: "0.01"
}),
xAxis: new Ext.chart.TimeAxis({
title: "Date",
displayName: "Date",
labelRenderer: Ext.util.Format.dateRenderer("m/d/Y"),
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == "value"){
return Ext.util.Format.number(record.data.value, "0.00") + " \n " + record.data.date;
}else{
return Ext.util.Format.number(record.data.medium3, "0.00") + " \n " + record.data.date;
}
},
series: [{
type: "line",
displayName: "Average Value",
yField: "medium3",
style: {
color:0x99BBE8
}
},{
type:"line",
displayName: "Value",
yField: "value",
style: {
color: 0x15428B
}
}]
}
})
]
}]
});

10 Oct 2009, 5:01 PM
can you explain what 'new' is?

mitchellsimoens
10 Oct 2009, 5:03 PM
ok, maybe I should of used "latest" instead. Fixed my title

10 Oct 2009, 5:07 PM
I use the charts from SVN, which are the latest of the latest. no issues. What *version* are you using?

10 Oct 2009, 5:08 PM
BTW, if the charts work on the distribution examples, then the problem probably isn't the SWF files.

mitchellsimoens
10 Oct 2009, 5:16 PM
I'm still using 3.0.0. Guess there were some improvements/bug fixes in the SVN version.

11 Oct 2009, 3:11 AM
Do the examples work?

11 Oct 2009, 3:11 AM
Wait! If you are using 3.0, what is new?!?

mitchellsimoens
11 Oct 2009, 5:36 AM
the charts.swf that ships with 3.0.0 work. I know there is a new release charts.swf over at the YUI site (and linked by you in the feature requests forum) and I was stating that the latest charts.swf did not work with my code. I was starting to think it was because I have 2 lines in my linechart but was unsure.

11 Oct 2009, 7:57 AM
The flash object appears, but the area is not drawn. My hunch is that there are some API changes. The only supported charts are the ones that ship with extjs.