Uncaught TypeError: c is not a constructor, issue only when creating bar graph - extjs

I have data I have tried to put into a simple bar graph from a local store variable I created. The data goes fine into a traditional table, but get this strange error when trying to create a graph... If i comment out the "axes" the code compiles.. if i leave it in i get this message enter image description here
Code for graph is below... the code base is large so just sending this small snipit
success: function(response){
var obj = Ext.decode(response.responseText);
console.log(obj);
var storeCost = new Ext.data.SimpleStore({
fields:[
{name: 'nameStart',type: 'string'},
{name: 'nameEnd',type: 'string'},
{name: 'nameUnit',type: 'string'},
{name: 'value',type: 'int'}
]
});
console.log('store created');
var costList =[];
for (let i = 0; i < obj.ResultsByTime.length; i++) {
costList.push({nameStart:obj.ResultsByTime[i].TimePeriod.Start, nameEnd:obj.ResultsByTime[i].TimePeriod.End ,nameUnit:obj.ResultsByTime[i].Total.BlendedCost.Unit ,value:Math.round(obj.ResultsByTime[i].Total.BlendedCost.Amount)})
}
storeCost.loadData(costList);
Ext.create('Ext.window.Window', {
layout:'fit',
height: 250,
width: 500,
items:{
xtype: 'cartesian',
renderTo: document.body,
width: 600,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10
}, {
name: 'metric two',
value: 7
}, {
name: 'metric three',
value: 5
}, {
name: 'metric four',
value: 2
}, {
name: 'metric five',
value: 27
}]
}, axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'value'
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name'
}],
series: {
type: 'bar',
subStyle: {
fill: ['#388FAD'],
stroke: '#1F6D91'
},
xField: 'name',
yField: 'value'
}
}

"c is not a constructor" errors tend to be due to a class missing in the requires array.
Since you narrowed it down to the "axes" section, I would assume these entries need to be added to the requires array in your class:
requires: [
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category'
]

Related

Extjs line graph

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
},
}
});
...

Mark custom chart bar color to legend in EXT JS 5

