Results 1 to 9 of 9

Thread: getting error as Error: Invalid value for <rect> attribute y="-Infinity" on chart

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    208
    Answers
    2

    Default getting error as Error: Invalid value for <rect> attribute y="-Infinity" on chart

    Hi, I am getting below error when I run my charts.Is this bug ? I am using extjs 4.0.7
    Error: Invalid value for <rect> attribute y="-Infinity"
    Error: Invalid value for <rect> attribute height="Infinity"
    Error: Invalid value for <rect> attribute y="-Infinity"
    Error: Invalid value for <rect> attribute height="Infinity"
    Error: Invalid value for <rect> attribute y="-Infinity"
    Error: Invalid value for <rect> attribute height="Infinity"





  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    Can I get a locally runnable code for your charts so I can see what is going wrong? Have seen this when the response isn't what the chart wants.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    208
    Answers
    2

    Default

    Hi There,
    please find my code snippet used for column chart.
    Code:
    var reasonColumnChart = Ext.create('Ext.chart.Chart',{
        store        : store,
        width        : 300,
        height        : 300,
        theme        : 'Sky',
        legend        : true,
        animate        : true,
        theme: "Blue",
        theme: "Sky",             
        axes: [
            {
                title    : 'Reason',
                type    : 'Category',
                position: 'bottom',
                fields    : ['reason_description']
                       
            },
            {
                title: 'Counts',
                type: 'Numeric',
                position: 'left',
                fields: ['count'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,1000')
                },
                grid: true 
            }
     
       ],
     // defind the series code for coloum time chart 
        series: [{
                type    : 'column',
                axis    : 'left',
                 fill    : true,
                smooth     : true,
                markerConfig: {
                        type    : 'circle',
                        radius    : 7
                    },
                highlight: true,
                xField    : 'reason_description',
                yField    : 'count',
                gutter: 150, 
                groupGutter: 150,
                tips    : {
                        trackMouse    : true,
                        renderer    : function(storeItem, item){ 
                            var tipTitle = " Number : " + storeItem.get('count');
                            this.setSize(185, 25);
                            this.setTitle(tipTitle);
                        }
                    }
                }]
    });
    This is the way I am creating column chart object.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    208
    Answers
    2

    Default

    As soon as I loaded my chart, I get this error. The reason could be if store is empty. Will you try by keeping your store empty also ?

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    I actually wait for the store to load before I render the chart due to issues I have seen.

    What is your response?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    208
    Answers
    2

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I actually wait for the store to load before I render the chart due to issues I have seen.

    What is your response?
    I am selecting from and to date value from toolbar and click on button to load data , so it throws this error .The other chart throws this error as soon as I open my chart(from menu).
    I basically tested this chart on two different databases one, which doesn't have proper data to load data and second ,which has proper data. There also I got error for other chart. So I am not able to understand what is exact problem. Also observed y axis value doesn't appears

    Is it some bug for Chart?

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    1

    Default

    Does anyone have an answer to this question. I am getting a similar error. The console just points to line 1 of my index page...

    Error: Invalid value for <svg> attribute width="-Infinity"
    Error: Invalid value for <svg> attribute height="-Infinity"
    Error: Invalid value for <rect> attribute width="-Infinity"
    Error: Invalid value for <rect> attribute height="-Infinity"

  8. #8

    Default

    The issue is the bar's attributes are getting set to negative value, please have the code in bold, i hope this will work.

    var reasonColumnChart = Ext.create('Ext.chart.Chart',{ store : store, width : 300, height : 300, theme : 'Sky', legend : true, animate : true, theme: "Blue", theme: "Sky", axes: [ { title : 'Reason', type : 'Category', position: 'bottom', fields : ['reason_description'] }, { title: 'Counts', type: 'Numeric', position: 'left', fields: ['count'], label: { renderer: Ext.util.Format.numberRenderer('0,1000') }, grid: true } ], // defind the series code for coloum time chart series: [{ type : 'column', axis : 'left', fill : true, smooth : true, markerConfig: { type : 'circle', radius : 7 }, highlight: true, xField : 'reason_description', yField : 'count', gutter: 150, groupGutter: 150, renderer: function (sprite, storeItem, barAttr, i, store) {

    barAttr.width = (barAttr.width >0 ? barAttr.width : 0);
    return barAttr;
    },
    tips : { trackMouse : true, renderer : function(storeItem, item){ var tipTitle = " Number : " + storeItem.get('count'); this.setSize(185, 25); this.setTitle(tipTitle); } } }]});

  9. #9
    Sencha User
    Join Date
    Aug 2012
    Posts
    2

    Default

    setting minimum: 0 for vertical axes helps me.

    Code:
                            axes: [
                                {
                                    type: 'Numeric',
                                    position: 'left',
                                    fields: ['value'],
                                    grid: true,
                                    minimum: 0
                                }, 
                                {
                                    type: 'Category',
                                    position: 'bottom',
                                    fields: ['date']
                                }
                            ],

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •