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
    974
    Vote Rating
    110
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."