I have an issue while using custom legend color in EXTJS 5 chart. I can apply custom color to the chart legend but i cannot apply that to the legend item. In EXT JS 4, i can use one override function to in series to handle it. like
getLegendColor: function(index) {
var proSpeciality = ["#EFD07B","#0082AD"];
return proSpeciality[index];
}
But this is not available in EXT JS 5.
Sample code.
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: 'fit',
items: {
xtype: 'cartesian',
store: {
fields: ['name', 'value','value2'],
data: [
{name: 'metric one', value: 10,value2: 15},
{name: 'metric two', value: 7,value2: 15},
{name: 'metric three', value: 5,value2: 15},
{name: 'metric four', value: 2,value2: 15},
{name: 'metric five', value: 27,value2: 15}
]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'value'
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name'
}],
legend: {
docked: 'top',
style: {
stroke: '#ffffff',
'stroke-width': 2,
opacity: 1
},
tpl: [
'<tpl for="."> ',
' <div class="myLegendItem" style="float:left;margin:5px;padding:0px;cursor:pointer;">',
' <div class="" style="float:left;margin:2px;width:12px;height: 12px; background:{mark};"></div><div style="float:left;">{name}</div> ',
' </div> ',
' </tpl>'
],
itemSelector: '.myLegendItem'
},
series: {
type: 'bar',
xField: ['name'],
yField: ['value','value1'],
stacked: false,
renderer: function(sprite, record, attributes, index, store) {
var proSpeciality = ["#EFD07B","#0082AD","#00A67B","#AD1808","#520084"];
attributes.fill = proSpeciality[index % proSpeciality.length];
return attributes;
},
getLegendColor: function(index) {
var proSpeciality = ["#EFD07B","#0082AD"];
return proSpeciality[index];
}
}
}
});
Please let me know if i need to change something.
Thanks in advance
Try to use "colors" property within series:
series: {
type: 'bar',
colors: ['orange', 'yellow'],
...
}
Example: https://fiddle.sencha.com/#fiddle/bk1
Answering the question about 'global colour arrays' (which I can't answer in the comments section - not enough reputation. Aleksei Mialkin is quite right in his solution), you can use a singleton to hold these sorts of values
Ext.define("MyApp.colours", {
singleton: true,
COL1: 'orange',
COL2: 'red',
COL3: 'blue',
COL4: 'green'
});
Then reference as
...
colors: [MyApp.colours.COL1, MyApp.colours.COL2],
...

extjs treegrid displaying empty grid columns

I am trying to get a really basic tree grid working but all I get is an empty panel.
I copied the json string from a working treepanel example and added the date and filename myself for the extra grids.
So calling the bits root and children worked for a basic panel (i had it working when it only had the field text and was directly in the store. So i presumed it would work for a tree grid.
After searching I found that a treestore doesn't have a data config it had to be moved to the proxy. Now I just have empty date and filename columns.
so here is my model
Ext.define('Coda.common.repository.model.RepositoryMaintModel',{
extend: 'Ext.data.Model',
fields: [
{name: 'date', type: 'string'},
{name: 'filename', type: 'string'},
{name: 'text', type: 'string'},
{name: 'iconCls' , type: 'string', defaultValue: 'treenode-no-icon'},
{name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
{name: 'index' , type: 'int'}
]
});
and here is my view
Ext.define('view.RepositoryMaintView', {
extend: 'U4.panel.Panel',
requires: ['Ext.layout.container.HBox',
'model.RepositoryMaintModel',
'Ext.tree.Panel'],
EVENT_DOWNLOAD: 'download',
layout: 'hbox',
constructor: function (config) {
var me = this;
me.addEvents(
/**
* #event download
* #param {view.RepositoryMaintView} when pressing the download button
*/
me.EVENT_DOWNLOAD
);
var data = {root: {
expanded: true,
root: [
{ text: "detention",date:'10-01-2013', filename:'boo.txt', leaf: true },
{ text: "homework",date:'10-01-2013', filename:'boo.txt', expanded: true,
root: [
{ text: "book report",date:'10-01-2013', filename:'boo.txt', leaf: true },
{ text: "algebra",date:'10-01-2013', filename:'boo.txt', leaf: true}
] },
{ text: "buy lottery tickets",date:'10-01-2013', filename:'boo.txt', leaf: true }
]
}};
var store = Ext.create('Ext.data.TreeStore', {
model: 'blah.blah.model.RepositoryMaintModel',
// data: data, <-- remove from here
proxy: {
type: 'memory',
data: data, // <-- place here
reader: {
type: 'json',
root: 'root'
}
},
folderSort: true
});
var center = Ext.create('Ext.tree.Panel',{
title: 'Folders Companies Items',
//region: 'center',
width: 1000,
height: 200,
collapsible: false,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
columns: [
{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'hmm',
flex: 2,
sortable: true
},{
text: 'Date',
sortable: true,
dataIndex: 'date'
},{
text: 'filename',
sortable: true,
dataIndex: 'filename'
}]
});
me.items = [center];
me.callParent(arguments);
}
});

List filter in Extjs Grid

I'm new to EXTJS and i want to create a static Grid in it. I have read some documents and created the grid and i cannot create filter for this. Here is my code and any help would be appreciated.
Ext.application({
name: 'Sample app',
launch: function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'age', type: 'int'},
{name: 'city', type: 'string'}]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'User1', email: 'user1#test.com', age: 21, city: 'City1' },
{ name: 'User2', email: 'user2#test.com', age: 28, city: 'City3' },
{ name: 'User3', email: 'user3#test.com', age: 24, city: 'City2' },
{ name: 'User4', email: 'user4#test.com', age: 23, city: 'City1' },
{ name: 'User5', email: 'user5#test.com', age: 24, city: 'City3' },
{ name: 'User6', email: 'user6#test.com', age: 26, city: 'City4' }
]
});
var optionsStore = Ext.create('Ext.data.Store', {
fields: ['city'],
proxy: {
type: 'ajax',
url: 'myData',
reader: 'array'
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
height: 200,
title: 'Users',
columns: [
{
text: 'Name',
width: 100,
sortable: true,
dataIndex: 'name',
filter: {type: 'string'}
},
{
text: 'Email Address',
width: 150,
sortable: true,
filterable : true,
dataIndex: 'email',
hidden: false,
filter: {type: 'string'}
},
{
text: 'Age',
width: 150,
sortable: true,
filterable : true,
dataIndex: 'age',
hidden: false,
filter: {type: 'numeric'}
},
{
text: 'City',
flex: 1,
sortable: true,
dataIndex: 'city',
filter: {
type: 'list',
store: optionsStore
}
}
]
});
}
});
Have you tried to have a look to this example

