1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default How to change color of column graph dynamically in Extjs?

    How to change color of column graph dynamically in Extjs?


    Hi, I have done application using Extjs. Requirement is need to change color of column graph dynamically after February. Find the attached image, here i have two fields based on that i plot column graph. I am showing two different fields with different color as column in graph. My problem is after February month, i need to change the color of one column to different color (marked in attached image). but field value will be the same only need to change color. If i plot the graph by hard coded value, easily i can change color for particular month. but here i am plotting the graph based on store value dynamically. Can any tell me how to achieve this one in Extjs? is it possible or not in extjs?. Great appropriated. Thank you


    **Here is my code:**


    Code:
    Ext.define('Ext.chart.theme.ColumnColorTheme', {
            extend: 'Ext.chart.theme.Base',
            constructor: function(config) {
                this.callParent([Ext.apply(
                {        
        
                    axisTitleLeft: {
                        font:'15px Arial',
                        fill:'#0185d7'
                    },
                    axisTitleRight: {
                        font:'15px Arial',
                        fill:'#0185d7'
                    },
                    colors: ['rgb(50, 150, 255)','rgb(0, 70, 100)']
                }, config)]);
            }
        });
        
        Ext.define('Myweb.view.UtilizationReportGraphView',
        {
            extend:'Ext.chart.Chart',
            requires:['Ext.chart.series.Column','Ext.chart.series.Line','Ext.chart.axis.Numeric','Ext.chart.axis.Category'],
            alias:'widget.utilizationView',
            id:'utilizationViewId',
            theme:'ColumnColorTheme',    
            height:window.innerHeight/2,
            width:window.innerWidth,
            store:'RevenueReportStore',
            legend:{
                position:'top'      
            },
            axes:[
            {
                type: 'Numeric',
                position: 'left',
                fields: ['dayRateBudget','dayRateActual'],
                minimum:0 
            },
            {
                type: 'Category',
                position: 'bottom',
                fields: ['month'] 
            },
            {
                title: 'Variance in %',
                type: 'Numeric',
                position: 'right',
                fields: ['utilizationPercentage']
            }
            ],
            series: [
            {
                type: 'column',
                axis: 'left',
                xField: 'month',
                yField: ['dayRateBudget','dayRateActual'],
                groupGutter:20,
                gutter:100,
                title:['Budget','Actual']
            },   
                {
                type: 'line',
                axis: 'right',
                xField: 'month',
                yField: ['utilizationPercentage'],
                markerConfig: {
                    type: 'circle',
                    fill:'red',
                    stroke:'red',
                    'stroke-width': 0
                },
                style:{
                    stroke:'red',
                    'stroke-width': 2
                },
                title:['Variance']
                   
            }
            ]       
        });
    Here is my Graph image
    ColumnGraph.jpg

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,904
    Vote Rating
    178
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    You should be able to use the series' renderer config. Here's an example of it at work:
    http://docs.sencha.com/extjs/4.2.0/e...rRenderer.html

  3. #3
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default


    Thank you, helpful.

Thread Participants: 1

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