1. 21 Sep 2010 8:11 AM #1
    xav_allais
    xav_allais is offline
    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...
    Reply With Quote Reply With Quote
  2. 29 Sep 2010 12:31 AM #2
    xav_allais
    xav_allais is offline
    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
    Reply With Quote Reply With Quote
  3. 13 Feb 2012 10:23 AM #3
    NoahK17
    NoahK17 is offline
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    0
    NoahK17 is on a distinguished road
      0  

    Default


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

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. [Solved] 3.0RC2 Chart how to shift the content of the chart a little bit horizontally
    By atian25 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 12 Jul 2009, 6:05 PM