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.
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
When i replace with Ext.chart.CartesianChart with Ext.chart.Chart its not working,Here the code,
CartesianChart chart
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.CartesianChart",
requires: [
"Ext.TitleBar",
"Ext.chart.CartesianChart",
"Ext.chart.series.Line",
"Ext.chart.axis.Numeric",
"Ext.chart.axis.Category",
"Ext.draw.sprite.Circle"
],
alias: "widget.hrsworkedchart",
config: {
flex: 1,
xtype: "chart",
store: "HrsAndValueByYear",
cls: "chart",
innerPadding: 20,
animate: true,
series: [
{
type: "line",
xField: "year",
yField: "hrsworked",
title: "Hours Worked",
style: {
stroke: "#003366",
lineWidth: 3
},
marker: {
type: "circle",
stroke: "#003366",
radius: 5,
lineWidth: 3
},
label: {
field: "hrsworked",
color: "#000",
display: "over",
font:"10px Helvetica"
}
},
{
type: "line",
xField: "year",
yField: "hrsbilled",
title: "Hours Billed",
style: {
stroke: "#6d0060",
lineWidth: 3
},
marker: {
type: "circle",
stroke: "#6d0060",
radius: 5,
lineWidth: 3
},
label: {
field: "hrsbilled",
color: "#000",
display: "over",
font: "10px Helvetica"
}
}
],
axes: [
{
type: "numeric",
position: "left",
title: {
fontSize: 15,
text: "Hrs"
},
minimum: 130000,
maximum: 180000,
grid: {
even: {
fill: "#f9f9f9"
}
}
},
{
type: "category",
position: "bottom"
}
]
}
});
Ext.Chart.Chart
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.Chart",
alias : "widget.hrsworkedchart",
flex: 1,
shadow: true,
animate: true,
store: "HrsAndValueByYear",
axes: [{
type: 'Numeric',
position: 'left',
fields: ['year'],
minimum: 0,
hidden: true
}, {
type: 'Category',
position: 'bottom',
fields: ['hrsworked'],
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 15, false);
},
font: '9px Arial',
rotate: {
degrees: 270
}
}
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
style: {
fill: '#456d9f'
},
highlightCfg: {
fill: '#a2b5ca'
},
label: {
contrast: true,
display: 'insideEnd',
field: 'year',
color: '#000',
orientation: 'vertical',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['price']
}]
});
Whats wrong with my code.Please help me to solve
Couple of pointers
in axis config, the valid type is "numeric" , "category". You have it as upper case N and C.
Category axis should be years and numeric axis should be hrsworked.
i am not sure if there is a "column" series. Use "bar" instead.
you can see the sample here https://fiddle.sencha.com/#fiddle/51f and the code snippet below.
var store1 = Ext.create('Ext.data.Store', {
fields: ['year', 'hrsworked'],
data: [{
year: 2010,
hrsworked: 130000
}, {
year: 2011,
hrsworked: 140000
}, {
year: 2012,
hrsworked: 150000
}]
});
Ext.define("dashboard.view.HrsWorkedChart", {
extend: "Ext.chart.Chart",
requires: ["Ext.TitleBar", "Ext.chart.CartesianChart", "Ext.chart.series.Bar", "Ext.chart.series.Line", "Ext.chart.axis.Numeric", "Ext.chart.axis.Category", "Ext.draw.sprite.Circle"],
alias: "widget.hrsworkedchart",
config: {
flex: 1,
shadow: true,
animate: true,
store: store1,
cls: "chart",
innerPadding: 20,
animate: true,
series: [{
type: 'bar',
xField: 'year',
yField: ['hrsworked'],
style: {
fill: 'blue'
}
}],
axes: [{
type: "numeric",
position: "left",
minimum:0,
title: {
fontSize: 15,
text: "Hrs"
},
grid: {
even: {
fill: "#f9f9f9"
}
},
field: ['hrsworked']
}, {
type: "category",
position: "bottom",
label: {
font: '9px Arial',
rotate: {
degrees: 270
}
},
field: 'year'
}]
}
});
Currently I am rendering single line chart using json data which is as follow :
{"eventType":"A","startOpen":"0","asOfDate":"21-OCT-13","intervalNo":0},
{"eventType":"A","startOpen":"47","asOfDate":"21-OCT-13","intervalNo":1},
{"eventType":"A","startOpen":"60","asOfDate":"21-OCT-13","intervalNo":2},
{"eventType":"B","startOpen":"79","asOfDate":"21-OCT-13","intervalNo":4},
{"eventType":"B","startOpen":"90","asOfDate":"21-OCT-13","intervalNo":6}
I am plotting graph startOpen against intervalNo. Now I want to plot the graph using grouping on eventType field. Means for above data two line should be drawn in single chart, one for eventType A and another for eventType B.
Appreciate your any kind of help. Thank you :)
My current code for chart :
Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: "Trends",
style: 'background:#fff',
animate: true,
shadow: true,
groupField:'eventType',
legend: {position: 'right'},
axes: [
{
type: "numeric",
position: "left",
fields: "intervalNo",
title:"Interval No",
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},
{
type: "numeric",
position: "bottom",
fields: "startOpen",
title: 'Start Open'
}
],
series: [
{
type: "line",
axis: "left",
xField: "startOpen",
yField: "intervalNo",
gField:'eventType',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
In order to plot multiple lines width different x values, you have to use multiple line series. Value points with value of undefined will be skipped, that is they won't be drawn in the chart.
Here's how to adapt your example data to do that (fiddle):
Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: {
fields: [
'eventType',
{name: 'startOpen', type: 'int'},
'asOfDate',
'intervalA',
'intervalB'
]
,data: [
{"eventType":"A","startOpen":"0","intervalA":0,"intervalB":undefined},
{"eventType":"A","startOpen":"47","intervalA":1,"intervalB":undefined},
{"eventType":"A","startOpen":"35","intervalA":undefined,"intervalB":2},
{"eventType":"B","startOpen":"79","intervalA":undefined,"intervalB":4},
{"eventType":"B","startOpen":"90","intervalA":undefined,"intervalB":6}
]
},
style: 'background:#fff',
animate: true,
shadow: true,
groupField: 'eventType',
legend: {
position: 'right'
},
axes: [{
type: "numeric",
position: "left",
fields: ["intervalA", "intervalB"],
title: "Interval No",
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},{
type: "numeric",
position: "bottom",
fields: "startOpen",
title: 'Start Open'
}],
series: [{
type: "line",
axis: "left",
xField: "startOpen",
yField: "intervalA",
title: "A"
},{
type: "line",
axis: 'left',
xField: 'startOpen',
yField: 'intervalB',
title: "B"
}]
});
Ext.widget('trendschart', {
renderTo: Ext.getBody()
,width: 600
,height: 300
});
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).