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

Just make sure you choose the marker type you are going to use in each one of the series. The types are defined in the class Ext.chart.Shape and they are the following:

• circle
• line
• square
• triangle
• diamond
• cross
• plus
• arrow
• drop (this one didn't work for me)

The way to specify the marker type for the series is

series: [
   {
      ...
      markerConfig: { type: 'diamond' }
      ...          
   }    
]

Answer 2

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! :)

Answer 3

try this step by step:

chart.surface.removeAll();
chart.series.removeAll();
chart.series.addAll(NewSeries);
chart.redraw();
chart.refresh();