PDA

View Full Version : Incorrect rendering in chart with remote xml payload data



menasce
19 Apr 2014, 2:09 AM
The following script tries to display data requested to a remote server in the form of an xml payload inside a chart.
The xml payload is attached at the end of this message.

What I get is a line with totally meaningless values: if I modify the script to manage locally defined data it works correctly. Can someone be of any help on this?
Thanks


Ext.require
(
[
'Ext.window.Window',
'Ext.chart.*'
]
);

Ext.onReady
(
function ()
{
var chart ;
var timeAxis ;
var intr = 0 ;

Ext.define
(
'dataModel',
{
extend: 'Ext.data.Model',
fields: ['timeStamp', 'xc']
}
);

var store = Ext.create
(
'Ext.data.XmlStore',
{
model : 'dataModel',
proxy : {
type : 'ajax',
url : 'http://blablabla/cgi-bin/blabla/wireless/getData.pl',
reader: {
type : 'xml',
root : 'items',
record: 'item'
}
},
autoLoad : false
}
);

var stopW = Ext.create(
'Ext.window.Window',
{
width : 270,
height : 65,
minHeight : 30,
layout : 'hbox',
items : [
{
xtype : 'button',
text : 'Single step' ,
itemId : 'stepBtn',
disabled: false,
handler : function()
{
store.load() ;
}
}
]
}
) ;

stopW.setPosition(250,10) ;
stopW.show() ;

var representation = 'line' ;

var win = Ext.create(
'Ext.window.Window',
{
width : 800,
height : 600,
minHeight : 400,
minWidth : 550,
maximizable: true,
title : 'Wireless test',
layout : {
type : 'fit',
},
items : [
{
xtype : 'chart',
style : 'background:#edd',
itemId: 'chartCmp',
store : store,
axes : [
{
title : 'Coordinates (x,y,z)',
type : 'Numeric',
position : 'left',
fields : ['xc'],
},
{
title : 'Time',
type : 'Numeric',
position : 'bottom',
fields : 'timeStamp'
}
],
series: [
{
type : representation,
axis : ['left', 'bottom'],
xField : 'timeStamp',
yField : ['xc'],
label : {
display : 'none',
field : 'xc',
renderer : function(v) { return v >> 0; },
'text-anchor': 'middle'
},
markerConfig: {
radius: 5,
size : 5
}
},
]
}
]
}
).show();

win.setPosition(10,150) ;

setTimeout(
function()
{
chart = win.child('#chartCmp');
timeAxis = chart.axes.get(1);
},
100
) ;
}
);

This is the plot I get:

http://hal9000.mib.infn.it/~menasce/dottorato/esercizi/wireless/plot.png

Following is the xml data payload (I checked with Firebug that the store actually contains these data).


<items>
<item>
<timeStamp>1</timeStamp>
<xc>82.6620334600197</xc>
</item>
<item>
<timeStamp>2</timeStamp>
<xc>78.2347153962718</xc>
</item>
<item>
<timeStamp>3</timeStamp>
<xc>90.8335423135338</xc>
</item>
<item>
<timeStamp>4</timeStamp>
<xc>76.5075201491477</xc>
</item>
<item>
<timeStamp>5</timeStamp>
<xc>88.7013456912502</xc>
</item>
<item>
<timeStamp>6</timeStamp>
<xc>13.4760112719945</xc>
</item>
</items>

evant
19 Apr 2014, 9:22 PM
You need to specify the type parameter on your model definitions. When you use JSON, you get the type encoded by virtue of it being JSON. In XML everything is a string.



Ext.define('dataModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'timeStamp',
type: 'int'
}, {
name: 'xc',
type: 'float'
}]
});