PDA

View Full Version : Dynamic chart with all zero Y axis values



gouthamrv
24 Feb 2013, 3:43 PM
I have a dynamic chart (I re-draw same chart for a drop down value change event). For certain drop down values all Y axis values are 0 and chart only shows X axis values without Y axis.

Is there anyway to override this behavior? Either I want to show Y Axis with 0 value or do not show graph at all. I cannot set max value to Y axis as it changes for every drop down value...any other suggestions?

kramal
25 Feb 2013, 6:03 AM
Hello ! 1 or 2 month ago I did some apps like it. If you find something usefull for you here, i will be glad.
Here screenshot:

42027and code


Ext.onReady(function()
{




var mymaxY=100,myminY=-100,mymaxX=100,myminX=-100;
var param={exA:100,exB:20,exC:0};
var mydata=[];
var someFunc=function(i)
{
return param.exA*Math.sin(i/param.exB)+param.exC;
}

var makeData=function()
{//now only sinus
mydata=[];
for(var i=-100;i<100;i++)
{
//mydata.empty();
mydata.push({tmp : i,val : someFunc(i)});
}

}

var makeData_1=function()
{//now only sinus
mydata=[];
for(var i=-100;i<100;i++)
{
//mydata.empty();
mydata.push({tmp : i,val : i*i});
}

}

makeData();

Ext.define('Heat',
{
extend :'Ext.data.Model',
fields :['tmp','val']
});

var storeFunc=function()
{
return Ext.create('Ext.data.Store',
{
model :'Heat',
data : mydata
});
}


var chartFunc=function()
{
return Ext.create('Ext.chart.Chart',
{
renderTo:Ext.getBody(),
width :800,
height :400,
store :storeFunc(),

axes :
[
{
title :'Heat',
type :'Numeric',
position:'left',
fields :['val'],
minimum :myminY,
maximum :mymaxY,
grid :true

}
,
{
title :'Temperature',
type :'Numeric',
position:'bottom',
fields :['tmp'],
minimum :myminX,
maximum :mymaxX,
grid :true


}
]
,

series :
[{
type :'line',
xField :'tmp',
yField :'val',
showMarkers:false
}]
,

theme :'Green'

});
}



var chartHaveFunc=function()
{
return Ext.create('Ext.panel.Panel',
{
title :'Graphic of',
region :'center',
collapsible :true,
mychart :null,
items :[mychart=chartFunc()]
});
}


var mExA=Ext.create('Ext.form.field.Text',{value:param.exA,fieldLabel:' A = '});
var mExB=Ext.create('Ext.form.field.Text',{value:param.exB,fieldLabel:' B = '});
var mExC=Ext.create('Ext.form.field.Text',{value:param.exC,fieldLabel:' C = '});

var mExBR=Ext.create('Ext.Button',
{
text:'Reset ',

handler :function()
{
mExA.reset();
mExB.reset();
mExC.reset();
}
});

var mExBD=Ext.create('Ext.Button',
{
text:'Draw ',
listeners :
{
click:function()
{
param.exA=mExA.getValue()-0;
param.exB=mExB.getValue()-0;
param.exC=mExC.getValue()-0;


mydata=[];
makeData();
main.hide();
main=mainFunc();
//main.mymenu=menu;
//win.show();
}
}
});

var menu=Ext.create('Ext.panel.Panel',
{
title :'Menu Interface',
collapsible :true,
region :'east',
bodyPadding :5,
layouts :
{
padding:2,
margin:2,
align :'stretch'
},
items :
[
{
layout:
{
type :'accordion',
titleCollapse :false,
animate :true,
activeOnTop :true
}
,
items:
[
{
title :'For Example y=Asin(Bx)+C',
layouts :
{
padding:2,

type:'hbox'

},
items :
[
//i am here
mExA,
mExB,
mExC,
mExBR,
mExBD


]
}
,
{
title :'Main Work',
items :
[


]
}
]

}

]
});


var mainFunc=function()
{
return Ext.create('Ext.Panel',
{
//title :'Numeric Methods . Heat Equation',
width :700,
height :500,
//defaults : { flex : 1 },
renderTo:'mycore',
layout :'border',
mychartHave:null,
mymenu :null,
resizable:
{
pinned:true,
dynamic:true
}
,
items :
[

mychartHave=chartHaveFunc(),
mymenu=menu
]
});
}

main=mainFunc();




});


you must define accordingly div elements with ids
'mycore'
"mExam"
"mMain"