Give a different color to each category item on Sencha Bar Chart

I'm kind of stuck with this thing. What I want to do is to give each bar on a sencha chart a different color. This is what I have so far:
And this is my code for it:
Ext.setup({
tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
tabletIcon: 'icon-ipad.png',
phoneIcon: 'icon-iphone.png',
glossOnIcon: false,
onReady: function() {
Ext.regModel('Retail', {
fields: [
{name: 'id', type: 'string'},
{name: 'quantity', type: 'int'}
]
});
var retailStore = new Ext.data.JsonStore({
model: 'Retail',
proxy: {
type: 'ajax',
url: 'getData.php',
reader: {
type: 'json',
}
},
autoLoad: true
});
console.log(retailStore);
new Ext.chart.Panel({
id: 'chartCmp',
title: 'Stock Example',
fullscreen: true,
dockedItems: {
xtype: 'button',
iconCls: 'shuffle',
iconMask: true,
ui: 'plain',
dock: 'left'
},
items: {
cls: 'stock1',
theme: 'Demo',
legend: {
position: {
portrait: 'right',
landscape: 'top'
},
labelFont: '17px Arial'
},
interactions: [{
type: 'panzoom',
axes: {
left: {
maxZoom: 2
},
bottom: {
maxZoom: 4
}
}
}],
animate: false,
store: retailStore,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['quantity'],
title: 'Quantity'
}, {
type: 'Category',
position: 'left',
fields: ['id'],
title: 'Products'
}],
series: [{
type: 'bar',
axis: 'right',
xField: 'id',
yField: ['quantity'],
}]
}
});
}});
I know there should be some way to "cheat" the chart by adding an extra dimension to it, just as it is done here:
http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Bar/
There each year represents a new product. I'd like to do the same with mine, each product representing a different dimension.
You can use the renderer function of a serie. You just have to change attributes.fill to the color you want for each bar. Here is an example : http://bl.ocks.org/3511876 and the code :
Ext.setup({
onReady: function() {
var data = [];
for (var i = 0; i < 10; i++) {
data.push({
x: i,
y: parseInt(Math.random() * 100)
});
}
var colors = ['blue', 'yellow', 'red', 'green', 'gray'];
var store = new Ext.data.JsonStore({
fields: ['x', 'y'],
data: data
});
var chart = new Ext.chart.Chart({
store: store,
axes: [{
type: 'Category',
fields: ['x'],
position: 'left'
}, {
type: 'Numeric',
fields: ['y'],
position: 'bottom'
}],
series: [{
type: 'bar',
xField: 'x',
yField: 'y',
axis: 'bottom',
renderer: function(sprite, record, attributes, index, store) {
attributes.fill = colors[index%colors.length];
return attributes;
}
}]
});
new Ext.chart.Panel({
fullscreen: true,
chart: chart
});
chart.redraw();
}
});

Resources