View Full Version : Pie chart resize + tip format

21 Apr 2011, 5:58 AM
When I put a chart directly in my tab, it perfectly resizes to the available resolution.
When I put it in a container with a border layout, it's going wrong. The chart is not resizing to the available size. For example this setup:

var SalesReport = function() {

Sales['report']['panel'] = new Ext.Panel({
title: LanguageArray['HEADER_SALES'],
layout: 'border',
//frame: true,
border: false,
defaults: {border: true},
items: [{
region: 'west',
title: LanguageArray['HEADER_SALES'],
defaultType: 'button',
bodyStyle: 'padding: 5px',
width: 200,
items: [
text: 'test',

}, {
region: 'center',
id: 'sales_reports_center_panel',
items: [CustomerSalesReport()]
return Sales['report']['panel'];

Function CustomerSalesReport();

var CustomerSalesReport = function () {

Sales['customers_sales']['chart_store'] = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: Base_URL + 'index.php/sales/CustomerSalesReport/',
method: 'POST'
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
{name: 'customers_company', type: 'string', mapping: 'customers_company'},
{name: 'total', type: 'float', mapping: 'total'}

Sales['customers_sales']['graph'] = new Ext.chart.PieChart({
store: Sales['customers_sales']['chart_store'],
xtype: 'piechart',
dataField: 'total',
categoryField: 'customers_company',
display: 'left',
padding: 5,
family: 'Tahoma',
size: 11

Sales['customers_sales']['formpanel'] = new Ext.form.FormPanel({
title: LanguageArray['HEADER_REPORT_OPTIONS'],
bodyStyle: 'background:#eee; padding: 5px',
defaultType: 'textfield',
items: [{
fieldLabel: 'Date'

Sales['customers_sales']['panel'] = new Ext.Panel({
border: false,
defaults: {border: false},
items: [Sales['customers_sales']['formpanel'],

return Sales['customers_sales']['panel'];

The reason I need this, is because there are several reports available on 1 page.
So the west side serves as a menu on which the user can select a chart (might be including description, that's why I didn't prefer the menu), the east (center) side serves for the actual chart.

It might be possible that the actual chart consists of several elements, for example chart settings and the actual charts. It is possible for the user to select top 10 customers in 2010, etc, etc.

Furthermore, I'd like to have the "total" rendered using my renderer (my renderer includes the preference of the user regarding valuta). Now it's just a number for example 310923,465 -> should be 310.923,47 EUR
How can I include my renderer there?

21 Apr 2011, 6:31 AM
I finally found something (thanks to YUI, unfortunately nothing in the documentation nor examples), I've come up with this, which works just fine for me.

tipRenderer: function(chart, record, index, series) {
var seriesData = record.data;
var total = 0;

Ext.each(series.data, function(obj) {
total += parseInt(obj.total);

var slicePct = (seriesData.total/total) * 100;
slicePct = ' (' + slicePct.toFixed(2) + '%)';

var companyMsg = seriesData.customers_company;
var revenueMsg = moneyRenderer(seriesData.total) + slicePct;

return companyMsg + '\n' + revenueMsg;

28 Nov 2012, 9:20 PM

I'm facing similar issue.
the charts are not visible on Android phone & iPhone. on iPad, its getting displayed, But the size is too big n therefore x-axis of the line chart isn't visible. Do you've any idea what should be done in this case? :(

Thanks in advance!