Hybrid View

  1. #1
    Sencha User wshpoon's Avatar
    Join Date
    Jan 2009
    Location
    Boca Raton, FL
    Posts
    20
    Vote Rating
    0
    wshpoon is on a distinguished road

      0  

    Default Stacked bar chart color scheme

    Stacked bar chart color scheme


    I want to specify what color to associate with which data item. I want all the criticals to be red, etc. Any ideas? I couldn't find anything in the forums. Here is my code:
    Code:
    series: [
                    {
                        type: 'bar',
                        title: ['Info', 'Low', 'Medium', 'High', 'Critical'],
                        axis: 'bottom',
                        gutter: 80,
                        xField: 'company',
                        yField: ['icount', 'lcount', 'mcount', 'hcount', 'ccount'],
                        stacked: true,
                        tips: {
                            trackMouse: true,
                            width: 65,
                            height: 28,
                            renderer: function(storeItem, item) {
                                var mystoreItem = item.storeItem;
                                this.setTitle(String(item.value[1]));
                            }
                        }
                    }
                ]
            }

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Posts
    45
    Vote Rating
    -1
    netslayer is an unknown quantity at this point

      0  

    Default


    same question. using a stacked bar chart, API doesn't show how we can easily configure colors per bar (ie not just change all of them but each one stacked separately). any ideas?

    btw I can see how to set it using a renderer but in the renderer you don't know which bar it is given the parameters coming in. this should as simple as a configuration in the chart.

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    45
    Vote Rating
    -1
    netslayer is an unknown quantity at this point

      0  

    Default


    any ideas? just need to set the stacked bar colors

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    45
    Vote Rating
    -1
    netslayer is an unknown quantity at this point

      0  

    Default


    This is my series configuration - notice I can set the fill color of the bars in the renderer but I can't distinguish the bars based on the parameters coming in. If anyone knows how to distinguish or use an alternative configuration please share:

    Code:
    series: [{
                    type: 'bar',
                    axis: 'bottom',
                    gutter: 5,
                    minMargin: 0,
                    xField: 'term',
                    highlight: true,
                    stacked: true,
                    yField: ['propertyRevenueEarnedIndex', 'allRevenueEarnedIndex'],
                    renderer: function(sprite, storeItem, barAttr, i, store) {
                          barAttr.fill = '#91D0FF';
                    }
            }]

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    45
    Vote Rating
    -1
    netslayer is an unknown quantity at this point

      0  

    Default


    I did this the evil way, do a full override of the chart themes as setting them on the chart do not seem to work. specifically the "colors" array below.

    Code:
    Ext.override(Ext.chart.theme.Base, {
        constructor: function(config) {
          
    	Ext.chart.theme.call(this, config, {
            background: false,
            axis: {
                stroke: '#444',
                'stroke-width': 1
            },
            axisLabelTop: {
                fill: '#444',
                font: '12px Arial, Helvetica, sans-serif',
                spacing: 2,
                padding: 5,
                renderer: function(v) { return v; }
            },
            axisLabelRight: {
                fill: '#444',
                font: '12px Arial, Helvetica, sans-serif',
                spacing: 2,
                padding: 5,
                renderer: function(v) { return v; }
            },
            axisLabelBottom: {
                fill: '#444',
                font: '12px Arial, Helvetica, sans-serif',
                spacing: 2,
                padding: 5,
                renderer: function(v) { return v; }
            },
            axisLabelLeft: {
                fill: '#444',
                font: '12px Arial, Helvetica, sans-serif',
                spacing: 2,
                padding: 5,
                renderer: function(v) { return v; }
            },
            axisTitleTop: {
                font: 'bold 18px Arial',
                fill: '#444'
            },
            axisTitleRight: {
                font: 'bold 18px Arial',
                fill: '#444',
                rotate: {
                    x:0, y:0,
                    degrees: 270
                }
            },
            axisTitleBottom: {
                font: 'bold 18px Arial',
                fill: '#444'
            },
            axisTitleLeft: {
                font: 'bold 18px Arial',
                fill: '#444',
                rotate: {
                    x:0, y:0,
                    degrees: 270
                }
            },
            series: {
                'stroke-width': 0
            },
            seriesLabel: {
                font: '12px Arial',
                fill: '#333'
            },
            marker: {
                stroke: '#555',
                fill: '#000',
                radius: 3,
                size: 3
            },
            colors: ["#91D0FF", "#004A82", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
            seriesThemes: [{
                fill: "#115fa6"
            }, {
                fill: "#94ae0a"
            }, {
                fill: "#a61120"
            }, {
                fill: "#ff8809"
            }, {
                fill: "#ffd13e"
            }, {
                fill: "#a61187"
            }, {
                fill: "#24ad9a"
            }, {
                fill: "#7c7474"
            }, {
                fill: "#a66111"
            }],
            markerThemes: [{
                fill: "#115fa6",
                type: 'circle' 
            }, {
                fill: "#94ae0a",
                type: 'cross'
            }, {
                fill: "#a61120",
                type: 'plus'
            }]
        });
    
        }
    });

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    61
    Vote Rating
    4
    ap is on a distinguished road

      0  

    Default


    The example from the link shows config under series
    PHP Code:
    series:[{
    .....
    stacked:true,
    color:[ 'aaa','eee','fff']
    ..
    }] 
    http://www.slideshare.net/senchainc/charts-5971878

    But it DOES NOT WORK. I also try to change the color in style and theme, but no luck.
    You could pass 'fill' under style, but it only takes one color not an array of colors.

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    61
    Vote Rating
    4
    ap is on a distinguished road

      0  

    Default


    Quote Originally Posted by netslayer View Post
    I did this the evil way, do a full override of the chart themes as setting them on the chart do not seem to work. specifically the "colors" array below.
    Okay, here is a better solution, Although I still think passing a simple color array under series should work, when the 'bug' is fixed.

    You can first create your own theme
    PHP Code:
                    Ext.define('Ext.chart.theme.myTheme', {
                         
    extend'Ext.chart.theme.Base',
                         
    constructor: function(config) {
                             
    this.callParent([Ext.apply({
                                 
    colors: ['#aaa','#eee']
                             }, 
    config)]);
                         }
                     }); 
    Then just add the theme in your own chart config

    PHP Code:
                                        xtype'chart',
                                        ........
                                        
    shadow:true,
                                        
    legend:{
                                            
    position:'bottom'
                                        
    },
                                        
    storethis.chartStore,
                                        
    theme'myTheme',
                                   ....... 
    Works with gradients too, if you define any (use 'url(#id)' )

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

      0  

    Default


    Great!!!It works very good.

  9. #9
    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..." hd porno faketaxi