Im a little bit confused with ExtJS Charts.
I have created a Column Chart thats data looks like this
[
{'name':'Stu', 'score':10},
{'name':'Jack', 'score':50},
{'name':'Lily', 'score':100}
]
I have it working in the Chart, but I want to be able to turn each column off. I can display the legend but it takes all the data as one data set (which makes sense I guess).
How can I make each column be in the legend as a seperate item?
Thanks
You will not be able to to do this in simple bar or column chart
the way to go is Group chart
here i am giving you a sample code, run and see for yourself,hope it helps
Ext.onReady(function() {
Ext.define('testModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'Tom', type: 'int'},
{name: 'Bob', type: 'int'},
{name: 'Steve', type: 'int'},
{name: 'Eric', type: 'int'},
{name: 'Ed', type: 'int'},
]
});
var store = Ext.create('Ext.data.Store', {
model: 'testModel',
data: [{
'label':'Friends',
'Tom': '5',
'Bob': '7',
'Steve': '8',
'Eric': '9',
'Ed': '8'
}]
});
Ext.create('Ext.panel.Panel', {
height: 400,
width: 500,
frame: true,
renderTo: Ext.getBody(),
items: [{
height: 400,
width: 500,
xtype: 'chart',
store: store,
legend: {
position: 'right'
},
axes: [{
type: 'Category',
position: 'left',
fields: 'label',
title: 'Friends'
}, {
type: 'Numeric',
position: 'bottom',
fields: ['Tom', 'Bob', 'Steve', 'Eric', 'Ed'],
title: 'Hours of Sleep',
grid: true,
minimum: 0
}],
series: [{
showInLegend: true,
type: 'bar',
axis: 'bottom',
xField: 'label',
yField: ['Tom', 'Bob', 'Steve', 'Eric', 'Ed'],
}]
}]
});
});
Related
I try to enable paging with ExtJs4 grid. Paging toolbar looks like it is working but paging is not enabled in grid.Can you help me about what I am missing?
Ext.onReady(function () {
var i = 1;
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'eyeColor', type: 'string' }
]
});
It looks that the problem is with totalCount but, there is something more.
var store= Ext.create('Ext.data.Store', {
model: 'User',
totalCount:50,
pageSize: 10,
autoLoad: { start: 0, limit: 10 },
proxy: {
type: 'memory',
reader: {
root: 'users',
totalProperty: 'totalCount'
}
},
data: [
{ id: i++, firstName: 'Ed', lastName: 'Spencer', age:20, eyeColor: 'blue' },
{ id: i++, firstName: 'Tommy', lastName: 'Maintz', age: 30, eyeColor: 'black' },
{ id: i++, firstName: 'Aaron', lastName: 'Conran', age: 40, eyeColor: 'blue' },
{ id: i++, firstName: 'Jamie', lastName: 'Avins', age: 50, eyeColor: 'black' },
{ id: i++, firstName: 'Ed', lastName: 'Spencer', age: 20, eyeColor: 'blue' }
.
.
.
]
});
Paging toolbar looks like it is working but grid values does not change according to the page numbers.
Ext.create('Ext.grid.Panel', {
title: 'Users',
store: store,
proxy: {
type: 'memory',
enablePaging: true
},
columns: [
{ header: 'ID', dataIndex: 'id', width:50 },
{ header: 'Name', dataIndex: 'firstName' },
{ header: 'Last Name', dataIndex: 'lastName' },
{ header: 'Age', dataIndex: 'age', width: 50 },
{ header: 'Eye Color', dataIndex: 'eyeColor' }
],
height: 600,
width: 800,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
pageSize: 10,
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});
You need proxy: 'pagingmemory' which is Ext.ux.data.PagingMemoryProxy.
From doc:
Paging with Local Data
Paging can also be accomplished with local data using extensions:
Ext.ux.data.PagingStore
Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
Also note that there is no need to have:
totalCount in the store config (it will be provided by the proxy);
proxy on the grid (it's already within the store);
pageSize in the paging toolbar config (will be taken from the store).
I'm working in a Ruby On Rails + Ext js app.. and I'm trying to show a grid with the filter feature but I can't I've been reading a lot of post and even the Sencha example page but I can't make it work.
Here is the live code.. a simple grid without the gridpanel working https://fiddle.sencha.com/#fiddle/3fh
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
filters : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});
Hope you guys can help me!
Replace filters: [filtersCfg], with features: [filtersCfg],, and remove this extra comma in dataIndex: 'concepto', which is likely to crash IE. It's important to note that the ExtJS file loader seems not to work in this fiddle (Type Error).
Thanks to #Wared for the Answer... The only thing to change in the original code is :
filters: [filtersCfg]
INTO features: [filtersCfg] now the code looks like:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
features : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});
I have the following code to make the chart. But the graph display wrong.
Here is the code
Ext.onReady(function(){
Ext.define('FinancialRatio',{
extend: 'Ext.data.Model',
fields: ['year','revenue']
});
var FinancialRatioStore = Ext.create('Ext.data.Store',{
model: 'FinancialRatio',
autoLoad:true,
proxy:{
type: 'ajax',
url: 'http://localhost/FinancialRatio.php',
reader:{
type: 'xml',
record: 'ratio'
}
}
});
var revenue = Ext.create('Ext.Window',{
width: 400,
height:300,
renderTo: Ext.getBody(),
hidden: false,
maximizable: true,
title: 'Revenue',
layout: 'fit',
items:{
xtype: 'chart',
style: 'background:#fff',
store: FinancialRatioStore,
animate: true,
axes:[{
title: 'Revenue',
type: 'Numeric',
position: 'left',
fields: ['revenue']
},{
title: 'Year',
type: 'Category',
position: 'bottom',
fields: ['year']
}],
series:[{
type: 'line',
xField: 'year',
yField: 'revenue'
}]
}
});
And here is the result
But the actual data is as follow (I wrote the grid code to display this data)
Base on the data, the graph is displaying wrong. But I cant figure out where I did wrong. Could you please help me out?
Also, what is the differences between the "fields" in axes and the "xfield" and "yfield" in series?
Thank you
I'm guessing the issue is because you didn't set the field type in your model. Try this:
Ext.define('FinancialRatio',{
extend: 'Ext.data.Model',
fields: ['year', //when no type specified, it defaults to 'string'
{
name: 'revenue',
type: 'int'
}]
});
An axis can contain many fields so that you can plot multiple series against them. For example, if you wanted to plot revenue and profit, you would want to have axis fields ['revenue', 'profit'] and you would define multiple series:
series: [{
type: 'line',
xField: 'year',
yField: 'revenue'
}, {
type: 'line',
xField: 'year',
yField: 'profit'
}]
I am using http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html to build a portal. Obviously, i have custom windows inside it that adjust their height/width as in the provided link. In one of the windows i have got a chart and a grid that i want to place side by side in a row. But this approach requires me to provide height/width for graph.If i do this the chart doesnt adjust its height/width if i play with the height and width of parent container as in the example.Please guide how can i accomplish this.I am using hbox layout with alight to stretch. Please find the code below.
Ext.apply(this,{layout: {
type: 'hbox',
align: 'stretch'
}
, width:600,height:300,items:
[
{
xtype: 'chart',
animate: true,
shadow: true,
height:200,
width:200,
store: Ext.create('Ext.data.JsonStore', {
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data: [
{year: 2005, action: 23890000},
{year: 2006, action: 38900000},
{year: 2007, action: 50410000},
{year: 2008, action: 70000000}
]
}),
legend: {
position: 'right'
},
axes: [{
type: 'Category',
position: 'bottom',
fields: ['action'],
}, {
type: 'Numeric',
position: 'left',
fields: ['year'],
title: false
}],
series: [{
type: 'bar',
axis: 'top',
gutter: 80,
xField: 'year',
yField: ['action'],
tips: {
}
}]
},{xtype:'grid',
collapsible:false,store: Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'}
],
data: myData
}), multiSelect: true,viewConfig: {emptyText: 'No information to display'},
columns: [{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}]
}]
});
You shouldn't have to put a width/height on the chart or grid. Just put a 'flex' value on each, e.g., flex: 1 for them both to have the same width in the hbox container.
I have my data to show in a standard ExtJs grid. The state is saved (the cookies exists), column-orders can be changed, and will be shown as they were left, but, my columnwidths are not reproduced.
Javascript:
<div id="grid"> </div>
<style type="text/css">
.x-grid3-header-offset {width: auto;}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.grid.ColumnModel.override({
setState : function(col, state) {
Ext.applyIf(this.lookup[col], state);
}
});
// define widget URL
var widgetURL = '/this/is/a/dummyurl';
// totaal: 766
Ext.app.myData = {
"totalRows":766,
"rows":[
["1000310","3 CPE||426086","0","0","Standaard","Standaard","EUR","0,00","15,26","-15,26",""]
// there's more, but I didn't want to waste space
]};
Ext.state.Manager.setProvider(
new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*31)) //1 month from now
}));
function eur(val) {
val = parseFloat(val);
return "€ " + val.toFixed(2);
}
function eurint(val) {
return "€ " + val;
}
function deb(val) {
tmp = val.split('||');
return (""+tmp[0]+"");
}
// create the data store
Ext.app.store = new Ext.data.Store({
storeId: 'myStore',
proxy: new Ext.data.ScriptTagProxy({
url: widgetURL,
nocache: false,
callbackParam: 'p_widget_num_return'
}),
baseParams: {
'x01':43543543584
},
remoteSort: true,
paramNames: {
start: 'x02',
limit: 'x03',
sort: 'x04',
dir: 'x05'
},
reader: new Ext.data.JsonReader({
totalProperty: 'totalRows',
root: 'rows'
}, [
{name: 'referentie', type: 'string', mapping: '0'},
{name: 'naam', type: 'string', mapping: '1' },
{name: 'kredietlimiet', type: 'string', mapping: '2'},
{name: 'internelimiet', type: 'string', mapping: '3'},
{name: 'procedurenaam', type: 'string', mapping: '4' },
{name: 'portefeuillenaam', type: 'string', mapping: '5' },
{name: 'currency', type: 'string', mapping: '6' },
{name: 'debitdb', type: 'string', mapping: '7'},
{name: 'creditdb', type: 'string', mapping: '8'},
{name: 'duedb', type: 'string', mapping: '9'},
{name: 'dso', type: 'float', mapping: '10'}
,{name: 'code', type: 'string', mapping: '11'} // this data is optional
,{name: 'klant', type: 'string', mapping: '12'} // this data is optional
,{name: 'vertegenwoordiger', type: 'string', mapping: '13'} // this data is optional
])
});
var paging_toolbar = new Ext.PagingToolbar({
paramNames: {start: 'x02', limit: 'x03'},
pageSize: 25,
store: Ext.app.store,
displayInfo: true,
displayMsg: 'Afgebeeld {0} - {1} van {2}',
emptyMsg: 'Geen gegevens gevonden'
});
// trigger the data store load
//store.load({params:{start:0, limit:pagesize}});
//store.loadData(myData);
// create the Grid
Ext.app.grid = new Ext.grid.GridPanel({
store: Ext.app.store,
columns: [
{id:'referentie',header: "Referentie", width: 50, sortable: true, dataIndex: 'referentie'},
{id:'klant',header: "Bedrijf", width: 55, sortable: true, dataIndex: 'klant'},
{id: 'debtor', header: "Naam", sortable: true, renderer: deb, dataIndex: 'naam'},
{id:'kredietlimiet',header: "Limiet", width: 70, sortable: true, renderer: eurint, dataIndex: 'kredietlimiet', css : "text-align : right;"},
{id:'procedure',header: "Procedure", width: 50, sortable: true, dataIndex: 'procedurenaam'},
{id:'portefeuille',header: "Portefeuille", width: 50, sortable: true, dataIndex: 'portefeuillenaam'},
{id:'currency',header: "Valuta", width: 40, sortable: true, dataIndex: 'currency'},
{id:'deb',header: "Debet totaal", width: 75, sortable: true, renderer: eurint, dataIndex: 'debitdb', css : "text-align : right;"},
{id:'cred',header: "Credit totaal", width: 80, sortable: true, renderer: eurint, dataIndex: 'creditdb', css : "text-align : right;"},
{id:'due',header: "Openstaand saldo", width: 80, sortable: true, renderer: eurint, dataIndex: 'duedb', css : "text-align : right;"},
{id:'dso',header: "D.V.(*)", width: 45, sortable: true, dataIndex: 'dso'}
],
viewConfig: {
forceFit: true
},
//loadMask: true,
stripeRows: true,
width:810,
autoExpandColumn: 'debtor',
autoHeight: true,
stateful: true,
stateId: 'grid',
bbar: paging_toolbar
});
Ext.app.store.loadData(Ext.app.myData);
Ext.app.grid.render('grid');
});
</script>
I searched the forums, I searched other forums, but i can't find what I am doing wrong. Help? :-) (be gentle...)
If you specify ForceFit then autoExpandColumn is ignored. Also with forceFit it continually fits the columns across the total width so that might be the issue. Try to remove the forceFit and autoExpandColumn properties.
In your code there no saving column sizes to cookie, no reading, no setting them... Why you expect to columns to be resized ? Also forceFit: true would not help.
Or there something what do not show ?
I found it:
I removed the autoExpander (so kudos for Robby), and removed this code at the top
Ext.onReady(function(){
Ext.grid.ColumnModel.override({
setState : function(col, state) {
Ext.applyIf(this.lookup[col], state);
}
});
This was a bugfix that should've helped me, and while returning on my steps, and removing this bit, it worked. So basicly, I had to remove the autoExpander.