I'm using extjs 4 now, with its Ext.chart.axis.Category.
But how to custom the label in each word?
Say, I have 72 numbers in the label at the bottom of the axis, and I want bold 24 and 48 only.
I've checked the Ext.chart.Label, and did found there's a useful function called renderer. But it is only used for text change, not a style change.
My example code snippet:
{
xtype: 'chart',
id: 'monitorAmmeter72chart',
animate: false,
region: 'center',
store:Ext.data.StoreManager.lookup('monitorAmmeter72Store'),
axes: [
{
type: 'Category',
fields: ['hourDis'],
position: 'bottom',
title: 'blablabla',
grid: true,
label:{
renderer:function(v){
if(v == '24'){
return '<b>24</b>';//Note, this won't work.
}else{
return v;
}
}
}
},
{
type: 'Numeric',
fields: ['data'],
position: 'left',
title: 'another blablabla',
grid: true,
minimum: 0
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: false,
tips: {
trackMouse: false,
width: 50,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('data') + ' xx');
}
},
style: {
fill: '#38B8BF'
},
gutter: 20,
xField: 'hour',
yField: 'data'
}
]
}
i'm using extjs 4.2.1 and i'm doing :
label: {
renderer: function(v) {
if(v == 'Capitale-Nationale'){
this.font = "bold 12px Arial, Helvetica, sans-serif";
this.padding = 5;
}
else{
this.font = "12px Arial, Helvetica, sans-serif";
this.padding = 5;
}
return v;
}
},
You could actually create a HTML string in the renderer and style it as you need. Isn't it an option?
Related
Hi I am having a hard time to figure out what's wrong on sencha-chart is this a bug or just a syntax error. To start I have an application which uses the new sencha-charts of extjs 5. After I adjusted I came up with the ff codes which is working already problem is when I add listener to it, the listener event is not working. Please can anyone help me on this.:
items: [{
cls: 'chartclass',
xtype: 'chart',
flex: 1,
interactions: [{
type: 'panzoom',
zoomOnPanGesture: false,
axes: {
left: {
maxZoom: 1
}
}
}],
bind: '{chartstore}',
minHeight: 350,
animation: true,
style: 'background: #fff',
insetPadding: '40px 40px 20px 30px',
width: '100%',
height: 500,
insetPadding: 40,
interactions: 'itemhighlight',
axes: [{
type: 'numeric',
position: 'left',
fields: ['utilcost'],
fontSize: 12,
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['date'],
label: {
rotate: {
degrees: -90
}
}
}],
//series
series: [{
type: 'bar',
xField: ['date'],
yField: ['utilcost'],
style: {
minGapWidth: 15,
opacity: 0.80
},
highlight: {
strokeStyle: 'black',
fillStyle: '#c1e30d',
lineDash: [5, 3]
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
var title = item.series.getTitle();
this.setHtml(storeItem.get(item.series.getYField()));
}
},
label: {
field: 'utilcost',
display: 'insideEnd'
},
listeners:{
itemmouseup: function(item){
alert('working');
}
}
}];
No error on the console log. all elements are working except firing the event.Please please help. I've tried a lots of solution already but none of those work.
Thank you
Graph:
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
});
this not working.
{
xtype : 'panel',
layout : {
type : 'hbox',
pack : 'center'
},
id:'graphpanel',
width : 940,
margin : '20 0 20 0',
border : 0,
items: chart
}
this working.
var win = Ext.create('Ext.window.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Bar Chart',
autoShow: true,
layout: 'fit',
items: chart
});
here is my problem graph working fine in popup window but not in panel. if i popup window first then only graph is rendering in panel.
pl'z help sorry for bad code formatting..:(
You're not providing the chart with dimensions, either explicitly (giving it a width and height) or implicitly (by using an appropriate layout).
The panel layout should be fit. Also, be sure whatever is the parent of that panel is giving it a height.
Similar to this post in the Sencha forums, how do I get the labels in this (image below) to show up vertically and line up with the grid? Seems like this should be charting basics, but maybe I missed something.
Here is the jsFiddle with the code: http://jsfiddle.net/wilsjd/kg6Ps/8/
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.define('CPI', {
extend: 'Ext.data.Model',
fields: [{
name: 'ReportingPeriod',
type: 'string'
}, {
name: 'PeriodAmount',
type: 'decimal'
}, {
name: 'CumulativeAmount',
type: 'decimal'
}]
});
var store1 = Ext.create('Ext.data.Store', {
model: 'CPI',
data: [{
ReportingPeriod: 'Period1',
PeriodAmount: 1,
CumulativeAmount: 1.2,
Target: 1
}, {
ReportingPeriod: 'Period2',
PeriodAmount: 1.2,
CumulativeAmount: .2,
Target: 1
}, {
ReportingPeriod: 'Period9',
PeriodAmount: 1.5,
CumulativeAmount: 0.8,
Target: 1
}]
});
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
theme: 'Category1',
store: store1,
width: 300,
height: 300,
renderTo: 'chart',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['PeriodAmount', 'CumulativeAmount'],
title: 'CPI'
},{
type: 'Category',
position: 'bottom',
fields: ['ReportingPeriod'],
title: 'Reporting Period',
label : {
rotation:{degrees:270}
}
}],
series: [{
type: 'column',
axis: 'left',
xField: 'ReportingPeriod',
yField: 'PeriodAmount',
renderer: function(sprite, record, attr, index, store) {
var value = 0;
if(record.get('PeriodAmount')>=1){
value = 0;
}else{
value = 1;
}
var color = ['rgb(127, 255, 127)',
'rgb(255, 0, 50)'
][value];
return Ext.apply(attr, {
fill: color
});
}
}, {
type: 'line',
axis: 'left',
xField: 'ReportingPeriod',
yField: 'CumulativeAmount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
}
}]
});
chart.show();
I changed rotation to rotate and it works.
label:{
rotate:{degrees:270}
}
Per usual, the people at sencha's forum are as helpful as a punch to the throat: http://www.sencha.com/forum/showthread.php?156746-line-chart-time-axis-label-rotate-issue&p=678586&viewfull=1#post678586
It appears to be set via dy attribute in the html:
<tspan x="96" dy="3.75">Period1</tspan>
Altering dy will move the h-pos left or right. Unfortunately, there doesn't seem to be an inbuilt way to do it though.
Bottom line: it might be a bug (as a dev mentions in the above link -- but helpfully doesn't expand upon).
I'm trying to make a chart(ext 4.1):
var chart = Ext.create('Ext.chart.Chart', {
width: 280,
height: 230,
animate: true,
autoSize: true,
shadow: true,
store: storeChart2,
renderTo: 'chart2',
legend: {
//position: 'right'
},
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data',
showInLegend: false,
highlight: {
segment: {
margin: 20
}
},
tips: {
trackMouse: true,
width: 100,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + Math.round(all * storeItem.get('data') / 100) +' ('+ Math.round(storeItem.get('data') / 100 * 100) + '%)');
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
}
}]
});
AutoSize: true, - don't work. In Chrome console:
Error: Invalid value for <svg> attribute width="-Infinity"
Error: Invalid value for <svg> attribute height="-Infinity"
What's wrong?
Try to add a property,
minimum: 0
Please refer this post
I'm having trouble with result rendered by line chart example from extjs4
the columns are rendered correctly but the line is not, notice in the picture how i need to have 4 while its drawed in the 0 xpoint also the second plot is supposed to be 5 when its draw in 2:
here is my code:
panel3 = Ext.create('widget.panel', {
width: 600,
height: 200,
frame: false,
renderTo: 'line',
layout: 'fit',
items: {
xtype: 'chart',
animate: false,
store: storeline,
insetPadding: 20,
gradients: [{
angle: 90,
id: 'bar-gradient',
stops: {
0: {
color: '#99BBE8'//C12283
},
70: {
color: '#77AECE'
},
100: {
color: '#77AECE'
}
}
}],
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 10,
position: 'left',
fields: ['data1'],
title: false,
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0'),
font: '10px Arial'
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: false,
grid: true,
label: {
font: '11px Arial',
rotate: {
degrees: 300
}
}
}],
series: [{
type: 'column',
axis: 'left',
xField: 'name',
yField: 'data1',
display: 'over',
style: {
fill: 'url(#bar-gradient)',
'stroke-width': 30
} ,
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 20,
fill: '#38FFFF',
stroke: '#38B8BF'
}
},
{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data2',
tips: {
trackMouse: true,
width: 110,
height: 25,
//baseCls: 'customtip', //bodyStyle: 'background:#6cc; ',
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ' : ' + storeItem.get('data2'));
}
},
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 5,
radius: 5,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
}
}]
}
});
In your axis definition try changing
fields: ['data1'],
to
fields: ['data1', 'data2'],
Also verify that the data being loaded into the data2 field is an actual integer. ExtJs might be reading it as a string and therefore is unable to match it with a value on the left axis.