PDA

View Full Version : TimeAxis plotting in Ext JS 4.0



sai571
19 Jan 2012, 2:07 AM
Hi,

I'm trying to plot a line graph with TimeAxis at the bottom. I'm not getting the display itself properly can some one help me on this?





Ext.onReady(function(){
securitiesStore = Ext.create('Ext.data.ArrayStore', {
fields : [
{ name : 'options', type : 'int' },
{ name : 'gross', type : 'float'} ,
{ name : 'net', type : 'float'} ,
{ name : 'taxes', type : 'float'} ,
{ name : 'vestDate', type : 'date', dateFormat : 'Y-m-d'} ,
{ name : 'plan', type : 'string'}
],
data : transformGrantsToPotentialValue(myData,grantPrice)
});

var grantPriceSlider = Ext.create('Ext.slider.Single', {
renderTo: 'basic-slider',
width: 200,
minValue: 0,
hideLabel: true,
useTips: false,
maxValue: 100,
value : grantPrice,
tipText: function(thumb){
return '$' + thumb.value;
},
listeners : {
'dragend' : function(slider, eObj, eOpts) {
grantPriceValueEl = $('#grantPriceValue');
grantPriceValueEl.html(slider.getValue());

transformedData = transformGrantsToPotentialValue(myData, slider.getValue());
securitiesStore.removeAll();
securitiesStore.loadRawData(transformedData);
}
}
});

Ext.create('Ext.chart.Chart', {
renderTo: 'line-graph',
width: 450,
height: 350,
animate: true,
store: securitiesStore,
legend: {
position: 'bottom'
},
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['gross', 'taxes', 'net'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Potential Value',
minorTickSteps: 5,
minimum: 0
},
{
type: 'Time',
position: 'bottom',
dateFormat : 'Y M',
fields : ['vestDate'],
step : [Ext.Date.YEAR, 1],
title: 'Vesting Schedule',
fromDate : new Date('1/1/2011'),
toDate : new Date('12/31/2014'),
label : {
rotate: {
degrees: -90
}
}
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'vestDate',
yField: 'gross'
},
{
type: 'line',
highlight: {
size: 5,
radius: 5
},
axis: 'left',
xField: 'vestDate',
yField: 'taxes'
},
{
type: 'line',
highlight: {
size: 4,
radius: 4
},
axis: 'left',
xField: 'vestDate',
yField: 'net'
}
]
});

});

30826
Thanks,
Sai.

sai571
19 Jan 2012, 6:52 AM
Hi have tried emulating TimeAxis with Numeric/Numeric/ axis but it's not working. Has anyone a working chart with Numeric/Numeric axes? I mean both the axes are numeric.

Thanks,
Sai.