PDA

View Full Version : chart xfield



eladc
27 Jun 2012, 9:41 AM
I have a chart with two numeric axes. xField is by hours or days but it defines as numeric because of the data i get in the json. The yField is numeric as well
when i show the chart, if i have a couple of objects the chart looks ok but when i have one object i see the xField
too wide and not in the right place it should be.
The code is:

Ext.define('Insightera.view.ReactionsChart',{
extend: 'Ext.container.Container',

requires: ['Ext.chart.*'],

requires: ['Ext.chart.*','Ext.container.Container'],


height: 250,
width: 340,
style:'float:right;margin:0 0 50 0',
renderTo: document.getElementById("chart"),
initComponent: function(){
this.items = [

{
xtype: 'chart',
width: 340,
height: 250,
animate: true,
id: 'reactionChart',
store: 'ReactionsPageStore',
legend: {
position: 'bottom'
},
axes: [
{
title: 'Time',
type: 'Numeric',
position: 'bottom',
fields: 'hour',
grid: true
},
{
type: 'Numeric',
grid: true,
position: 'left',
fields:['impressionCount','conversionCount']
}
],
series: [
{
type: 'area',
id:'area',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'hour',
yField: ['impressionCount','conversionCount'],
title: ['Impression','Conversion']
}
]
}
];
this.callParent(arguments);
}
});


the store looks like:

Ext.define('Insightera.store.ReactionsPageStore',{
extend:'Ext.data.Store',

require: ['Insightera.model.ReactionPageModel'],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
storeId: 'ReactionsPageStore',
model: 'Insightera.model.ReactionPageModel',
buffered: false,
proxy: {
type: 'ajax',
url: '',
reader: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
},

listeners: {
load: function(store ,records, successful, operation){
if(successful){
var elements = document.getElementById('data').childNodes;
var selected;
var serie = Ext.getCmp('reactionChart');



for (i in elements)
{
if((" "+elements[i].className+" ").indexOf(" selectedTextItem ") > -1)
{
selected = elements[i];
break;
}
}
console.log(selected.getAttribute('name'));
switch(selected.getAttribute('name')){
case 'DAY':
serie.series.first().xField = 'hour';
serie.axes.first().fields = 'hour';
break;
case 'WEEK':
serie.series.first().xField = 'day';
serie.axes.first().fields = 'day';
break;
case 'MONTH':
serie.series.first().xField = 'day';
serie.axes.first().fields = 'day';
break;
}
console.log(serie.axes.first().fields);

}
}
}
});


and the model:


Ext.define('Insightera.model.ReactionPageModel',{
extend: 'Ext.data.Model',

fields: [
{
name: 'impressionCount'
},
{
name: 'conversionCount'
},
{
name: 'hour'
},
{
name: 'day'
}
]
});


the json looks like this:



{"succeeded":true,"errorDescription":null,"data":[{"impressionCount":2,"conversionCount":0,"hour":10,"day":0}]}


i hope you can help me

thanks

scottmartin
27 Jun 2012, 11:26 AM
Please provide a fully working example so we can proceed.

Regards,
Scott.

eladc
27 Jun 2012, 11:54 PM
All the files attached to this thread inside a zip file. This is a working example.
The chart is part of a build html page so a render the chart to a div inside this page, for the test case i put only the
div without the whole html elements.

There is another problem, when it's on dev the chart shows but when i put it in production the chart doesn't shows.

scottmartin
30 Jun 2012, 4:13 PM
What is this chart support to display? This is what I see on my end.

Only draws line of left axis on hover, else it is empty

36682

Scott.