1. #11
    Sencha User
    Join Date
    Nov 2013
    Posts
    1
    Vote Rating
    0
    cassati is on a distinguished road

      0  

    Default


    Great!!!It works very good.

  2. #12
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Indeed, there is a problem to distinguish a bar which a Renderer is called for. A BarSeries's Renderer is called for shadows as well, not for bars only. Also a record parameter might be undefined.

    After a lot of investigation of the the logic of rendering a BarSeries with multiple YFields, I was able to come up with the example below. I don't think it will work in all possible cases, but it appears to be working well for that specific case.

    Example
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>BarSeries Renderer with multiple YFields</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
        
        <script src="../ext-all-dev.js"></script>
    
        <script>
            Ext.chart.series.Bar.override({
                renderShadows: function(i, barAttr, baseAttrs, bounds) {
                    var me = this,
                        chart = me.chart,
                        surface = chart.surface,
                        animate = chart.animate,
                        stacked = me.stacked,
                        shadowGroups = me.shadowGroups,
                        shadowAttributes = me.shadowAttributes,
                        shadowGroupsLn = shadowGroups.length,
                        store = chart.getChartStore(),
                        column = me.column,
                        items = me.items,
                        shadows = [],
                        zero = bounds.zero,
                        shadowIndex, shadowBarAttr, shadow, totalDim, totalNegDim, j, rendererAttributes;
    
                    if ((stacked && (i % bounds.groupBarsLen === 0)) || !stacked) {
                        j = i / bounds.groupBarsLen;
                        //create shadows
                        for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
                            shadowBarAttr = Ext.apply({}, shadowAttributes[shadowIndex]);
                            shadow = shadowGroups[shadowIndex].getAt(stacked ? j : i);
                            Ext.copyTo(shadowBarAttr, barAttr, 'x,y,width,height');
                            if (!shadow) {
                                shadow = surface.add(Ext.apply({
                                    type: 'rect',
                                    group: shadowGroups[shadowIndex]
                                }, Ext.apply({}, baseAttrs, shadowBarAttr)));
                            }
                            if (stacked) {
                                totalDim = items[i].totalDim;
                                totalNegDim = items[i].totalNegDim;
                                if (column) {
                                    shadowBarAttr.y = zero + totalNegDim - totalDim - 1;
                                    shadowBarAttr.height = totalDim;
                                }
                                else {
                                    shadowBarAttr.x = zero - totalNegDim;
                                    shadowBarAttr.width = totalDim;
                                }
                            }
                    
                            rendererAttributes = me.renderer(shadow, store.getAt(j), shadowBarAttr, i, store, true); // passed true as the last argument to determine it is a shadow or not in a Renderer call
                            rendererAttributes.hidden = !!barAttr.hidden;
                            if (animate) {
                                me.onAnimate(shadow, { to: rendererAttributes });
                            }
                            else {
                                shadow.setAttributes(rendererAttributes, true);
                            }
                            shadows.push(shadow);
                        }
                    }
                    return shadows;
                }
            });
        </script>
    
        <script>
            var barRenderer = function(sprite, record, attr, index, store, isShadow) {
                var barIndex, 
                    data,
                    series = this;
    
                if (!isShadow) {
                    barIndex = index % series.yField.length;
                    record = store.getAt(Math.floor(index / series.yField.length));
    
                    switch (barIndex) {
                        case 0: data = record.get(series.yField[0]); break;
                        case 1: data = record.get(series.yField[1]); break;
                        
                    }
    
                    if (data < 0) {
                        attr.fill = "rgb(255, 0, 0)";
                    } else {
                        attr.fill = "rgb(0, 255, 0)";
                    }
                }
    
                return attr;
            };
    
            Ext.onReady(function () {
                Ext.create("Ext.panel.Panel", {
                    renderTo: Ext.getBody(),
                    height: 300,                
                    width: 400,
                    layout: "fit",
                    title: "Bar Renderer",
                    items: [{
                        xtype: "chart",
                        axes: [{
                            position: "bottom",
                            fields: ["Data1", "Data2"],
                            type: "Numeric",
                            minimum: -100.0
                        }, {
                            position: "left",
                            fields: ["Name"],
                            type: "Category"
                        }],
                        series: [{    
                            type: "bar",
                            xField: "X",
                            yField: ["Data1", "Data2"],
                            axis: "bottom",
                            renderer: barRenderer
                        }],
                        store: {
                           
                            fields: [ "Name", "Data1", "Data2"],
                            data: [{
                                "Name": "Category 1",
                                "Data1": -10,
                                "Data2": 100
                            }, {
                                "Name": "Category 2",
                                "Data1": 20,
                                "Data2": -90
                            }, {
                                "Name": "Category 3",
                                "Data1": -30,
                                "Data2": 80
                            }]
                        }
                    }]                
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>
    It produces the following chart. The colors are set up on the fly. If the data is less than 0, it is red, otherwise - green.



    Hope this helps someone.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Similar Threads

  1. Stacked Bar Chart help
    By marman in forum Ext: Discussion
    Replies: 6
    Last Post: 18 Aug 2011, 10:49 AM
  2. Stacked Bar Chart Help
    By m999 in forum Ext: Discussion
    Replies: 0
    Last Post: 27 Apr 2011, 6:02 PM
  3. Stacked Column Chart in Ext JS
    By extDev in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 7 Jan 2011, 2:30 PM
  4. Stacked bar chart layout
    By Jba in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 26 May 2010, 2:12 AM
  5. ChartListener for Stacked bar chart
    By kamisama in forum Ext GWT: Discussion
    Replies: 7
    Last Post: 4 Feb 2010, 12:39 PM

Thread Participants: 6

Tags for this Thread