PDA

View Full Version : IE7 Type Mismatch rendering charts



gtsafas
13 Jun 2012, 12:17 PM
Hello, I am trying to render charts in ie7 which fails (go figure) works fine in chrome.

The IE error I am getting is "Type mismatch"

When I debug it shows me the following function throwing the error

setText: function (sprite, text) {
sprite.vml.textpath.string = Ext.htmlDecode(text);
},

It looks like text is coming in as null. Any help on this would be appreciated
36210

gtsafas
13 Jun 2012, 12:51 PM
So it looks like this is being caused by my date column

Here is my code for my chart and some sample data from the proxy


Ext.create("Ext.chart.Chart", {
'animate': True,
'axes': [{
'fields': ['Col3'],
'position': 'left',
'title': 'Col3',
'type': 'Numeric'
}, {
'fields': ['Col1'],
'position': 'right',
'title': 'Col1',
'type': 'Category'
}],
'border': 0,
'flex': 1,
'id': 'ch10',
'legend': True,
'series': [{
'axis': 'left',
'fill': True,
'fillOpacity': 0.5,
'smooth': True,
'style': {
'fill': '#ff0000'
},
'type': 'line',
'xField': 'Col1',
'yField': 'Col3'
}, {
'axis': 'right',
'fill': True,
'fillOpacity': 0.5,
'smooth': True,
'style': {
'fill': '#0EB30E'
},
'type': 'line',
'xField': 'DateCol',
'yField': 'Col1'
}],
'store': Ext.create("Ext.data.Store", {
'autoLoad': True,
'fields': [{
'dateformat': 'Y-m-d',
'name': 'TimeCol',
'type': 'date'
}, {
'name': 'Col4',
'type': 'string'
}, {
'name': 'Col2',
'type': 'float'
}, {
'name': 'Col3',
'type': 'float'
}, {
'name': 'Col1',
'type': 'float'
}, {
'dateformat': 'Y-m-d',
'name': 'DateCol',
'type': 'date'
}],
'proxy': {
'reader': {
'root': 'rows',
'totalProperty': 'nrows',
'type': 'json'
},
'type': 'ajax',
'url': '/data/chart'
}
}),
'title': 'ExtJS Line Chart'
})


and here is some of the sample json I am using from my proxy



{
rows:[

{

TimeCol: "2012-06-13T16:38:59.320000",
Col4: "p0",
Col2: 100,
Col3: 267,
Col1: 0,
DateCol: "2012-06-13"
},

{

TimeCol: "2012-06-13T16:38:59.320000",
Col4: "p1",
Col2: 101,
Col3: 620,
Col1: 1,
DateCol: "2012-06-14"
},
....

gtsafas
14 Jun 2012, 5:01 AM
Not sure why this was moved, if it works in chrome and not in IE? would of seemed like a bug to me

gtsafas
14 Jun 2012, 8:59 AM
The error getting thrown is within Ext.define('Ext.draw.engine.Vml', {

scottmartin
14 Jun 2012, 10:53 AM
This seems to work for me:

You had all your true as True and I validated your JSON.



{
"rows": [
{
"TimeCol": "2012-06-13T16:38:59.320000",
"Col4": "p0",
"Col2": 100,
"Col3": 267,
"Col1": 0,
"DateCol": "2012-06-13"
},
{
"TimeCol": "2012-06-13T16:38:59.320000",
"Col4": "p1",
"Col2": 101,
"Col3": 620,
"Col1": 1,
"DateCol": "2012-06-14"
}
]
}




Ext.onReady(function(){

Ext.create("Ext.chart.Chart", {
renderTo: Ext.getBody(),
animate: true,

width: 500,
height: 300,

axes: [{
fields: ['Col3'],
position: 'left',
title: 'Col3',
type: 'Numeric'
}, {
fields: ['Col1'],
position: 'right',
title: 'Col1',
type: 'Category'
}],
border: 0,
flex: 1,
//id: 'ch10',
legend: true,
series: [{
axis: 'left',
fill: true,
fillOpacity: 0.5,
smooth: true,
style: {
fill: '#ff0000'
},
type: 'line',
xField: 'Col1',
yField: 'Col3'
}, {
axis: 'right',
fill: true,
fillOpacity: 0.5,
smooth: true,
style: {
fill: '#0EB30E'
},
type: 'line',
xField: 'DateCol',
yField: 'Col1'
}],
store: Ext.create("Ext.data.Store", {
autoLoad: true,
fields: [{
dateformat: 'Y-m-d',
name: 'TimeCol',
type: 'date'
}, {
name: 'Col4',
type: 'string'
}, {
name: 'Col2',
type: 'float'
}, {
name: 'Col3',
type: 'float'
}, {
name: 'Col1',
type: 'float'
}, {
dateformat: 'Y-m-d',
name: 'DateCol',
type: 'date'
}],
proxy: {
reader: {
root: 'rows',
totalProperty: 'nrows',
type: 'json'
},
type: 'ajax',
url: 'data.json'
}
}),
title: 'ExtJS Line Chart'
});
});


Regards,
Scott.

RuBenKlunZ
26 Jun 2012, 12:23 AM
I have the same problem, only I have it in IE9 even with ExtJS 4.1