[4.0.7] Chart store data size limitation
It looks like there is a limit in size for the store being used by a chart.
I'm using 4.0.7, and the limit is about 970 data points. After this artificial limit, the graph is simply empty.
Is this a known issue?
Tested with Chrome, Safari, Firefox.
For example:
Code:
window.ratinghistoryStore = Ext.create('Ext.data.JsonStore', {
fields: [ 'rating', 'date' ],
data: [
{ rating: 83, date: new Date(2003, 11, 5, 3, 0, 24)},
{ rating: 4, date: new Date(2003, 11, 5, 3, 1, 24)},
{ rating: 19, date: new Date(2003, 11, 5, 3, 2, 24)},
{ rating: 40, date: new Date(2003, 11, 5, 3, 3, 24)},
{ rating: 69, date: new Date(2003, 11, 5, 3, 4, 24)},
{ rating: 21, date: new Date(2003, 11, 5, 3, 5, 24)},
{ rating: 1, date: new Date(2003, 11, 5, 3, 6, 24)},
{ rating: 16, date: new Date(2003, 11, 5, 3, 7, 24)},
{ rating: 18, date: new Date(2003, 11, 5, 3, 8, 24)},
{ rating: 9, date: new Date(2003, 11, 5, 3, 9, 24)},
....
{ rating: 59, date: new Date(2003, 11, 5, 3, 965, 24)},
{ rating: 50, date: new Date(2003, 11, 5, 3, 966, 24)},
{ rating: 4, date: new Date(2003, 11, 5, 3, 967, 24)},
{ rating: 31, date: new Date(2003, 11, 5, 3, 968, 24)},
{ rating: 45, date: new Date(2003, 11, 5, 3, 969, 24)},
{ rating: 21, date: new Date(2003, 11, 5, 3, 970, 24)},
]
});
Ext.require('Ext.chart.*');
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
renderTo: 'chart',
width: 1050,
height: 450,
animate: false,
store: ratinghistoryStore,
shadow: false,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['rating'],
title: 'Rating',
grid: true,
minimum: 0,
maximum: 100
}, {
type: 'Time',
position: 'bottom',
fields: ['date'],
title: 'Date',
grid: true,
dateFormat: 'M d',
step: [Ext.Date.DAY, 1],
constraing: true,
fromDate: new Date(2003, 11, 5),
toDate: new Date(2003, 11, 6),
label: {
orientation: 'horizontal',
rotate: {
degrees: -90
}
}
}],
series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'date',
yField: 'rating',
highlight: true,
smooth: false,
showMarkers: false,
tips: {
trackMouse: true,
width: 240,
height: 48,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('rating') + ' views');
}
},
}]
});
});
