Gradient for Column Chart

[Jay Tanwar]

Hi,

I am trying to add gradient to my column chart. But its giving an error. I tried to backtrace error in touch.charts.debug.js. But couldnot come to a conclusion.

I am refering to the examples available with sencha touch charts 2 beta.

The code:

Ext.define('senchaChart.view.BarChart',{
    extend: 'Ext.chart.Chart',
    alias: 'widget.barchart',
    requires: [
    'Ext.chart.axis.Numeric',
    'Ext.chart.axis.Category',
    'Ext.chart.series.Column'
    ],
    
    config: {
        title: 'Bar Chart',
//        cls: 'chartpanel',
//        theme: 'Energy',
        themeCls: 'column1',
        width: 800,
        height: 300,
        animate: {
            easing: 'bounceOut',
            duration: 750
        },
        store: 'ChartStore',     
        
        gradients: [
            {
            id: 'v-0', 
            angle: 10,
            stops: {
                0: {color: 'rgb(212, 40, 40)'},
                100: {color: 'rgb(117, 14, 14)'}
            }
        },
        {
            id: 'v-1',
            angle: 10,
            stops: {
                0: {
                    color: 'rgb(180, 216, 42)'
                },
                100: {
                    color: 'rgb(94, 114, 13)'
                }
            }
        },
        {
            id: 'v-2',
            angle: 10,
            stops: {
                0: {
                    color: 'rgb(43, 221, 115)'
                },
                100: {
                    color: 'rgb(14, 117, 56)'
                }
            }
        },
        {
            id: 'v-3',
            angle: 10,
            stops: {
                0: {
                    color: 'rgb(45, 117, 226)'
                },
                100: {
                    color: 'rgb(14, 56, 117)'
                }
            }
        },
        {
            id: 'v-4',
            angle: 10,
            stops: {
                0: {
                    color: 'rgb(187, 45, 222)'
                },
                100: {
                    color: 'rgb(85, 10, 103)'
                }
            }
        }
        ],
        
        axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['data'],
            title: 'Sample Values',
            grid: true
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Categories'
        }
        ],
            
        series: [
        {
            type: 'column',
            axis: 'left',
            highlight: true,
            
            renderer: function(sprite, storeItem, barAttr, i, store) {
                barAttr.fill = "url(#v-" + (i % colors.length) + ")";
                return barAttr;
            },
            label: 'data',
            xField: 'name',
            yField: 'data'
        }
        ]
        
    }
})

The error in chrome console:

Uncaught TypeError: Cannot read property 'degrees' of undefined

Thanks in advance.

[vaish]

Hi Jay,

Try creating Ext.chart.Panel, and add chart as item.

Ext.define('mycharts.view.BarChart',{
     extend:'Ext.chart.Panel',
     alias:'widget.barchart',
     initialize:function(){
         this.callParent(arguments);
         BarChart = {
             xtype:'chart',
            themeCls: 'column1',
            animate: {
                easing: 'bounceOut',
                duration: 750
            },
            store: 'BarChartStore',
            shadow: false,
            gradients: [
                {
                    'id': 'v-1',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(212, 40, 40)'
                        },
                        100: {
                            color: 'rgb(117, 14, 14)'
                        }
                    }
                },
                {
                    'id': 'v-2',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(180, 216, 42)'
                        },
                        100: {
                            color: 'rgb(94, 114, 13)'
                        }
                    }
                },
                {
                    'id': 'v-3',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(43, 221, 115)'
                        },
                        100: {
                            color: 'rgb(14, 117, 56)'
                        }
                    }
                },
                {
                    'id': 'v-4',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(45, 117, 226)'
                        },
                        100: {
                            color: 'rgb(14, 56, 117)'
                        }
                    }
                },
                {
                    'id': 'v-5',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(187, 45, 222)'
                        },
                        100: {
                            color: 'rgb(85, 10, 103)'
                        }
                    }
                }
            ],
            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data'],
                    minimum: 0,
                    maximum: 100,
                    label: {
                        renderer: function (v) {
                            return v.toFixed(0);
                        }
                    },
                    title: 'Number of Hits'
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }
            ],
            series: [
                {
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    renderer: function (sprite, storeItem, barAttr, i, store) {
                        barAttr.fill = "url(#v-" + (i % colors.length + 1) + ")";
                        return barAttr;
                    },
                    label: {
                        field: 'data'
                    },
                    xField: 'name',
                    yField: 'data'
                }
            ]
        };
        this.add([BarChart]);         
     }      
 })

[deepakse]

i try to this.add('File Name) in series it give error Uncaught SyntaxError: Unexpected identifier