PDA

View Full Version : Please Help : How can i use the grouping value in a chart ?



xav_allais
21 Sep 2010, 8:11 AM
Hello,
I need your help.
I'm started with a sample of extJS (Custom Group Summary Plugin Example) and it's Ok for a grouping grid with sum, average and etc.
But how can I use the same grouping value (sum, average, etc) in a chart ?

I give you all my files below :
(N.B.: The "ux" folder which is in the subfolder "example" of extJS has been copied in the extJS folder here...)

I have only 3 files :
. 1 XML file
. 1 index.html file
. 1 JavaScript file

Here is my index.html :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Grouping</title>
<!-- Common Styles ExtJS -->
<link rel="stylesheet" type="text/css" href="../extJS/resources/css/ext-all.css" />

<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="../extJS/ux/css/GroupSummary.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../extJS/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<!-- Common JavaScript ExtJS -->
<script type="text/javascript" src="../extJS/ext-all.js"></script>

<!-- extensions -->
<script type="text/javascript" src="../extJS/ux/GroupSummary.js"></script>

<!-- Common Styles for the Mock-Up -->
<!-- <link rel="stylesheet" type="text/css" href="contents/css/globalStyle.css" /> -->

<!-- JavaScript for the Mock-Up -->
<script type="text/javascript" src="myForm.js"></script>

</head>

<body>

</body>

</html>Here is my XML file :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Row>
<projectId>100</projectId>
<project>Ext Forms: Field Anchoring</project>
<taskId>112</taskId>
<description>Integrate 2.0 Forms with 2.0 Layouts</description>
<estimate>6</estimate>
<rate>150</rate>
<due>06/24/2007</due>
</Row>
<Row>
<projectId>100</projectId>
<project>Ext Forms: Field Anchoring</project>
<taskId>113</taskId>
<description>Implement AnchorLayout</description>
<estimate>4</estimate>
<rate>150</rate>
<due>06/25/2007</due>
</Row>
<Row>
<projectId>100</projectId>
<project>Ext Forms: Field Anchoring</project>
<taskId>114</taskId>
<description>Add support for multiple types of anchors</description>
<estimate>4</estimate>
<rate>150</rate>
<due>06/27/2007</due>
</Row>
<Row>
<projectId>100</projectId>
<project>Ext Forms: Field Anchoring</project>
<taskId>115</taskId>
<description>Testing and debugging</description>
<estimate>8</estimate>
<rate>0</rate>
<due>06/29/2007</due>
</Row>
<Row>
<projectId>101</projectId>
<project>Ext Grid: Single-level Grouping</project>
<taskId>101</taskId>
<description>Add required rendering "hooks" to GridView</description>
<estimate>6</estimate>
<rate>100</rate>
<due>07/01/2007</due>
</Row>
<Row>
<projectId>101</projectId>
<project>Ext Grid: Single-level Grouping</project>
<taskId>102</taskId>
<description>Extend GridView and override rendering functions</description>
<estimate>6</estimate>
<rate>100</rate>
<due>07/03/2007</due>
</Row>
<Row>
<projectId>101</projectId>
<project>Ext Grid: Single-level Grouping</project>
<taskId>103</taskId>
<description>Extend Store with grouping functionality</description>
<estimate>4</estimate>
<rate>100</rate>
<due>07/04/2007</due>
</Row>
<Row>
<projectId>101</projectId>
<project>Ext Grid: Single-level Grouping</project>
<taskId>121</taskId>
<description>Default CSS Styling</description>
<estimate>2</estimate>
<rate>100</rate>
<due>07/05/2007</due>
</Row>
<Row>
<projectId>101</projectId>
<project>Ext Grid: Single-level Grouping</project>
<taskId>104</taskId>
<description>Testing and debugging</description>
<estimate>6</estimate>
<rate>100</rate>
<due>07/06/2007</due>
</Row>
<Row>
<projectId>102</projectId>
<project>Ext Grid: Summary Rows</project>
<taskId>105</taskId>
<description>Ext Grid plugin integration</description>
<estimate>4</estimate>
<rate>125</rate>
<due>07/01/2007</due>
</Row>
<Row>
<projectId>102</projectId>
<project>Ext Grid: Summary Rows</project>
<taskId>106</taskId>
<description>Summary creation during rendering phase</description>
<estimate>4</estimate>
<rate>125</rate>
<due>07/02/2007</due>
</Row>
<Row>
<projectId>102</projectId>
<project>Ext Grid: Summary Rows</project>
<taskId>107</taskId>
<description>Dynamic summary updates in editor grids</description>
<estimate>6</estimate>
<rate>125</rate>
<due>07/05/2007</due>
</Row>
<Row>
<projectId>102</projectId>
<project>Ext Grid: Summary Rows</project>
<taskId>108</taskId>
<description>Remote summary integration</description>
<estimate>4</estimate>
<rate>125</rate>
<due>07/05/2007</due>
</Row>
<Row>
<projectId>102</projectId>
<project>Ext Grid: Summary Rows</project>
<taskId>109</taskId>
<description>Summary renderers and calculators</description>
<estimate>4</estimate>
<rate>125</rate>
<due>07/06/2007</due>
</Row>
<Row>
<projectId>102</projectId>
<project>Ext Grid: Summary Rows</project>
<taskId>110</taskId>
<description>Integrate summaries with GroupingView</description>
<estimate>10</estimate>
<rate>125</rate>
<due>07/11/2007</due>
</Row>
<Row>
<projectId>102</projectId>
<project>Ext Grid: Summary Rows</project>
<taskId>111</taskId>
<description>Testing and debugging</description>
<estimate>8</estimate>
<rate>125</rate>
<due>07/15/2007</due>
</Row>
</Root>

