The gauge is showing up just fine but the label "Some diff data" does not show up under the chart as expected. Ext JS 4 API - Gauge says display denotes how the label gets displayed. I assume title is the label. Any ideas?
series: [{
type: 'gauge',
field: 'diff1',
donut: false,
title: "Some diff data",
display: 'under', //tried outside as well
colorSet: ['#FFFFCC', '#FF9999']
}]
You are correct that the title field is for the title. But it's not specified as part of the series...it needs to be applied to the axes. Such as, like this:
items: [{
xtype: 'chart',
data: 'data',
height: 200,
width: 200,
animate: true,
store: 'store1',
axes: [{
position: 'gauge',
title: 'Your Title Here', // << HERE >>
type: 'Gauge',
margin: 8,
maximum: 100,
minimum: 0,
steps: 4
}],
series: [{
type: 'gauge',
angleField: 'data1',
donut: 60,
needle: false
}]
create text sprites for the title or any labels.
Look at the Ex.draw package.
Related
Hi I am using sencha touch 2.1.1 charts to show the polls result as in cartesian chart format.I assigned my axes type as 'integer'. My given input values for chart's store are always whole numbers only(like 1,2,3...). But the drawned graph axis contains decimals, but i no need of decimals in my axis.How to fix this.Thanks in advance.
Ext.define("KBurra1.view.PollChart",{
extend:"Ext.chart.CartesianChart",
requires:['Ext.data.JsonStore','Ext.chart.axis.Numeric','Ext.chart.axis.Category','Ext.chart.series.Bar'],
config:{
store:null,
//id:"poll_chart",
height:'200px',
flipXY: true,
axes: [{
type: 'numeric',
minimum:0,
//maximum:3,
//increment:1,
position: 'bottom',
title: 'Number of Votes',
grid: {
odd: {
opacity: 1,
fill: '#dddc',
stroke: '#bbb',
lineWidth: 1
},
},
}, {
type: 'category',
position: 'left',
grid: true,
label: {
rotate: {
degrees:330
},
}
}],
series: [{
//title : ['data1'],
type: 'bar',
xField: 'answer',
yField: ['votecount'],
style: {
fill:'#57a4f7',
minGapWidth:5,
},
stacked : false
}]
}
});
You can use the built in javascript function "toFixed(0)" this will give it 0 decimal places. Also if you want 1 decimal place just put 1 instead of 0.
To use it in the chart add a render property to the axes with a little function that does it. In my app I was dealing with numbers in millions so I divide by 1000000 and then display only 1 decimal.
axes: [
{
type: 'numeric',
position: 'left',
fields: ['population','phones'],
minimum: 0,
renderer: function (value) {
value = value / 1000000;
return value.toFixed(1);
},
grid: true
},
In your case just multiply by 100 and use toFixed(0)
I have a radar chart with 4 radar series, i want to use renderer function for each type.
My sample code is :
series: [{
type: 'radar',
xField: 'name',
yField: 'data3',
renderer: function(storeItem, item, i, display){
alert(storeItem)
},
showInLegend: true,
showMarkers : false,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#FFF',
fill: 'none'
}
},{
type: 'radar',
xField: 'name',
yField: 'data2',
showMarkers: true,
showInLegend: true,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#FF0',
fill: 'none'
}
},{
type: 'radar',
xField: 'name',
yField: 'data5',
showMarkers: true,
showInLegend: true,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#0FF',
fill: 'none'
}
}]
where to add renderere function? I tried adding in all possible ways but its not working.
Am i doing any mistake? or the function is not there for radar chart?
pls some one let me know
Im using extjs4.1.0
When in doubt, grep the source.
The renderer function is never called in a radar chart. Looks like another documentation bug. The label.renderer function gets called but it's only good for formatting the display text.
There is a form panel, and it acts like a container. Then i have another form panel, where i am adding a textfield and a button. I need this form panel to be in the center of the screen. And the button bottom of the textbox (I should be able to position it where ever in the form. Like Absolute layout).
My code is as follows; and it doesn't work the way i want it to. can some one look into this
Ext.define('MyApp.view.MyView', {
extend: 'Ext.form.Panel',
alias: 'widget.myview',
frame: true,
height: 800,
hidden: false,
hideMode: 'visibility',
id: 'myviewid',
autoScroll: false,
bodyPadding: 5,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'form',
height: 330,
width: 400,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'Care Fusion User Login',
anchor: '250 250',
items: [{
xtype: 'textfield',
id: 'name',
width: 233,
name: 'name',
fieldLabel: 'Nmae',
growMax: 200,
x: 10,
y: 30
} {
xtype: 'button',
height: 30,
width: 256,
text: 'Click',
x: 240,
y: 110
}]
}]
});
me.callParent(arguments);
}
});
Try to use following layout in your outer container:
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
then you inner form will be placed in the center of this outer form.
I have a Tab Panel and in that i have added a grid Panel. Now when i re-size my browser window (as in make it small), i want the grid columns and all other components to be shrinked and adjust the sizes so it would show the view in any window size. how can i do this ?
I am using sencha-architect2
Ext.define('App.view.ExView', {
extend: 'Ext.tab.Panel',
autoRender: true,
autoShow: true,
frame: true,
height: 600,
id: 'mainpanel',
width: 1360,
maintainFlex: false,
suspendLayout: false,
hideCollapseTool: false,
title: 'Example Project',
titleCollapse: false,
activeTab: 0,
plain: true,
fullscreen: 'true',
GRID
items: [
{
xtype: 'gridpanel',
autoShow: true,
height: 100,
minHeight: 40,
minWidth: 50,
autoScroll: true,
title: 'Grid',
store: 'storegrid',
layout: {
type: 'fit'
},
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
maintainFlex: false,
dataIndex: 'name',
flex: 1,
text: 'name'
},
{
xtype: 'gridcolumn',
maintainFlex: false,
dataIndex: 'age',
flex: 1,
text: 'age'
}
]
}
]
}
]
});
use anchor layout to your container
This is a layout that enables anchoring of contained elements relative to the container's dimensions. If the container is resized, all anchored items are automatically rerendered according to their anchor rules.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Anchor
I want to add an account Info section to my app, it would contain name and role of the current user
In my server side i can get those infos, but i dont know how to send them from server to my form and display them in a displayfield
The only way I know of dynamically populating data from sever is in grids using store.
How can i do this please?
my extjs code:
xtype: 'form',
border: false,
frame: true,
height: 100,
width: 400,
layout: 'column',
items: [
{ columnWidth: .5,
border: false,
frame: true,
height: 50,
defaults: { labelStyle: 'font-size:11px' },
items: [{
xtype: 'displayfield',
id: 'Customer',
fieldLabel: 'Customer',
value: '<span style="color:blue;font-size:9px">IBM</span>'
}]
}, {
columnWidth: .5,
border: false,
frame: true,
margin: '0 0 0 8',
height:50,
defaults: { labelStyle: 'font-size:11px' },
items: [
{
xtype: 'displayfield',
id: 'role',
fieldLabel: 'Role',
value: '<span style="color:blue;font-size:9px">Admin</span>'
}
]
Feel free to ask for more details if its not clear enough.
Thank you
Use form.loadRecord(record). Any fields whose name mathches your model fields will be set.
To get the record you can use MyModel.load() see the sencha guides for this http://docs.sencha.com/ext-js/4-0/#!/guide/data .