How to add more than 3 SERIES in a LINE or SCATTER chart?

Question

When I try to add more than 3 SERIES in a LINE or SCATTER chart, an exception occurs:

In Google Chrome:

Uncaught TypeError: Property 'undefined' of object [object Object] is not a function

In Firefox:

Ext.chart.Shape[type] is not a function [Stop this error] }, attr));

This was identified by ExtJS Support as a bug: http://www.sencha.com/forum/showthread.php?140932-How-to-add-more-than-3-SERIES-in-a-LINE-or-SCATTER-chart

Below follow the code:

Ext.require('Ext.chart.*');

Ext.define('AM.view.user.ScatterGraphic', {
extend : 'Ext.chart.Chart',
alias : 'widget.scatterGraphic',
title : 'All Users',
animate : true,
renderTo : Ext.getBody(),
theme : 'Category2',

axes : [ {
    type : 'Numeric',
    position : 'bottom',
    fields : [ 'data1', 'data2', 'data3', 'data4', 'data5' ],
    title : 'Sample Values',
    grid : true,
    minimum : 0
}, {
    type : 'Category',
    position : 'left',
    fields : [ 'name' ],
    title : 'Sample Metrics'
} ],

series : [{
    type : 'scatter',
    axis: true,
    markerConfig : {
        radius : 5,
        size : 5
    },
    axis : 'left',
    xField : 'name',
    yField : 'data1'
}, {
    type : 'scatter',
    axis: true,
    markerConfig : {
        radius : 5,
        size : 5
    },
    axis : 'left',
    xField : 'name',
    yField : 'data2'
}, {
    type : 'scatter',
    axis: true,
    markerConfig : {
        radius : 5,
        size : 5
    },
    axis : 'left',
    xField : 'name',
    yField : 'data3'
},
// THIS SERIE THROWS THE EXCEPTION
 {
    type : 'scatter',
    axis: true,
    markerConfig : {
        radius : 5,
        size : 5
    },
    axis : 'left',
    xField : 'name',
    yField : 'data4'
}], 

initComponent : function() {
    this.store = {
        fields : [ 'name', 'data1', 'data2', 'data3', 'data4', 'data5' ],
        data : [ {
            'name' : 'metric one',
            'data1' : 10,
            'data2' : 12,
            'data3' : 14,
            'data4' : 8,
            'data5' : 13
        }, {
            'name' : 'metric two',
            'data1' : 7,
            'data2' : 8,
            'data3' : 16,
            'data4' : 10,
            'data5' : 3
        }, {
            'name' : 'metric three',
            'data1' : 5,
            'data2' : 2,
            'data3' : 14,
            'data4' : 12,
            'data5' : 7
        }, {
            'name' : 'metric four',
            'data1' : 2,
            'data2' : 14,
            'data3' : 6,
            'data4' : 1,
            'data5' : 23
        }, {
            'name' : 'metric five',
            'data1' : 27,
            'data2' : 38,
            'data3' : 36,
            'data4' : 13,
            'data5' : 33
        } ]
    };

    this.callParent(arguments);
}
});

By the way, anybody have an idea of what can be done to create something like that?

Thanks!

Answer 1

This problem is caused when I leave to ExtJS the automatic choice of markers. If I setup a marker for each serie in the chart, the problem does not happen. That's it! :)