| mycoding | 12.12.2010 12:18 |
Chart несколько значений в одну колонку
Подскажите пожалуйста.
Делаю статистику на chart.
Нужно выводить данные за целый месяц.
В один день надо показывать несколько параметров.
На данный момент 4 параметра показываются рядом.
Вот скриншот и текст
Делаю статистику на 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);
}
});