Please Help : How can i use the grouping value in a chart ?
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 :
Here is my XML file :HTML Code:<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>
And here is my JavaScript file :Code:<?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>
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...Code:/*! * 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] }] }] }); });
So, my problem is here :
Please, I need your help...Code:// 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 } } } */ } });
