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:

Code:
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