Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Vote Rating
    1
    radtad is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,802
    Vote Rating
    605
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Vote Rating
    1
    radtad is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    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

  4. #4
    Touch Premium Member
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    yozik04 is on a distinguished road

      0  

    Exclamation


    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.
    Code:
    me.axis.setAttributes({
        path: path
            }, true);
    The quick fix will be to add applyData method to src/chart/axis/Time.js
    Code:
    applyData: function() {
            this.setLabels();
            var count = this.chart.substore.getCount();
             return {
                 from: 0,
                 to: count,
                 steps: count - 1,
                 step: 1
             };
         }

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    archanalal.sencha is on a distinguished road

      0  

    Default


    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

  6. #6
    Touch Premium Member
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    yozik04 is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    archanalal.sencha is on a distinguished road

      0  

    Default


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

  8. #8
    Touch Premium Member
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    yozik04 is on a distinguished road

      0  

    Default


    Buy premium

  9. #9
    Sencha User
    Join Date
    Jan 2012
    Location
    Major Vieira, SC - Brazil
    Posts
    2
    Vote Rating
    0
    vbenso is on a distinguished road

      0  

    Default Rendering Time vs Field type

    Rendering Time vs Field type


    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.
    Victor Benso, M. Eng.
    Sementes Benso
    Major Vieira - SC
    Brazil
    +55 47 AskMe

  10. #10
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Vote Rating
    1
    radtad is on a distinguished road

      0  

    Default


    Quote Originally Posted by vbenso View Post
    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi