[mycoding]

Подскажите пожалуйста.

Делаю статистику на chart.
Нужно выводить данные за целый месяц.
В один день надо показывать несколько параметров.
На данный момент 4 параметра показываются рядом.
Вот скриншот и текст

Ext.ns("Vreshenie.form");

Vreshenie.form.PanelStatisticOfVisit = Ext.extend(Ext.form.FormPanel, {
    constructor : function(config) {
        config = config || {};
		var panel=this;

		var store = new Ext.data.JsonStore({
			fields:['day', 'open_time', 'unique_open_time','user','user_payed'],
			data: [
				{day:'01.12.2010', open_time: 10, unique_open_time: 3,user:4,user_payed:1},
				{day:'02.12.2010', open_time: 5, unique_open_time: 1,user:4,user_payed:1},
				{day:'03.12.2010', open_time: 30, unique_open_time: 5,user:4,user_payed:1},
				{day:'04.12.2010', open_time: 5, unique_open_time: 4,user:4,user_payed:1},
				{day:'05.12.2010', open_time: 10, unique_open_time: 3,user:4,user_payed:1},
				{day:'06.12.2010', open_time: 5, unique_open_time: 1,user:4,user_payed:1},
				{day:'07.12.2010', open_time: 30, unique_open_time: 5,user:4,user_payed:1},
				{day:'08.12.2010', open_time: 5, unique_open_time: 4,user:4,user_payed:1},
				{day:'09.12.2010', open_time: 20, unique_open_time: 4,user:4,user_payed:1},
				{day:'10.12.2010', open_time: 20, unique_open_time: 2,user:4,user_payed:1}
			]
		});
		
        Ext.applyIf(config, {
			iconCls:'chart',
			title: 'Статистика посещений',			
			height:300,
			frame:true,
			//layout:'fit',
			items: [{
				xtype: 'columnchart',				  
				url:'../resources/charts.swf',
				store: store,				
				xField: 'day',
				yAxis: new Ext.chart.NumericAxis({					
					displayName: 'unique_open_time',
					labelRenderer : Ext.util.Format.numberRenderer('0,0')
				}),				
				tipRenderer : function(chart, record, index, series){					
					if(series.yField == 'open_time'){
						return Ext.util.Format.number(record.data.open_time, '0,0') + ' просмотров ' + record.data.day;
					}
					else if(series.yField == 'unique_open_time'){
						return Ext.util.Format.number(record.data.unique_open_time, '0,0') + ' уникальных просмотров ' + record.data.day;
					}
					else if(series.yField == 'user'){
						return Ext.util.Format.number(record.data.user, '0,0') + ' пользователей ' + record.data.day;
					}
					else if(series.yField == 'user_payed'){
						return Ext.util.Format.number(record.data.user_payed, '0,0') + ' пользователей заплативших за месяц ' + record.data.day;
					}
				},				
				chartStyle: {
					padding: 10,
					animationEnabled: true,
					font: {
						name: 'Tahoma',
						color: 0x444444,
						size: 11
					},
					dataTip: {
						padding: 5,
						border: {
							color: 0x99bbe8,
							size:1
						},
						background: {
							color: 0xDAE7F6,
							alpha: .9
						},
						font: {
							name: 'Tahoma',
							color: 0x15428B,
							size: 10,
							bold: true
						}
					},
					xAxis: {
						color: 0x69aBc8,
						majorTicks: {color: 0x69aBc8, length: 4},
						minorTicks: {color: 0x69aBc8, length: 2},
						majorGridLines: {size: 1, color: 0xeeeeee}
					},
					yAxis: {
						color: 0x69aBc8,
						majorTicks: {color: 0x69aBc8, length: 4},
						minorTicks: {color: 0x69aBc8, length: 2},
						majorGridLines: {size: 1, color: 0xdfe8f6}
					}
				},
				series: [{
					type: 'column',
					displayName: 'Page open_time',
					yField: 'open_time',
					style: {
						image:'images/bar.gif',
						mode: 'stretch',
						color:0x99BBE8
					}
				},{
					type: 'column',
					displayName: 'Page open_time',
					yField: 'unique_open_time',
					style: {
						//image:'images/bar.gif',
						mode: 'stretch',
						color:0xf7adc0
					}
				},{
					type: 'column',
					displayName: 'Page open_time',
					yField: 'user',
					style: {
						//image:'images/bar.gif',
						mode: 'stretch',
						color:0xaaaaa
					}
				},{
					type: 'column',
					displayName: 'Page open_time',
					yField: 'user_payed',
					style: {
						//image:'images/bar.gif',
						mode: 'stretch',
						color:0xcccccc
					}
				}]
			}]
        });
        Vreshenie.form.PanelStatisticOfVisit.superclass.constructor.call(this, config);
    }
});