When I tried to create a scatter extjs chart I've come across such a problem:
Category axis the names are not grouped (array elements with identic name are not treated as the same). It seems like the chart tries to draw it as a mathmatical function (with only one element of y for each x) but I deliberately chose scatter chart to avoid it.
Tried to find the anser in google but the only result I found is just to accept...
This is the code:
window.store_direct = Ext.create('Ext.data.JsonStore', {
fields: ['id','line','bidder','data0','data1','data2','data3'],
data: [
{'line':1000.00,'id':0,'bidder':'Пок','data0':1000.00},
{'line':800.00,'id':1,'bidder':'Пок','data0':800.00},
{'line':950.00,'id':0,'bidder':'Брг','data1':950.00},
{'line':599.00,'id':1,'bidder':'Брг','data1':599.00},
{'line':1.00,'id':2,'bidder':'Брг','data1':1.00},
{'line':500.00,'id':0,'bidder':'КВВ','data2':500.00},
{'line':900.00,'id':0,'bidder':'Buy4','data3':900.00},
{'line':600.00,'id':1,'bidder':'Buy4','data3':600.00}
],
});
var chart = function () {
var win = Ext.create('Ext.Window', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
hidden: false,
maximizable: true,
title: 'Процесс торгов',
layout: 'fit',
items:{xtype: 'chart',style: 'background:#fff;',animate: true,store: store_direct,shadow: true,legend: {position: 'right'},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data0','data1','data2','data3'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['bidder'],
title: 'Sample Metrics'
}],
series: [
{
type: 'Scatter',
highlight: {size: 7,radius: 7},
axis: 'left',
xField: 'bidder',
yField: 'data0',
markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}
}
, {
type: 'Scatter',
highlight: {size: 7,radius: 7},
axis: 'left',
xField: 'bidder',
yField: 'data1',
markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}
}
, {
type: 'Scatter',
highlight: {size: 7,radius: 7},
axis: 'left',
xField: 'bidder',
yField: 'data2',
markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}
}
, {
type: 'Scatter',
highlight: {size: 7,radius: 7},
axis: 'left',
xField: 'bidder',
yField: 'data3',
markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}
}
]
}
});
}
Ext JS charts' terminology is a bit specific; in this case you need to configure your Series. There are some good examples for Charts, take a look: http://docs.sencha.com/ext-js/4-1/#!/example
Related
I want to visualize different company data in different colors against date of a line graph.
The problem is the number of companies will change.
Let's say the input data will be like
data: [{ date: '2018-12-20', company1: 10, company2: 5, },{ date: '2018-12-21', company1: 10, company2: 10 }]
To visualize it the model will be like
Ext.define('ABC.model.Job', {
extend: 'Ext.data.Model',
fields: [
{name: 'DATE', type: 'auto'}
{name: '1', type: 'int'}
{name: '2', type: 'int'}
],
proxy: {
type: 'ajax',
noCache: false,
actionMethods: {'read': 'POST'},
api: {
read: utils.createUrl('api', 'read'),
},
reader: {
type: 'json',
root: 'data'
},
listeners: {
exception: function(proxy, response, operation) {
App.showHttpError('Job ', response);
}
}
}
});
And the view portion of axes will be
Ext.define('ABC.view.Job', {
extend: 'Ext.container.Container',
requires: [
'ABC.store.Job',
],
border: false,
layout: {type:'vbox', pack:'start', align:'stretch'},
initComponent: function() {
var me = this;
me.jobStore2 = Ext.create('ABC.store.Job');
Ext.apply(me, {
items: [
{
xtype: 'chart',
store: me.jobStore2,
style: 'background: #fff',
insetPadding: 40,
animate: true,
shadow: false,
flex: 2,
minHeight: 400,
legend: {
position: 'top',
boxStrokeWidth: 0,
labelFont: '12px Helvetica'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['1'],
grid: true,
minimum: 0,
}, {
type: 'Category',
position: 'bottom',
fields: ['DATE'],
grid: true,
}],
series: [{
type: 'line',
axis: 'left',
title: '1',
xField: 'DATE',
yField: '1',
style: {
'stroke-width': 4
},
},
{
type: 'line',
axis: 'left',
xField: 'DATE',
border: false,
flex:1,
title: ['2'],
yField: ['2'],
style: {
'stroke-width': 4
},
}
]
}
});
me.callParent(arguments);
}
});
What if the data contains lots of companies. How can I change the series? Instead of giving the detail of y axis again and again
For ease of maintenance, you can just create an array containing the company names, and map it into both fields and axes:
var companies = ['company1', 'company2', ...];
Ext.create('Ext.data.Store', {
fields: [{
name: 'DATE',
type: 'auto'
}].concat(
companies.map(function(companyName) {
return {
name: companyName,
type: 'int'
};
})
)
});
...
series: companies.map(function(companyName) {
return {
type: 'line',
axis: 'left',
title: '1',
xField: 'DATE',
yField: companyName,
style: {
'stroke-width': 4
},
}
});
...
I am trying to add tooltips to my ExtJS chart. The tooltip is getting rendered but not under the mouse pointer. It is getting rendered near end of the page.
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 470,
height: 300,
store: store,
axes: [{
type: 'Numeric',
minimum: 0,
minorTickSteps: 0,
maximum: 150,
position: 'left',
fields: ['lineY', 'greenY', 'yellowY', 'redY'],
title: 'Buffer Penetration'
}, {
type: 'Numeric',
position: 'bottom',
fields: ['lineX', 'areaX'],
title: 'Critical Chain Comp'
}],
series: [
{
type: 'area',
axis: 'left',
xField: 'areaX',
yField: ['redY']
},
{
type: 'area',
axis: 'left',
xField: 'areaX',
yField: ['yellowY']
},
{
type: 'area',
axis: 'left',
xField: 'areaX',
yField: ['greenY']
},
{
type: 'line',
axis: 'left',
fill: false,
// tip: 'This is a tip',
xField: 'lineX',
yField: 'lineY',
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
// calculate and display percentage on hover
this.setTitle("Tooltip Text");
}
}
}
]
});
I have my code here : http://jsfiddle.net/Abhishek1191/vdazU/1076/
I feel like I am doing something silly here or maybe there is some issue with the ExtJS library I am using. Help would be highly appreciated
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
});
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 plot a column chart with 2 series and thus 2 Y axis, one in the left side and the other in the right side. But the columns display in the same place, on top of each others and not side by side. Do you have any idea how to fix this ?
Something like that :
Ext.onReady(function () {
var chart;
chart = new Ext.chart.Chart({
width: 800,
height: 600,
animate: true,
store: store1,
renderTo: Ext.getBody(),
shadow: true,
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'
}, {
type: 'Numeric',
position: 'right',
fields: ['data2'],
title: 'Test'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
xField: 'name',
yField: 'data1'
}, {
type: 'column',
axis: 'right',
xField: 'name',
yField: 'data2'
}]
});
});
Thanks
Create a zero value entry into the store and append it to the first and second series items. The number of additions depends on the length of series yField items of the other axes.
For example, creating two series items having yField respectively as below:
yField: ['data1', 'data2','data4']
and
yField: ['data4','data4','data3']
where data4 is a zero value entry in the store.
The solution worked perfectly. :)
This will add two columns for the left axis and a third one for the right axis:
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
field: ['data1']
},
xField: ‘name’,
yField: ['data1', 'data2','whateverUndefinedFieldNameYouComeUpWith'] // Use an undefined field
},{
type: 'column',
axis: 'right',
highlight: true,
label: {
field: 'data3′
},
xField: 'name',
yField: ['name','name','data3'] // or just use the same field you use for the x axis
}]
I hope you get the idea.
AFAIK, you cannot have them side-by-side. The reason is they are not in the same series. When you have two data in same series, they get displayed side-by-side. In your case, you have two series.. one configured to use the left axis and other the right. I suggest you use a different type of chart for one of your series.
series: [{
type: 'line', // Instead of column chart I am using line chart...
axis: 'left',
highlight: true,
xField: 'name',
yField: 'data1'
}, {
type: 'column',
axis: 'right',
xField: 'name',
yField: 'data2'
}]