PDA

View Full Version : Pie Chart not shown



ONeill
24 Apr 2013, 11:38 AM
Hello all,

i have tried to load a pie chart into my panel when the user click in a grid's cell. For this (all data, including the chart, will be shown in a new tab in my tabpanel) i have created a function:

function createnewview(id, name) {
klick_chart_store[id] = Ext.create('Ext.data.JsonStore', {
fields:
['name', 'anzahl'],
proxy: {
type: 'ajax',
url: './classes/system.funktionen.get.php',
params: {
action: 'klick_chart',
partnerid: id
},
reader: {
type: 'json',
root: 'partnerinfo'
}
},
autoLoad: true
});

klick_chart[id] = Ext.create('Ext.chart.Chart', {
animate: true,
store: klick_chart_store[id],
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'anzahl',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
storejdk.each(function(rec) {
total += rec.get('anzahl');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('anzahl') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});

system_value[id] = Ext.create('Ext.Panel', {
id: id,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
flex: 1,
title: 'Einstellungen von '+name,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
flex: 1.5,
items: [{
xtype:'textfield',
name: 'name_of_'+id,
id: 'name_of_'+id,
fieldLabel: 'Name',
value: 'Lade...',
allowBlank: false,
margin: '10 0 0 4'
},{
xtype:'textfield',
name: 'link_of_'+id,
id: 'link_of_'+id,
fieldLabel: 'Link',
value: 'Lade...',
allowBlank: false,
margin: '0 0 0 4'
}, {
xtype:'textfield',
name: 'image_of_'+id,
id: 'image_of_'+id,
fieldLabel: 'Bild',
value: 'Lade...',
allowBlank: false,
margin: '0 0 0 4'
}, {
xtype:'textfield',
name: 'outlink_of_'+id,
id: 'outlink_of_'+id,
fieldLabel: 'Outlink-ID',
value: 'Lade...',
margin: '0 0 0 4',
readOnly: 'true'
}]
}, {
xtype: 'panel',
flex: 1,
id: 'klick_chart_'+id,
items: [klick_chart[id]]
}]
},{
xtype: 'panel',
flex: 1.2,
title: 'Statistik von '+name,
html: 'Hi'
}]
});
}


The problem is, that the chart is not loading and no error message is schown, all looks like ok. I have no idea what i can do now, bc this is the first time i use charts in extjs :S

Can anyone help me please?

Greetings
ONeill

ONeill
25 Apr 2013, 9:54 AM
No one an idea? :)

slemmon
26 Apr 2013, 7:50 AM
If you look in your browser's debugger are you seeing the data for the chart returned from the server?

ONeill
26 Apr 2013, 11:32 AM
Hi,

thanks for the answer :) After is looked over my code, i have found an error, the data will not send, because for the proxy i have to use extraParams instead of Params, after this the data will sent via GET, i have manually turned it to POST, now all data receive, but the chart does not shown, no error message.

The code of the store now:

klick_chart_store[id] = Ext.create('Ext.data.JsonStore', {
fields:
['name', 'anzahl'],
proxy: {
type: 'ajax',
url: './classes/system.partner.get.php',
actionMethods: {create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'},
extraParams: {
action: 'klick_chart',
partnerid: id
},
reader: {
type: 'json',
root: 'partnerinfo'
}
},
autoLoad: true
});


Greetings
ONeill

slemmon
26 Apr 2013, 1:16 PM
Can you post an example of the JSON being returned from the proxy?

ONeill
26 Apr 2013, 1:25 PM
Sure,


{"success":"true","partnerinfo":[{"name":"versteckt","anzahl":"13"},{"name":"versteckt","anzahl":"31"},{"name":"versteckt","anzahl":"16"}],"totalCount":2}

Greetings
ONeill

suzuki1100nz
26 Apr 2013, 3:13 PM
Hi,
Avoid the use of panels unless your using panel features e.g. title header bar, docking... use containers.
See the performance guide - http://docs.sencha.com/extjs/4.1.3/#!/guide/performance

The panel that contains the pie chart should have the fit layout applied

ONeill
27 Apr 2013, 4:30 AM
Hey,

thanks for the help, now the chart is shown :) I have, like suzuki1100nz (http://www.sencha.com/forum/member.php?263402-suzuki1100nz) said, changed the panel include the chart changed to type container and set the layout of the chart to fit :)

Thanks for your help!

Greetings
ONeill

suzuki1100nz
27 Apr 2013, 12:58 PM
Great - happy to help please mark the thread as answered