Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-8798 in a recent build.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    982
    Vote Rating
    116
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default [4.2.0 RC] Setting up legend for chart throws JavaScript error

    [4.2.0 RC] Setting up legend for chart throws JavaScript error


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.0 RC
    Browser versions tested against:
    • Chrome
    • FireFox
    • IE9
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • Setting up a legend for achart throws a JavaScript error "index is not defined" within the drawLine function of the Ext.chart.LegendItem class. The index variable seems to be not defined at all.
    Steps to reproduce the problem:
    • Just run the sample
    The result that was expected:
    • No error
    The result that occurs instead:
    • The "index is not defined" JavaScript error occurs.
    Test Case:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Chart JS error legend item</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
        
        <script src="../ext-all-debug.js"></script>
    
        <script>
            Ext.onReady(function () {
                Ext.create("Ext.chart.Chart", {
                    renderTo: Ext.getBody(),
                    height: 400,
                    width: 400,
                    axes: [{
                        position: "bottom",
                        title: "X",
                        fields: ["x"],
                        type: "Numeric"
                    }, {
                        position: "left",
                        title: "Y",
                        fields: ["y"],
                        type: "Numeric"
                    }],
                    legend: {}, // removing it causes the sample to be launched without any error
                    series: [{
                        title: "Chart",
                        xField: "x",
                        yField: "y",
                        type: "line"
                    }],
                    store: {
                        fields: [{
                            name: "x"
                        }, {
                            name: "y"
                        }],
                        data: [{
                            x: 0,
                            y: 0
                        }, {
                            x: 50,
                            y: 50
                        }, {
                            x: 100,
                            y: 100
                        }]
                    }
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Launching Soon!
    --------------------------------------------------

  2. #2
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,948
    Vote Rating
    953
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    18
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    The problem is that you have added a legend but you haven't configured what field to use for the label in the legend or set a title for the series.

    Adding:
    Code:
    ...
    series: [{
        title: "Chart",
        xField: "x",
        yField: "y",
        type: "line",
        label: {
            field: 'model.field.with.text.for.the.legend'
        }
    }],
    ...
    will fix the problem.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  4. #4
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    982
    Vote Rating
    116
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Quote Originally Posted by jack.slocum View Post
    The problem is that you have added a legend but you haven't configured what field to use for the label in the legend or set a title for the series.

    Adding:
    Code:
    ...
    series: [{
        title: "Chart",
        xField: "x",
        yField: "y",
        type: "line",
        label: {
            field: 'model.field.with.text.for.the.legend'
        }
    }],
    ...
    will fix the problem.
    Thank you for the answer, Jack (by the way it is cool to speak with an Ext Founder).

    Seems, adding a label config option doesn't help to fix the problem. I am a bit confused what are the relations between a series' label option and a legend? Could you clarify, please?

    Also the series' title is set up in my test case. It seems also don't help to avoid the error. Well, there seems just a developer error in the LegendItem's drawLine method. The "index" variable is not defined anywhere. Probably, this was fixed in Sprint 4.

    Please correct me if I am wrong somewhere.

    Quote Originally Posted by mitchellsimoens View Post
    Thanks for the report! I have opened a bug in our bug tracker.
    Hi Mitchell,

    Thank you for opening a bug ticket and fixing!
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Launching Soon!
    --------------------------------------------------

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    18
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    I had just ran into a similar error and upon quick glance thought you had run into the same one. After looking at the source, index is not defined in that function.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  6. #6
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    982
    Vote Rating
    116
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Ok, thank you for clarifying.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Launching Soon!
    --------------------------------------------------