Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Mar 2008
    Location
    São José dos Campos/SP - Brazil
    Posts
    3
    Vote Rating
    0
    marcelojuventino is on a distinguished road

      0  

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

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


    Hi all!

    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));
    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);
    	}
    
    });
    Is it possible to add more than 3 series in this kind of graphics? How to do that?

    Thanks everybody!

  2. #2
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Thanks, I was able to reproduce this problem and have pushed it into our bug tracker.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Location
    São José dos Campos/SP - Brazil
    Posts
    3
    Vote Rating
    0
    marcelojuventino is on a distinguished road

      0  

    Thumbs up


    Thanks Ed!

    I will try to find an workaround or the root cause of this problem.

    Best regards,

    Marcelo Juventino

  4. #4
    Sencha User
    Join Date
    Mar 2008
    Location
    São José dos Campos/SP - Brazil
    Posts
    3
    Vote Rating
    0
    marcelojuventino is on a distinguished road

      0  

    Exclamation ROOT CAUSE FOUND

    ROOT CAUSE FOUND


    The problem related to this bug is with the MARKER. If the MARKER is set for all series, the chart is plotted correctly. For example, I set CIRCLE in markerConfig property for all series. Then, the chart was plotted correctly, with ext changing the colors for all circles.

    What kind of markers are supported by Ext? There's a way of creating custom markers?


    Best regards!

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    tabro is on a distinguished road

      0  

    Default


    The basic problem comes down to 'Ext.chart.theme.Base' - the base class for the standard chart theme - only defines three markers in the markerThemes array. This gives problem when a legend is rendered with more than three series, causing the chart to break.

    My solution was to implement a theme where I override the markerThemes in the constructor call to the base theme. This fixed the bug.

    The diferent shapes that can be used in the markerThemes array are defined in 'Ext.chart.Shape'.

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    Also setting explicitly the marker type in the marker config should do the trick:

    markerConfig: {
    type: 'circle',
    radius: 5
    }

    Will add a default marker for line and scatter charts.