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.
Related
when I use more then five letters in my name it comes out of the chart see the image i uploaded i am using extjs 6 I just want to have a large name on my chart
{
xtype: 'polar',
split: true,
flex: 0.3,
colors: [
'#347327',
'#2897d2',
'#de6110',
],
bind: {
store: '{pie}'
},
series: [{
type: 'pie',
showInLegend: true,
donut: false,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data'));
}
},
highlight: {
segment: {
margin: 15
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
xField: 'data'
}],
interactions: [{
type: 'rotate'
}]
}
here is My dynamically given names i want that names in side of my pie chart i mean above on the chart But when i use name that contain more then 5 letters it goes out side of the chart i will upload a image.
var pieStore = this.getViewModel().getStore('pie');
var rec = selected[0];
if (rec.get('new')) {
pieStore.add({
'name': 'NEW',
data: rec.get('new'),
total: rec.get('total')
});
}
if (rec.get('openToQc')) {
pieStore.add({
'name': 'QC',
data: rec.get('openToQc'),
total: rec.get('total')
});
}
if (rec.get('open')) {
pieStore.add({
'name': 'Open',
data: rec.get('open'),
total: rec.get('total')
});
}
if (rec.get('rejected')) {
pieStore.add({
'name': 'Rejected',
data: rec.get('rejected'),
total: rec.get('total')
});
}
The problem is on your series label:
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
display: 'rotate', displays the label inside the chart in some cases and outside in others, you should use instead display: 'inside',
You can see a working example here
I have a chart retrieving data from my store, the four bits of information are the following
Model Code
Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'meta_id'
},
{
name: 'title'
},
{
name: 'viewed'
},
{
name: 'glances'
}
]
}
});
Now I have the viewed field and the glances field as the numeric fields in the chart, and the title field as the category title in the chart.
I want to render the title name of the field when I hover over it, reason id this. The titles are too long to fit in the x-axis of the chart so in place of the titles I am putting 'meta_id'. So when I hover over the x-axis meta_id field I want the title name to be shown
so for example
meta_id 100 will equal title value ###
Here's is my chart code so far
{
xtype: 'chart',
centered: true,
height: '150%',
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'meta_id'
],
grid: true,
label: {
rotate: {
degrees: 0
},
font: '7px'
},
title: 'Clips'
},
{
type: 'numeric',
fields: [
'viewed'
],
grid: true,
position: 'left',
title: 'Amount'
}
],
series: [
{
type: 'bar',
renderer: function(sprite, config, rendererData, index) {
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
}
],
legend: {
xtype: 'legend'
}
}
As you can see in the above code I have a render function but I dont know what to put into it
Use tips for series
series: [
{
type: 'bar',
tips: {
trackMouse: true,
width: 74,
height: 38,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
}
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
]
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'
}]
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 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.