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

[marcelojuventino]

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));

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!

[edspencer]

Thanks, I was able to reproduce this problem and have pushed it into our bug tracker.

[marcelojuventino]

Thanks Ed!

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

Best regards,

Marcelo Juventino

[marcelojuventino]

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!

[tabro]

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'.

[philogb]

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.