[4.0.7] Line chart Time axis makes the chart unusable.

[radtad]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.0.7

Browser versions tested against:

• Firefox 4.0
• Firefox 5.0

Description:

• If I use a Time axis on a line chart, it displays really slow when using the 'step' configuration. If not used, the axis displays weird, but the line graph itself is somewhat fine.

Steps to reproduce the problem:

• Create a line chart
• Use Time axis
• Add step config

[/LIST]

The result that was expected:

• The graph should render faster or correctly

The result that occurs instead:

• The page either locks up or displays wrong

Test Case:

Ext.define('Queue.model.DayCapacity', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'time', type: 'date', dateFormat: 'U'},
            {name: 'total_secs', type: 'int'}
        ]
    });

    var graphstore = Ext.create('Ext.data.ArrayStore', {
        model: 'Queue.model.DayCapacity',
        data: [[1319407500,3176729],[1319407800,3185473],[1319408100,3178572],[1319408400,3187993],
[1319408700,3189732],[1319409000,3138761],[1319409300,3139571],[1319409600,3140006],
[1319409900,3136810],[1319410200,3122126],[1319410500,3128747],[1319410800,3162146],
[1319411100,3147561],[1319411400,3185542],[1319411700,3212078],[1319412000,3223819],
[1319412300,3203746],[1319412600,3175743],[1319412900,3074803],[1319413200,3129562],
[1319413500,3206849],[1319413800,3236350],[1319414100,3307238],[1319414400,3352313],
[1319414700,3342250],[1319415000,3334783],[1319415300,3325608],[1319415600,3370993],
[1319415900,3371612],[1319416200,3371805],[1319416500,3386782],[1319416800,3397626],
[1319417100,3373735],[1319417400,3394916],[1319417700,3398900],[1319418000,3404589],
[1319418300,3410815],[1319418600,3421611],[1319418900,3453776],[1319419200,3449844],
[1319419500,3448316],[1319419800,3460250],[1319420100,3462396],[1319420400,3463637],
[1319420700,3469321],[1319421000,3476880],[1319421300,3482296],[1319421600,3477771],
[1319421900,3456580],[1319422200,3452774],[1319422500,3447756],[1319422800,3450454],
[1319423100,3455182],[1319423400,3462605],[1319423700,3461305],[1319424000,3468801],
[1319424300,3476105],[1319424600,3471770],[1319424900,3466649],[1319425200,3461742],
[1319425500,3460513],[1319425800,3458170],[1319426100,3456910],[1319426400,3455337],
[1319426700,3455233],[1319427000,3442781],[1319427300,3447920],[1319427600,3435116],
[1319427900,3441150],[1319428200,3438616],[1319428500,3437494],[1319428800,3442083],
[1319429100,3446091],[1319429400,3452835],[1319429700,3460042],[1319430000,3467788],
[1319430300,3474975],[1319430600,3468341],[1319430900,3474574],[1319431200,3475339],
[1319431500,3477717],[1319431800,3486845],[1319432100,3492250],[1319432400,3490099],
[1319432700,3483487],[1319433000,3499408],[1319433300,3494537],[1319433600,3494253],
[1319433900,3476003],[1319434200,3437736],[1319434500,3421399],[1319434800,3439605],
[1319435100,3420215],[1319435400,3426716],[1319435700,3458617],[1319436000,3463771],
[1319436300,3475075],[1319436600,3482922],[1319436900,3498639],[1319437200,3500679],
[1319437500,3498266],[1319437800,3433061],[1319438100,3415908],[1319438400,3443408],
[1319438700,3456582],[1319439000,3487088],[1319439300,3490808],[1319439600,3516573],
[1319439900,3543497],[1319440200,3547253],[1319440500,3547541],[1319440800,3560299],
[1319441100,3562154],[1319441400,3564386],[1319441700,3555241],[1319442000,3541658],
[1319442300,3530790],[1319442600,3523964],[1319442900,3520869],[1319443200,3508484],
[1319443500,3515864],[1319443800,3524397],[1319444100,3525989],[1319444400,3526676],
[1319444700,3528540],[1319445000,3527203],[1319445300,3535997],[1319445600,3536587],
[1319445900,3532632],[1319446200,3520504],[1319446500,3526371],[1319446800,3520947],
[1319447100,3523797],[1319447400,3511757],[1319447700,3516153],[1319448000,3513552],
[1319448300,3504948],[1319448600,3513089],[1319448900,3509967],[1319449200,3510137],
[1319449500,3512617],[1319449800,3513143],[1319450100,3517417],[1319450400,3520404],
[1319450700,3523909],[1319451000,3528970],[1319451300,3529623],[1319451600,3532058],
[1319451900,3520032],[1319452200,3522463],[1319452500,3529685],[1319452800,3537006],
[1319453100,3542678],[1319453400,3539215],[1319453700,3545372],[1319454000,3543229],
[1319454300,3544969],[1319454600,3549639],[1319454900,3549930],[1319455200,3550614],
[1319455500,3553282],[1319455800,3547505],[1319456100,3545520],[1319456400,3545661],
[1319456700,3550332],[1319457000,3563964],[1319457300,3563005],[1319457600,3577575],
[1319457900,3574732],[1319458200,3571845],[1319458500,3576903],[1319458800,3588039],
[1319459100,3585349],[1319459400,3590865],[1319459700,3587267],[1319460000,3590454],
[1319460300,3594781],[1319460600,3602046],[1319460900,3603971],[1319461200,3604188],
[1319461500,3603901],[1319461800,3600129],[1319462100,3593841],[1319462400,3592865],
[1319462700,3590358],[1319463000,3595600],[1319463300,3598439],[1319463600,3601721],
[1319463900,3599649],[1319464200,3600312],[1319464500,3600099],[1319464800,3601023],
[1319465100,3602097],[1319465400,3601001],[1319465700,3603070],[1319466000,3603913],
[1319466300,3596614],[1319466600,3595356],[1319466900,3597657],[1319467200,3596336],
[1319467500,3591415],[1319467800,3590055],[1319468100,3588241],[1319468400,3587380],
[1319468700,3586624],[1319469000,3584822],[1319469300,3581450],[1319469600,3580312],
[1319469900,3569070],[1319470200,3547770],[1319470500,3524094],[1319470800,3494158],
[1319471100,3445154],[1319471400,3411231],[1319471700,3360719],[1319472000,3314944],
[1319472300,3248411],[1319472600,3156470],[1319472900,3064326],[1319473200,2976262],
[1319473500,2868920],[1319473800,2771760],[1319474100,2697854],[1319474400,2641487],
[1319474700,2649322],[1319475000,2611639],[1319475300,2592223],[1319475600,2500884],
[1319475900,2435213],[1319476200,2382789],[1319476500,2378330],[1319476800,2353190],
[1319477100,2264538],[1319477400,2222630],[1319477700,2190224],[1319478000,2164752],
[1319478300,2175898],[1319478600,2142393],[1319478900,2112962],[1319479200,2105192],
[1319479500,2106900],[1319479800,2104863],[1319480100,2150478],[1319480400,2189260],
[1319480700,2166222],[1319481000,2158513],[1319481300,2132951],[1319481600,2099750],
[1319481900,2130273],[1319482200,2156170],[1319482500,2207288],[1319482800,2241265],
[1319483100,2277512],[1319483400,2358585],[1319483700,2565277],[1319484000,2665806],
[1319484300,2724784],[1319484600,2758788],[1319484900,2787342],[1319485200,2797604],
[1319485500,2816365],[1319485800,2803679],[1319486100,2771041],[1319486400,2708712],
[1319486700,2621665],[1319487000,2547500],[1319487300,2498056],[1319487600,2375079],
[1319487900,2329115],[1319488200,2314413],[1319488500,2302767],[1319488800,2293541],
[1319489100,2348513],[1319489400,2324610],[1319489700,2323775],[1319490000,2329965],
[1319490300,2298080],[1319490600,2293666],[1319490900,2298516],[1319491200,2262587],
[1319491500,2262362],[1319491800,2247222],[1319492100,2232693],[1319492400,2242950],
[1319492700,2266589],[1319493000,2257681],[1319493300,2253132],[1319493600,2225966]]
    });


    var c = new Ext.chart.Chart({
        width: 900,
        height: 600,
        animate: false,
        renderTo: Ext.getBody(),
        store: graphstore,
        shadow: false,
        theme: 'Category1',
        legend: {
            position: 'bottom'
        },
        axes: [{
                type: 'Numeric',
                position: 'left',
                minimum: 0,
                fields: ['total_secs'],
                title: 'Processor-Hours',
                grid: {
                    odd: {
                        opacity: .2,
                        fill: '#E5E5E5',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            },{
                type: 'Time',
                position: 'bottom',
                fields: ['time'],
                dateFormat: 'D g:ia',
                groupBy: 'year,month,day,hour,minute',
                step: [Ext.Date.MINUTE, 5],
                label: {
                    rotate: {
                        degrees: 90
                    }
                }
        }],
        series: [{
                type: 'line',
                title: 'Used',
                axis: ['left', 'bottom'],
                smooth: false,
                xField: 'time',
                yField: 'total_secs',
                fill: true,
                style: {
                    stroke: '#00B5EA',
                    fill: '#00B5EA'
                },
                showMarkers: false
        }]
    });

HELPFUL INFORMATION

Additional Information

• If I remove 'step', the page renders instantly, but the Time axis labels are messed up. If I change the type to 'Numeric' it works better, but still not completely correct.

Debugging already done:

• I've only tried different configurations. Have not taken a look under the hood yet.

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css
• custom css (include details)

Operating System:

• Open Suse 11

[evant]

If I run your example it takes slightly less than 3s to render on Firefox, I wouldn't say that's "unusable".

Also keep in mind:
1) It needs to do a bunch of calculations up front to get the appropriate steps
2) Using a fill is going to slow down the drawing

[radtad]

If I run your example it takes slightly less than 3s to render on Firefox, I wouldn't say that's "unusable".

Also keep in mind:
1) It needs to do a bunch of calculations up front to get the appropriate steps
2) Using a fill is going to slow down the drawing

Sometimes I get a browser unresponsive script pop-up. That's why I'm saying it's unusable, at least in the test case with the browser I'm using.

error.jpg

Anyhow, it seems to be a lot better if I set the step to be "[Ext.Date.HOUR, 1]". However, there doesn't seem to be a way to have the graph start and stop exactly where the data starts and ends.

This is if I do a 1 hour step.

graph.jpg

[yozik04]

Bug still exists in 4.0.7. The cause is that src/chart/axis/Time.js does not have own applyData method as it had in version 4.0.6 (Everything worked perfectly with 4.0.6 version).

In new version ExtJS calculates(in my case) that it has to process 15302 steps (I have 87 rows of data). Other axis has 11 steps.

If you set breakpoint in src/chart/axis/Axis.js you will definitely see bug there during processing Time axis.

me.axis.setAttributes({
    path: path
        }, true);

The quick fix will be to add applyData method to src/chart/axis/Time.js

applyData: function() {
        this.setLabels();
        var count = this.chart.substore.getCount();
         return {
             from: 0,
             to: count,
             steps: count - 1,
             step: 1
         };
     }

