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
Related
I want to show the title on Top, here is the code for same and please see the output below:
Data is coming but it overwrites the title , so is there anyway to show title separately on to the top, can anybody help?
items: {
xtype: 'chart',
animate: true,
shadow: true,
store: store,
legend: {
position: 'top',
title: 'XYZ ....',
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('startPeriod') + 'to ' + storeItem.get('endPeriod'));
}
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['per01', 'per02'],
title: false,
grid: true,
roundToDecimal: false
},
{
title: 'XYZ...',
position: 'top',
type: 'Category',
position: 'Bottom',
fields: ['..'],
label: {
rotate: {
degrees: 270
}
}
}, ],
series: [{
//type: 'bar',
type: 'column',
axis: 'bottom',
gutter: 80,
xField: 'ou',
//title: periodStr1,
title: ['April-' + lastyear_graph1 + " to " + strMonth + "-" + selectedText_yr, 'April-' + year2 + " to " + strMonth + "-" + year3_graph1],
yField: ['per01', 'per02'],
stacked: false,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1]));
}
}
}]
}
If you are looking for a title for the chart, you should set the title config of the chart and not the title config of the series. Title config of series is the human-readable name of the series which displayed in the legend.
items: {
xtype: 'chart',
animate: true,
shadow: true,
title: 'My Chart Title', //Set title here
-------------------
-------------------
}
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.
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?
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.