{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 手持菜刀，她持情操 的问题《Simple Line Chart with Dates?》','https://www.manongdao.com/q-1056656.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to use ExtJS 4 to draw three points on a line chart but none of the points are displaying. I'm not getting any Javascript errors in the console. Can anyone tell me what I'm doing wrong?
var chartArray = [
{"date1":"2012-01-22", "count":1},
{"date1":"2012-01-23", "count":2},
{"date1":"2012-01-24", "count":3}
];
Ext.onReady(function() {
var store1 = new Ext.data.ArrayStore({
fields: [
{name: 'date1', type: 'date', dateFormat: 'Y-m-d'},
{name: 'count', type: 'data'}
],
data: chartArray
});
Ext.create('widget.panel', {
width: 500,
height: 400,
renderTo: 'chart1',
layout: 'fit',
items: {
xtype: 'chart',
animate: true,
store: store1,
insetPadding: 30,
legend: {
position: 'bottom'
},
axes: [
{
type: 'Numeric',
minimum: 0,
maximum: 10,
position: 'left',
fields: ['date1'],
title: false,
grid: {
stroke: '#0F0',
fill: '#0F0',
'stroke-width': 5
},
label: {
font: '10px Arial',
fill: '#80858D',
color: '#FFFFFF',
renderer: function(val) {
return val;
}
}
},
{
type: 'Category',
position: 'bottom',
color: '#FFFFFF',
grid: false,
fields: ['date1'],
fill: '#0F0',
title: 'Daily Count',
label: {
font: '11px Arial',
color: '#FFFFFF',
fill: '#80858D',
rotate: {degrees: 315},
renderer: function(date) {
console.log("Date: " + date);
return date;
}
}
}
],
series: [
{
type: 'line',
axis: 'left',
xField: 'date1',
yField: 'count',
style: {
fill: '#f47d23',
stroke: '#f47d23',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 2,
radius: 2,
'stroke-width': 0,
fill: '#38B8BF',
stroke: '#38B8BF'
}
}
]
}
});
});
Here's the html without the ExtJS includes:
<!doctype html> <html> <head> <title>Line</title> <script type="text/javascript" src="line.js"></script> </head> <body> <div id="chart1"></div> </body> </html>
First of all, change your ArrayStore to JsonStore, and your code will work.
But anyway, I don't recommend using category or time axes in ExtJs4. Shame on Sencha, they still can't get it work stable. I spend about 2 weeks trying to implement simple line charts with a time X axis with no success.
Then I found here a solution - replace time/category axis with a numeric axis and then just load dates in a form of timestamps. You can always convert a timestamp into a date string (in labels and tips). I'm happy with this approach now, and the chart renders much faster!
Ext JS 4.0.7 has a problem with time axis. That might be the problem in your case. It's reported here. Maybe you should try with v4.0.2, just to see if it works...