1. #1
    Ext User
    Join Date
    May 2010
    Posts
    21
    Vote Rating
    0
    xav_allais is on a distinguished road

      0  

    Exclamation Please Help : How can i use the grouping value in a chart ?

    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 :
    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>
    Here is my XML 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>
    And here is my JavaScript file :
    Code:
    /*!
     * Ext JS Library 3.2.1
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * licensing@extjs.com
     * 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 :
    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
                        }
                    }
                } */
            }
        });
    Please, I need your help...

  2. #2
    Ext User
    Join Date
    May 2010
    Posts
    21
    Vote Rating
    0
    xav_allais is on a distinguished road

      0  

    Default


    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

  3. #3
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    I am also looking for an answer to this problem.
    Noah
    Senior Web Developer
    NBA.com

Similar Threads

  1. Ext.ux.Chart.Fusion.Panel doesn't render the chart!
    By stranieroinpatria in forum Ext 2.x: User Extensions and Plugins
    Replies: 2
    Last Post: 16 Dec 2010, 4:53 AM
  2. [Chart] - How can i display results above the chart bars?
    By mechamoleo in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 30 Apr 2010, 6:49 AM
  3. [3.x r5790] Ext.chart.Chart.onDestroy causes exception in IE6
    By jay@moduscreate.com in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 16 Dec 2009, 5:38 AM
  4. [ext 3.0.3] Pie chart disappear wher chart store is reloaded
    By e-tip in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 24 Nov 2009, 7:12 AM
  5. Replies: 1
    Last Post: 12 Jul 2009, 6:05 PM

Thread Participants: 1