PDA

View Full Version : Problem with Ext.chat Timeaxis



Alaeddinetn
28 May 2012, 3:06 AM
Hello sencha forum members :


im trying to deploy a S Curve using Extjs 4.1 .. i have a displaying error .. and i m just a starter in extjs



that what i m gotting in the picture below : 35664



that's the code that i implemented :



Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);


Ext.onReady(function () {




Ext.define('Projet', {
extend: 'Ext.data.Model',
fields: [
{name: 'NomProjet', type: 'string'},
{name: 'DateDebutReelle', type : 'date', dateFormat : 'Y-m-d'},
{name: 'DateFinReelle', type : 'date', dateFormat : 'Y-m-d'},
{name: 'DateDebutBaseline', type : 'date', dateFormat : 'Y-m-d'},
{name: 'DateFinBaseline', type : 'date', dateFormat : 'Y-m-d'},
{name: 'ProgressionProjet', type: 'int'}
]
});



Ext.define('Scurve',{
extend : 'Ext.data.Model',
fields: [
{name: 'BCWP', type: 'int'},
{name: 'BCWS', type: 'int'},
{name: 'baselinestart', type : 'date', dateFormat : 'Y-m-d'},
{name: 'start', type : 'date', dateFormat : 'Y-m-d'}
]


}) ;

Ext.getUrlParam = function(param) {
var params = Ext.urlDecode(location.search.substring(1));
return param ? params[param] : params;
};
var param = Ext.getUrlParam('IdP');


var storeProjet = Ext.create("Ext.data.Store", {
model : 'Projet',
autoLoad: true,



proxy : {
type : 'ajax',
extraParams: {IdP : param } ,
reader: {
type : 'xml',
// records will have a 'Task' tag
root: "Projets",
record : "Projet",
} ,
api : {
read : '/fr/rapport/get_info_projet.php/',
}
},
});

var store = Ext.create("Ext.data.Store", {
model : 'Scurve',
autoLoad: true,



proxy : {
type : 'ajax',
extraParams: {IdP : param } ,
reader: {
type : 'xml',
// records will have a 'Task' tag
record: "Scurve",
root: "Scurves"
} ,
api : {
// read : '/fr/rapport/cree_taux_allocation_par_projet.php/',
read : 'scurve.xml' ,
}
},
});

var grid = Ext.create('Ext.grid.Panel', {
store: storeProjet,
columnLines: true,



columns: [
{text: "Nom Projet ", flex : 2, dataIndex: 'NomProjet'} ,
{text: "Start", flex : 2, renderer : Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'DateDebutReelle'},
{text: "End", flex : 2, renderer : Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'DateFinReelle'},
{text: "Baseline Start",flex : 2, renderer : Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'DateDebutBaseline'} ,
{text: "Baseline End",flex : 2, renderer : Ext.util.Format.dateRenderer('d/m/Y'),dataIndex: 'DateFinBaseline'},
{text: "Progression", flex : 1, dataIndex: 'ProgressionProjet'},
] ,
viewConfig: {
stripeRows: true
}

// renderTo : Ext.getBody()
});

var chart = Ext.create('Ext.chart.Chart',{


id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['BCWP', 'BCWS'],
title: 'Budjet',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Time',
position: 'bottom',
fields: ['start','baselinestart'],
title: 'Durée Projet' ,
dateFormat: 'Y-m-d',
groupBy: 'year,month,day',


aggregateOp: 'sum',


constrain: true,
fromDate: new Date('2012-01-01'),
toDate: new Date('2012-04-01')
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'start',
yField: 'BCWP',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'baselinestart',
yField: 'BCWS',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]

});










var win = Ext.create('Ext.Panel', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'border',

items: [
{
region: 'north',
collapsible: true,

title: 'Project info',
xtype: 'panel',
items : grid,
layout:'fit'

},
{
region: 'center',

title: 'Workload',
xtype: 'panel',
layout:'fit',
items : chart
}

]
});
});




and the data that im loading :




<?xml version="1.0" encoding="UTF-8"?>
<Scurves>
<Scurve>
<start>2012-01-10</start>
<BCWP>20</BCWP>
<baselinestart>2012-01-08</baselinestart>
<BCWS>15</BCWS>
</Scurve>
<Scurve>
<start>2012-01-17</start>
<BCWP>70</BCWP>
<baselinestart>2012-01-15</baselinestart>
<BCWS>60</BCWS>
</Scurve>
<Scurve>
<start>2012-02-09</start>
<BCWP>140</BCWP>
<baselinestart>2012-02-05</baselinestart>
<BCWS>120</BCWS>
</Scurve>
<Scurve>
<start>2012-02-18</start>
<BCWP>200</BCWP>
<baselinestart>2012-02-14</baselinestart>
<BCWS>170</BCWS>
</Scurve>
<Scurve>
<start>2012-03-02</start>
<BCWP>290</BCWP>
<baselinestart>2012-02-27</baselinestart>
<BCWS>220</BCWS>
</Scurve>
<Scurve>
<start>2012-03-09</start>
<BCWP>320</BCWP>
<baselinestart>2012-03-02</baselinestart>
<BCWS>240</BCWS>
</Scurve>
<Scurve>
<start>2012-03-12</start>
<BCWP>330</BCWP>
<baselinestart>2012-03-01</baselinestart>
<BCWS>250</BCWS>
</Scurve>
<Scurve>
<start>2012-03-15</start>
<BCWP>340</BCWP>
<baselinestart>2012-03-03</baselinestart>
<BCWS>260</BCWS>
</Scurve>
</Scurves>

Alaeddinetn
28 May 2012, 4:57 AM
resolved : i found the error .. series must be like the code below :


series: [{ type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: ['left', 'bottom'],
xField: 'start',
yField: 'BCWP',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: ['left', 'bottom'],
smooth: true,
xField: 'baselinestart',
yField: 'BCWS',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]