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'
}]
Related
I am trying to draw two charts side by side which will use same store by passing different parameters but both charts are using second store's value. I can see response in Chrome console, it is proper with two requests and different response; below is my code.
Ext.define('testUtility.view.BarChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.barChart',
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: ['name', 'data'],
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data/store1',
reader: {
type: 'json',
root: 'Data'
},
filterParam: undefined,
groupParam: undefined,
pageParam: undefined,
startParam: undefined,
sortParam: undefined,
limitParam: undefined
}
}),
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Master'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 100,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
});
app.js
Ext.application({
requires: [
'Ext.container.Viewport'
],
name: 'BAR Chart ',
launch: function() {
var chart1 = Ext.create('testUtility.view.BarChart', {
id: 'chart1',
height: 300,
width: '50%'
});
var store1 = chart1.getStore();
store1.proxy.extraParams = {
id: chart1.id
};
store1.load();
var chart2 = Ext.create('testUtility.view.BarChart', {
id: 'chart2',
height: 300,
width: '50%'
});
var store2 = chart2.getStore();
store2.proxy.extraParams = {
id: chart2.id
};
store2.load();
}
});
Both charts shows data from store whichever is loaded later.
Both of your stores are one and the same, when you call them in your definition. You should call the store when creating the instance of the class like so:
var chart1 = Ext.create( 'testUtility.view.BarChart', {
id: 'chart1',
height: 300,
width: '50%',
store: store1
} );
It is good practice to define your own store:
Ext.define( 'testUtility.store.BarChart', {
extend: 'Ext.data.Store',
...
} );
And then just use it before the first part of the code:
var store1 = Ext.create( 'testUtility.store.BarChart', { options } );
Your options including the extraparams, different for the 2 stores.
I have a problem by building a testing app with charts. I've build with sencha cmd an app and developed my app. Now I tried to build a testing app with sencha cmd and now I get the error
Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: series.bar
the
Store:
Ext.define('test.store.statisticKey', {
extend: 'Ext.data.Store',
model: 'test.model.statisticKey',
autoLoad: true,
autoSync: true,
id: 'storestatisticKey',
proxy: {
type: 'ajax',
url: '../getStatisticKey.php',
reader: {
type: 'json',
root: 'data'
}
}
});
the code for my Chart:
Ext.define('test.view.Chart1', {
extend: 'Ext.chart.Chart',
alias: 'widget.Chart1',
width: 350,
height: 300,
animate: true,
id: 'statisticKeyID',
store: 'statisticKey',
border: 0,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['count'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['key']
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('key') + ': ' + storeItem.get('count') + ' Patienten');
}
},
label: {
display: 'insideEnd',
field: 'count',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'key',
yField: ['count']
}]
});
In my Dev-System all is fine but when I build a test system I get the error and no Chart is shown.
Thx for the Help
See if you get "synchronous" warnings in console while developing and fix them if yes.
If still in trouble try
sencha ant clean
before building.
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'],
}]
}]
});
});
I'm looking to create a pie chart that displays a group field from a store. For example, if each student in my store has a 'grade' field, I want the pie chart to show the relative amount of students in each grade. Is this possible? Or does the pie chart have to display a field
My store:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
data: [
{Name: 'derp', Grade: 'FR'},
{Name: 'herp', Grade: 'SR'},
....
{Name: 'beavis', Grade: 'SR'}
],
groupField: 'Grade',
});
My attempt at a chart:
Ext.define('AM.view.user.Chart' , {
extend: 'Ext.chart.Chart',
alias: 'widget.userchart',
width: 500,
height: 600,
animate: true,
store: 'Users',
shadow: true,
legend: { position: 'right'},
insetPadding: 25,
series: [{
type: 'pie',
angleField: 'PreReq',
showInLegend: true,
highlight: {
segment: {
margin: 20
}
}
animate: true
}]
});
thanks for any tips!
in your store you can use filtering, sorting and grouping which then reflects in your chart dyamically. you need to group your result into a series of data to present in a chart.
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.