PDA

View Full Version : Chart is flat lining



mjhaston
8 May 2014, 4:46 AM
Wondering where I'm going wrong? My data seems to be loading, my qtips are correct, but my chart flat lines it! I must have my axes backward or something?

48953




Ext.define('YearToDate.store', {
extend : 'Ext.data.Store',
xtype : 'ytd-store',
proxy : {
type : 'ajax',
url : '/cgi-bin/aa41ytd.pgm',
reader : {
type : 'json',
root : 'data',
idProperty : 'id',
totalProperty : 'results',
messageProperty : 'hasErrors'
}
},
autoLoad : true,
fields : ['id', 'monthname', 'yearBefore', 'lastYear', 'thisYear', 'pctChange']
});

Ext.define('YearToDate.chart', {
extend : 'Ext.chart.Chart',
xtype : 'ytd-chart',
title : '<center>Year-to-Date</center>',
layout : 'fit',
style : 'background:#fff',
waitMsgTarget : true,
frame : false,
border : true,
animate : true,
minHeight : 200,
minWidth : 200,
shadow : true,
theme : 'Category1',
legend : {
position : 'bottom'
},
initComponent : function() {
Ext.apply(this, {
axes : [{
type : 'Numeric',
minimum : 0,
position : 'left',
fields : ['yearBefore', 'lastYear', 'thisYear'],
//title: 'Number of Hits',
minorTickSteps : 1,
grid : {
odd : {
opacity : 1,
fill : '#ddd',
stroke : '#bbb',
'stroke-width' : 0.5
}
}
}, {
type : 'Category',
position : 'bottom',
fields : ['monthname'],
//title : 'New Growth',
labelTitle : {
font : 'bold 14px Arial'
}
}],
series : [{
type : 'line',
highlight : {
size : 7,
radius : 7
},
axis : 'left',
xField : 'monthname',
yField : ['yearBefore'],
markerConfig : {
type : 'cross',
size : 4,
radius : 4,
'stroke-width' : 0
},
tips : {
trackMouse : true,
width : 160,
height : 28,
renderer : function(storeItem, item) {
this.setTitle(storeItem.get('monthname') + ': ' + storeItem.get('yearBefore') + ' new in 2014');
}
}
}, {
type : 'line',
highlight : {
size : 7,
radius : 7
},
axis : 'left',
smooth : true,
xField : 'monthname',
yField : ['lastYear'],
markerConfig : {
type : 'circle',
size : 4,
radius : 4,
'stroke-width' : 0
},
tips : {
trackMouse : true,
width : 160,
height : 28,
renderer : function(storeItem, item) {
this.setTitle(storeItem.get('monthname') + ': ' + storeItem.get('lastYear') + ' new in 2013');
}
}
}, {
type : 'line',
highlight : {
size : 7,
radius : 7
},
axis : 'left',
smooth : true,
fill : true,
xField : 'monthname',
yField : ['thisYear'],
markerConfig : {
type : 'circle',
size : 4,
radius : 4,
'stroke-width' : 0
},
tips : {
trackMouse : true,
width : 160,
height : 28,
renderer : function(storeItem, item) {
this.setTitle(storeItem.get('monthname') + ': ' + storeItem.get('thisYear') + ' new in 2012');
}
}
}],
listeners : {
afterrender : {
fn : doMask
}
}
});

this.callParent(arguments);
}
});







{
xtype : 'ytd-chart',
id : 'members-ytd-chart',
itemID : 'members-ytd-chart',
store : Ext.create('YearToDate.store', {
id : 'members-ytd-store',
listeners : {
beforeload : function(store, operation, eOpts) {
//console.info('loading store', store)
var p = store.getProxy();
p.extraParams.type = 'B02';
}
}
})
}






{ "success" : true, "results" : 0, "data" : [ {"id" : "1", "monthname" : "Jan", "yearBefore" : "45","lastYear" : "64","thisYear" : "82","pctChange" : "28"},{"id" : "2", "monthname" : "Feb", "yearBefore" : "125","lastYear" : "158","thisYear" : "144","pctChange" : "-8"},{"id" : "3", "monthname" : "Mar", "yearBefore" : "196","lastYear" : "216","thisYear" : "187","pctChange" : "-13"}], "results" : 3}

evant
8 May 2014, 4:48 AM
The JSON data is returning strings. The values are supposed to be numeric.

You can add a type on your model, or correct the server code.

mjhaston
8 May 2014, 4:56 AM
Thanks for such a fast and perfect reply! I'm re-using a store that the grid didn't complain about. Thank you!

48954