Related
when I use more then five letters in my name it comes out of the chart see the image i uploaded i am using extjs 6 I just want to have a large name on my chart
{
xtype: 'polar',
split: true,
flex: 0.3,
colors: [
'#347327',
'#2897d2',
'#de6110',
],
bind: {
store: '{pie}'
},
series: [{
type: 'pie',
showInLegend: true,
donut: false,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data'));
}
},
highlight: {
segment: {
margin: 15
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
xField: 'data'
}],
interactions: [{
type: 'rotate'
}]
}
here is My dynamically given names i want that names in side of my pie chart i mean above on the chart But when i use name that contain more then 5 letters it goes out side of the chart i will upload a image.
var pieStore = this.getViewModel().getStore('pie');
var rec = selected[0];
if (rec.get('new')) {
pieStore.add({
'name': 'NEW',
data: rec.get('new'),
total: rec.get('total')
});
}
if (rec.get('openToQc')) {
pieStore.add({
'name': 'QC',
data: rec.get('openToQc'),
total: rec.get('total')
});
}
if (rec.get('open')) {
pieStore.add({
'name': 'Open',
data: rec.get('open'),
total: rec.get('total')
});
}
if (rec.get('rejected')) {
pieStore.add({
'name': 'Rejected',
data: rec.get('rejected'),
total: rec.get('total')
});
}
The problem is on your series label:
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
display: 'rotate', displays the label inside the chart in some cases and outside in others, you should use instead display: 'inside',
You can see a working example here
I first tried to render a pie chart using xtype into centre region of a panel with border layout. Here is the code:
{
xtype:'pie',
renderTo: Ext.getBody(),
width: 200,
height: 150,
animate: true,
layout:'fit',
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'salary',
showInLegend: true,
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
I am getting the following error:
Uncaught TypeError: Cannot call method 'substring' of undefined
But when i take the same code and use Ext.create then it is working fine.
var chart=Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 200,
height: 150,
animate: true,
layout:'fit',
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'salary',
showInLegend: true,
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
I am using chart as an item instead.
What can be the problem?
Here is the store:
var store=Ext.create('Ext.data.Store',{
model:'Layouts.Person',
autoLoad:true,
data:{'items':[
{'name':'john','empno':'1111','salary':'1234'},
{'name':'edward','empno':'1212','salary':'2234'},
{'name':'frank','empno':'1567','salary':'9774'},
{'name':'michel','empno':'3456','salary':'8932'},
]},
proxy:{
type:'memory',
reader:{
type:'json',
root:'items'
}
}
});
The xtype for pie chart is pie:
http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.chart.series.Pie.html
try this code it will work out for you.
{
xtype:'chart',
animate: true,
width: 500,
height: 300,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
Hello I want to show and image that is like an alert sign when a change is done, then I have a footer panel like this one, with the sign:
Ext.define('footerPanel', {
extend: 'Ext.panel.Panel',
cls: 'fastec_background',
height: 24,
autoScroll: false,
border: false,
layout: {
type: 'border'
},
id: 'panel_footerFastec',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
margin: '5 5 0 20',
xtype: 'label',
region: 'center',
html: '<a>© 2012 FASTEC GmbH, Paderborn, Germany - </a><a target="_blank" href="http://www.easyoee.de">www.easyOEE.de</a> <a target="_blank" href="http://www.fastec.de">www.fastec.de</a>'
}, {
xtype: 'container',
region: 'east',
layout: 'table',
id: 'cont_footer_icons',
items: [{
xtype: 'image',
id: 'configchangedIcon',
height: 16,
margin: '5 0 5 0',
width: 16,
maxHeight: 20,
dock: 'right',
maxWidth: 20,
scale: 'large',
src: 'files/images/disk_blue.png',
hidden: true
}, {
xtype: 'image',
height: 16,
id: 'errorIcon',
margin: '5 0 5 0',
width: 16,
dock: 'right',
maxHeight: 20,
maxWidth: 20,
scale: 'large',
src: 'files/images/error16.gif',
hidden: true
}]
}]
});
me.callParent(arguments);
}
});
And the idea is that I have a general function which I could call anywhere and show or hide the icon, but unfortunately I call this function and nothing happens:
changeIconVisibility = function(str, value) {
try {
switch(str){
case 'configchangedIcon':
var img = Ext.getCmp('configchangedIcon');
if(value){
img.setVisible(true);
}else{
img.setVisible(false);
}
break;
}
} catch (e) {
Ext.msg.alert(e);
}
}
I tried by directly calling the component and setVisible(true) as well and nothing happens.
get the footerPanel component and use hide/ show method.
like
var myPanel = Ext.getCmp('your_panel');
myPanel.items.items[1].hide() //second item
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-hide
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-show
I have 3 extJs Windows. Each have some form control and then two tabs that display chart. Currently all windows appear at the same place and i have to drag them to make them stand in a row like this | | | . How can i create a 3 columns on screen and place each window in one of them. Please find the code of one of the window below. And yes i have seen this link
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html but it doesnt help my cause. None of the content is displayed if i create 3 column layout like the what's mentioned in the link. Please assume that all of windows have the same code and suggest a way. One more thing, i have closable, and maximizable feature in all of the windows.Thanks.
var win = Ext.create('Ext.Window', {
id: 'r1',
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
tbar: [{
xtype: 'combo',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: "label",
width: 20,
fieldLabel: text,
name: 'txt',
text: 'to'
}, {
xtype: 'combo',
id: 'c22devices',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
id: 'cl22devices',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: 'button',
text: 'Ok'
}],
items: [
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
}, {
xtype: 'tabpanel',
id: "tabs1",
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Normal Tab',
items: [{
id: 'chartCmp1',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: storeRouge,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['total'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['date'],
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'total',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'date',
yField: 'total'
}]
}]
}, {
title: 'Table View',
xtype: 'grid',
id: "gridChart1",
width: 200,
height: 200,
collapsible: false,
store: storeRouge,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [{
text: 'Devices',
flex: 50,
dataIndex: 'date'
}, {
text: 'Pass',
flex: 50,
dataIndex: 'total'
}]
}]
}],
listeners: {
resize: function () {
Ext.getCmp("tabs1").setWidth(this.width);
Ext.getCmp("tabs1").setHeight(this.height);
Ext.getCmp("chartCmp1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
}
}
});
The problem is, the Ext.Window while being descendand of Ext.Panel does not abide by the rules of the layout like normal Ext.Panels do, it floats by itself and is constrained only by the limits of the DOM element they're rendered to (body by default).
This means that you'll have to jump some loops to position and layout the windows manually. You can also try to create some descendand class from Ext.WindowGroup to help you manage your windows and keep them nice and tidy.
I am trying to implement a Highchart line graph with a datetime x axis on an EXTJS 3 panel so I am using extjs adapter and all the stuff provided on Sencha forums.
I am facing a very weird problem. All tick labels on my x axis are in the same position so they overlap, as seen here:
Here is the code I am working with:
var store = new Ext.data.JsonStore({
url: '/graph',
fields: [
{name: 'datamesura', type: 'int'},
{name: 'despl_hor', type: 'float'},
{name: 'despl_ver', type: 'float'}
],
root: 'dades'
});
var datastore_task = {
run: function() {
store.load();
}
};
Ext.TaskMgr.start(datastore_task);
Ext.QuickTips.init();
var chart;
chart = new Ext.ux.HighChart({
series: [{
type: 'spline',
dataIndex: 'despl_hor',
name: 'Desplaçament horitzontal'
},{
type: 'spline',
dataIndex: 'despl_ver',
name: 'Desplaçament vertical'
}],
height: 500,
width: 700,
store: store,
animShift: true,
xField: 'datamesura',
chartConfig: {
chart: {
marginRight: 210,
marginBottom: 120,
zoomType: 'xy'
},
toolbar: {
itemStyle: {
color: '#4572A7',
cursor: 'pointer'
},
layout: {
xPosition: 'right',
yPosition: 'top',
x: 0,
y: -10
}
},
title: {
text: 'Prismes',
x: -20
},
subtitle: {
text: 'Desplaçament',
x: -20
},
xAxis: [{
title: {
text: 'Data',
margin: 20
},
labels: {
rotation: 270,
y: 35
},
type: 'datetime'
}],
yAxis: [{
title: {
text: 'Valor'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
borderWidth: 0
}
}
});
new Ext.Window({
title: 'Example',
layout: 'anchor',
items: [chart]
}).show();
Graph and time scale are being rendered properly. Even dates are correct in tooltips when I rollover any point. But as you see, all labels are in the beginning of x axis.
Data is coming from a JSON file in a format like this:
{"dades":[{"datamesura":1305158400000,"despl_hor":0,"despl_ver":0},{"datamesura":1305590400000,"despl_hor":0.85509233483876,"despl_ver":0.7406906575},{"datamesura":1305763200000,"despl_hor":0.40065251939804,"despl_ver":0.3806685951},{"datamesura":1306195200000,"despl_hor":1.3354238226121,"despl_ver":0.3883164125},{"datamesura":1306368000000,"despl_hor":1.2300886025811,"despl_ver":0.3028934962},{"datamesura":1306800000000,"despl_hor":0.76491207579695,"despl_ver":0.7382504417},{"datamesura":1306972800000,"despl_hor":0.97067811781249,"despl_ver":0.3934538156},{"datamesura":1307404800000,"despl_hor":0.99251776941272,"despl_ver":0.1344402012},{"datamesura":1307577600000,"despl_hor":1.7576987265171,"despl_ver":-0.0731718418},{"datamesura":1308009600000,"despl_hor":1.7982043839063,"despl_ver":0.8377618489},{"datamesura":1308182400000,"despl_hor":1.6815243145135,"despl_ver":0.6510250418},{"datamesura":1308614400000,"despl_hor":1.4625103263909,"despl_ver":0.2423211682},{"datamesura":1308787200000,"despl_hor":1.059558961408,"despl_ver":0.9443423224},{"datamesura":1309219200000,"despl_hor":1.8495061606277,"despl_ver":0.7814450066},{"datamesura":1309392000000,"despl_hor":1.9162507008479,"despl_ver":0.6051177109},{"datamesura":1309824000000,"despl_hor":1.7213552221723,"despl_ver":0.6680561831},{"datamesura":1309996800000,"despl_hor":1.9444381633778,"despl_ver":0.8635180524},{"datamesura":1310428800000,"despl_hor":1.6798176421267,"despl_ver":0.8274643529},{"datamesura":1310601600000,"despl_hor":1.4467543786006,"despl_ver":0.4695790538},{"datamesura":1311033600000,"despl_hor":1.4726130928727,"despl_ver":0.2477731064},{"datamesura":1311206400000,"despl_hor":1.2836033705939,"despl_ver":0.2656530857},{"datamesura":1311638400000,"despl_hor":1.5078416389993,"despl_ver":0.3320340535},{"datamesura":1312243200000,"despl_hor":1.9332533948761,"despl_ver":0.9397637894},{"datamesura":1312848000000,"despl_hor":1.2659382917425,"despl_ver":0.0425702553},{"datamesura":1313452800000,"despl_hor":1.2477477249428,"despl_ver":0.8257942379},{"datamesura":1314057600000,"despl_hor":1.8118509156661,"despl_ver":0.4792052981},{"datamesura":1314662400000,"despl_hor":1.918020654138,"despl_ver":0.5906438039},{"datamesura":1315267200000,"despl_hor":1.7023765324099,"despl_ver":0.8507942294},{"datamesura":1315872000000,"despl_hor":1.973909305414,"despl_ver":0.9492018485},{"datamesura":1316476800000,"despl_hor":1.932831196975,"despl_ver":0.8957622496},{"datamesura":1317081600000,"despl_hor":1.8232818443949,"despl_ver":1.0017163985},{"datamesura":1317686400000,"despl_hor":0.73874846050601,"despl_ver":0.5016692077},{"datamesura":1318896000000,"despl_hor":0.98500785814124,"despl_ver":0.2459143327},{"datamesura":1320192000000,"despl_hor":1.8171299009977,"despl_ver":0.695824387},{"datamesura":1321401600000,"despl_hor":1.0247267158126,"despl_ver":0.9220291425},{"datamesura":1322524800000,"despl_hor":1.7464007827529,"despl_ver":0.7178103147},{"datamesura":1323734400000,"despl_hor":1.8637498241985,"despl_ver":0.7515986697}]}
Does anyone have a clue? I am about to give up and try another charting library even though I like Highcharts very much.
This seems like an issue w/the span of the x-axis. I'm not at all familiar w/the ExtJS adapter but I would suggest looking into any of these:
Could your options be pointing to the wrong field?
Using the series.pointStart/series.pointInterval controls
Using the xAxis setExtremes controls