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
    0
    netslayer is on a distinguished road

      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
    0
    netslayer is on a distinguished road

      0  

    Default


    any ideas? just need to set the stacked bar colors

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    45
    Vote Rating
    0
    netslayer is on a distinguished road

      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
    0
    netslayer is on a distinguished road

      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 wshpoon's Avatar
    Join Date
    Jan 2009
    Location
    Boca Raton, FL
    Posts
    20
    Vote Rating
    0
    wshpoon is on a distinguished road

      0  

    Default


    Great! That worked for me. Thanks ap

  9. #9
    Sencha User
    Join Date
    May 2011
    Location
    Toronto
    Posts
    13
    Vote Rating
    -2
    SenchaGuru has a little shameless behaviour in the past

      0  

    Default


    thanks, that worked for me too, ..
    but the question is, why color attribute doesn't work as in the documentation? someone?

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    26
    Vote Rating
    -1
    ananthk is an unknown quantity at this point

      0  

    Default


    Great answer. That worked fo rme too

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar