PDA

View Full Version : ExtJS Chart Time and Category Axes



hakimio
13 Apr 2014, 7:50 AM
Recently I've encountered time axis bug because of which I get incorrect axis labels: two duplicate dates and one missing date. As far as I understand it occurs when start and end dates have different time zones (can't do anything about that, it happened because of change from DST to summer time). The bug seems to be well known and apparently it hasn't been solved yet:

http://forums.ext.net/showthread.php?29351-OPEN-454-TimeAxis-Bug
http://www.sencha.com/forum/showthread.php?267174
As a quick workaround for this bug I am using category axis which presents all the labels correctly, but it has another problem. The category axis does not appear (empty space where the actual axis supposed to be) until the store is loaded. In my case, I actually want to show the axis even when the store hasn't been loaded and there is no data to display. To get the desired behavior I tried the following:

Manually load some "place holder/filler" data into the store using add, loadData and loadRawData store methods. None of which seem to have any effect on category axis - it still doesn't appear.
Show time axis until I can get data from the server and then replace it with category axis. This time I've encountered another bug. To replace chart axis you have to use chart.axis.remove(), chart.axis.add(), chart.surface.removeAll() and then chart.redraw(). The problem is that after surface.removeAll() and redraw(), axes and grid lines are drawn on top of my series and it looks somewhat like this:http://s12.postimg.org/y3tvbrf5p/image.png
This might be a result of the following bug:

http://www.sencha.com/forum/showthread.php?188158-BUG-4.0.x-4.1rc1-Chart-line-series-zIndex-not-set-correctly
Any suggestions how to make category axis appear even when data is not loaded from the server?

scottmartin
13 Apr 2014, 4:31 PM
It would be very helpful to have a working test case with data.

You can use our fiddle, or post the code/data:
https://fiddle.sencha.com/#home

hakimio
13 Apr 2014, 11:57 PM
It would be very helpful to have a working test case with data.
Test case for which bug? Duplicate dates in time axis, category axis not showing up when data store hasn't been loaded or grid lines on top of series after using chart.surface.removeAll() and chart.redraw()?

Here is one for duplicate dates:
https://fiddle.sencha.com/#fiddle/52r
(https://fiddle.sencha.com/#fiddle/52r)Here is what I see:
48689

scottmartin
14 Apr 2014, 4:13 AM
If you rotate the label, then you can see Mar 30



title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'M d',
fromDate: Ext.Date.clearTime(new Date((new Date()).valueOf() - 864e5 * 30)),
toDate: Ext.Date.clearTime(new Date((new Date()).valueOf() - 864e5)),
label: {
rotate: {
degrees: -44
}
}

hakimio
14 Apr 2014, 5:10 AM
No, I still can't see "Mar 30" and the duplicates are still there. I don't see how rotating the labels can solve anything...
48693

scottmartin
14 Apr 2014, 5:38 AM
I updated your fiddle and here is a screen:

https://fiddle.sencha.com/#fiddle/52r

48694

hakimio
14 Apr 2014, 5:49 AM
As I have shown in my previous post, it looks different for me. The reason, as far as I understand, is that my dates in "from to" date interval have different time zones. Have you checked the thread I linked to in my first post: http://forums.ext.net/showthread.php?29351-OPEN-454-TimeAxis-Bug ? Here is one of the pictures which was submitted by the OP:
48695

Can you change your timezone to CET (central european time) and try again?

hakimio
15 Apr 2014, 1:04 PM
So nobody here knows how to make category axis appear even when data is not loaded from the server?

PS: those who live in US and want to reproduce the time axis bug should adjust start date to be before March 9th and end date after March 9th (for those who live in EU the magic date is March 30th).