And here is my JavaScript file :

/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = '../extJS/resources/images/default/s.gif'; // s.gif sur internet?? Non!!!
Ext.chart.Chart.CHART_URL = '../extJS/resources/charts.swf';

// Reader
//========
var myReader = new Ext.data.XmlReader({
record: 'Row',
id: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'cost', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});

// Grouping Store
//================
var myStore = new Ext.data.GroupingStore({
// load using HTTP
url: 'Projects.xml',
// the return will be XML, so lets set up a reader
reader: myReader,
sortInfo: {field: 'due', direction: 'ASC'},
groupField: 'project'
});
myStore.load();

// define a custom summary function
//==================================
Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
return v + (record.data.estimate * record.data.rate);
};

// utilize custom extension for Group Summary
//============================================
var summary = new Ext.ux.grid.GroupSummary();

// Grid
//======
var myGrid = new Ext.grid.EditorGridPanel({
ds: myStore,
columns: [
{
id: 'description',
header: 'Task',
width: 80,
sortable: true,
dataIndex: 'description',
summaryType: 'count',
hideable: false,
summaryRenderer: function(v, params, data){
return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
},
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: 'Project',
width: 20,
sortable: true,
dataIndex: 'project'
},{
header: 'Due Date',
width: 25,
sortable: true,
dataIndex: 'due',
summaryType: 'max',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
})
},{
header: 'Estimate',
width: 20,
sortable: true,
dataIndex: 'estimate',
summaryType: 'sum',
renderer : function(v){
return v +' hours';
},
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: 'text-align:left'
})
},{
header: 'Rate',
width: 20,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'rate',
summaryType: 'average',
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: 'text-align:left'
})
},{
id: 'cost',
header: 'Cost',
width: 20,
sortable: false,
groupable: false,
renderer: function(v, params, record){
return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
},
dataIndex: 'cost',
summaryType: 'totalCost',
summaryRenderer: Ext.util.Format.usMoney
}
],

view: new Ext.grid.GroupingView({
forceFit: true,
showGroupName: false,
enableNoGroups: false,
enableGroupingMenu: false,
hideGroupedColumn: true
}),

plugins: summary,

tbar : [{
text: 'Toggle',
tooltip: 'Toggle the visibility of summary row',
handler: function(){summary.toggleSummaries();}
}],

frame: true,
width: 800,
height: 450,
clicksToEdit: 1,
collapsible: true,
animCollapse: false,
trackMouseOver: false,
//enableColumnMove: false,
title: 'Sponsored Projects',
iconCls: 'icon-grid'
//renderTo: document.body
});

// Grid Panel
//============
var myGridPanel = new Ext.Panel({
title: 'Grouping Grid' ,
header: true,
layout:'table',
items: [myGrid]
});

// Pie Panel
//===========
var myPiePanel = new Ext.Panel({
width: 400,
height: 400,
title: 'Pie Chart with Legend - Favorite Season',
items: {
store: myStore, //
xtype: 'piechart', // HOW CAN I HAVE THE GROUPING VALUE IN MY CHART ???
dataField: 'totalCost', //
categoryField: 'project' //
//extra styles get applied to the chart defaults
/*extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
} */
}
});


// Display!
//==========
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'center',
margins:'35 5 5 0',
layout:'table',
autoScroll:true,
items:[{
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[myGridPanel, myPiePanel]
}]
}]
});

});All is displayed, but of course my pie is bad because i don't know how i can use the totalCost field in my pie...

So, my problem is here :

// Pie Panel
//===========
var myPiePanel = new Ext.Panel({
width: 400,
height: 400,
title: 'Pie Chart with Legend - Favorite Season',
items: {
store: myStore, //
xtype: 'piechart', // HOW CAN I HAVE THE GROUPING VALUE IN MY CHART ???
dataField: 'totalCost', //
categoryField: 'project' //
//extra styles get applied to the chart defaults
/*extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
} */
}
}); Please, I need your help...

xav_allais
29 Sep 2010, 12:31 AM
Nobody Knows ?
I just want to use aggregated values in my chart...

For example, if y have following data :
USA - Beverages - 10 000 $
USA - Seafood - 5 000 $
Canada - Beverages - 8 000 $
Canada - Seafood - 6 000 $
Brazil - Beverages - 9 000 $
Brazil - Seafood - 3 000 $

I want a pie chart with :
USA : 15 000 $
Canada : 14 000 $
Brazil : 12 000 $

Many thanks for your help :)

NoahK17
13 Feb 2012, 10:23 AM
I am also looking for an answer to this problem.