1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Chennai, Tamil Nadu
    Posts
    24
    Vote Rating
    0
    Jay Tanwar is on a distinguished road

      0  

    Default Answered: Gradient for Column Chart

    Answered: Gradient for Column Chart


    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:
    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:
    Code:
    Uncaught TypeError: Cannot read property 'degrees' of undefined
    Thanks in advance.

  2. Hi Jay,

    Try creating Ext.chart.Panel, and add chart as item.
    Code:
    
    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]);         
         }      
     })

  3. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    19
    Answers
    1
    Vote Rating
    0
    vaish is on a distinguished road

      0  

    Default


    Hi Jay,

    Try creating Ext.chart.Panel, and add chart as item.
    Code:
    
    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]);         
         }      
     })

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    18
    Vote Rating
    0
    deepakse is on a distinguished road

      0  

    Default


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

  5. #4
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
    CHINA Zhang is on a distinguished road

      0  

    Default it's a small problem

    it's a small problem


    i know why the problem occured Although I do not know what your data is .your gradients aren't enough for your data of your store.you just add your gradients ,and make the count of that equal to the count of your records.

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