[archanalal.sencha]

Hi,

Thanks for your solution. But there is bug in your solution. When I am trying to add your 'applyData' function, its was giving
this.setLabels is not a function
[IMG]chrome://firebug/content/blank.gif[/IMG] this.setLabels();

When I removed this line and changed,
var count = this.chart.substore.getCount(); to var count = this.chart.store.getCount();

I am getting following error utilDate.monthNames[month] is undefined
[IMG]chrome://firebug/content/blank.gif[/IMG] return utilDate.monthNames[month].substring(0, 3);


Any Help Appriciated.

Thanks

[yozik04]

Ext.override(Ext.chart.axis.Time, {
    applyData: function() {
        var count = this.chart.store.getCount();
        return {
            from: 0,
            to: count,
            steps: count - 1,
            step: 1
        };
    }
});

This works for area charts and it ruines line charts.

If you have access to trunk there is fixed version available. That code I sent in my previous post was copy pasted from version 4.0.6.

I do not have this error:
utilDate.monthNames[month] is undefined

[archanalal.sencha]

Thanks for your. I will try this code.
But please let me know how can I get access to the trunk???

[yozik04]

Buy premium

[vbenso]

I've noticed that if you change the data's field type from 'date' to 'time'. The chart will render way faster. Didn't debug to learn why this happens though.
If I find anything new I'll keep you all posted.

[radtad]

I've noticed that if you change the data's field type from 'date' to 'time'. The chart will render way faster. Didn't debug to learn why this happens though.
If I find anything new I'll keep you all posted.

I've noticed the same. Guess it's taking too much time calculating the dates.