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,789
    Vote Rating
    167
    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