PDA

View Full Version : Unable to draw line in a time-axis chart (Extjs 4.0.7)



guy_davis
21 Dec 2011, 11:00 AM
I am currently evaluating ExtJS for a commercial project and have hit a roadblock where I can't get the line chart to draw the line itself. Here's the chart I get:
30217

My model.js loads the chart data:


Ext.define('ConnectionQuality', {
extend : 'Ext.data.Model',
fields : [ 'id', 'name' ],

hasMany : {
model : 'QualityIssueCount',
name : 'issueCounts',
associationKey : 'issueCounts'
},

});

Ext.define("QualityIssueCount", {
extend : 'Ext.data.Model',
fields : [ {
name : 'when',
type : 'date',
dateFormat : 'Y-m-d',
}, 'count' ],

belongsTo : 'ConnectionQuality'
});


from JSON web service call:


[{"id":"1","name":"Test","issueCounts":[{"count":10000,"when":"2011-06-05"},{"count":8000,"when":"2011-07-12"},{"count":7000,"when":"2011-08-31"},{"count":9000,"when":"2011-09-10"},{"count":9500,"when":"2011-09-25"},{"count":8600,"when":"2011-10-15"},{"count":8000,"when":"2011-11-01"},{"count":7400,"when":"2011-11-17"},{"count":6600,"when":"2011-11-30"},{"count":5500,"when":"2011-12-04"},{"count":4400,"when":"2011-12-10"},{"count":3300,"when":"2011-12-16"}]}]


Then I try to render the chart in app.js:

Ext.require('Ext.chart.*');
Ext.require([ 'Ext.container.*', 'Ext.fx.target.Sprite',
'Ext.layout.container.Fit' ]);

Ext.onReady(function() {

/** Functions */
var layoutCharts = function(store, records, options) {
for (i = 0; i < store.length; i++) {
var conn = store[i];
var chartPanel = Ext.create('Ext.Panel', {
title : conn.data.name,
closable : 'true'
});
var chart = buildChart(conn.issueCountsStore);
chartPanel.add(chart);
mainPanel.add(chartPanel);
}
}

var buildChart = function(chartData) {
var chart = Ext.create('Ext.chart.Chart', {
width : 400,
height : 200,
animate : true,
store : chartData,
axes : [ {
type : 'Numeric',
position : 'left',
fields : ['count'],
/*label : {
renderer : Ext.util.Format.numberRenderer(' ')
},*/
grid : false,
minimum : 0,
}, {
grid: false,
type : 'Time',
position : 'bottom',
fields : ['when'],
dateFormat : 'M d',
step : [ Ext.Date.MONTH, 1 ],
} ],
series : [ {
type : 'line',
highlight : {
size : 7,
radius : 7
},
axis : 'left',
fill : true,
xField : 'when',
yField : 'count',
markerConfig : {
type : 'circle',
size : 4,
radius : 4,
'stroke-width' : 0
}
} ]
});
return chart;
}

/** Layout and data loading */
var mainPanel = Ext.create('Ext.Panel', {
id : 'main-panel',
baseCls : 'x-plain',
renderTo : Ext.fly('main-content'),
layout : {
type : 'column',
},
// applied to child components
defaults : {
frame : false,
padding : 10
},
});

var store = Ext.create('Ext.data.ArrayStore', {
model : 'ConnectionQuality',

proxy : {
type : 'ajax',
url : '/dash-rpc?h=ds_trend_chart_data&m=all_summary',
reader : {
type : 'json'
},
}
});

store.load({
callback : layoutCharts
});
});

I have debugged through in Chrome and verified that the JSON data is getting loaded just fine, but I can't get the line to draw. Any help is greatly appreciated.

mitchellsimoens
21 Dec 2011, 2:12 PM
Please post in the appropriate forum. I have moved this to the Ext JS 4 Q&A forum.

drazde
8 Jan 2012, 9:12 AM
I'm very noob with extjs chart, so I try to draw a simple chart following the simplest example (described in sencha docs).
It works on ExtJS 4.0.2a but it not with ExtJS 4.0.7 or 4.1.0 beta 1

orgoz
13 Jan 2012, 6:57 AM
Hello,

I have the exact same problem. My chart is correctly displayed using Category type for X Axis but is not displayed when using Time X Axis.

Does anybody have an idea for this problem ?

Thanks

tosha.
17 Jan 2012, 7:49 AM
And I have the exact same problem... Please help...

maneljn
23 Jan 2012, 9:49 AM
same problem

SimonCVT
1 Feb 2012, 8:02 AM
Same problem, using 4.1 beta. This must be a bug, even the documented example does not render :

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.chart.Chart (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.chart.Chart)

josephkirubakaran
1 Feb 2012, 8:15 AM
You can use "Category" type also for label, have a renderer for date formatting. Checkout the similar thread http://www.sencha.com/forum/showthread.php?177919-Chart-example-in-documentation-does-not-work