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
    975
    Vote Rating
    110
    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>
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    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
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    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
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  4. #4
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    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!
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    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
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  6. #6
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    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.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter