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
    5,978
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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