1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default Unanswered: ExtJs 4.0.2a / 4.0.7 - Charting

    Unanswered: ExtJs 4.0.2a / 4.0.7 - Charting


    I have a Tabpanel with a panel (containing a chart and a grid) inside each tab. In 4.0.2a I had all charts rendered in Firefox and Chrome. In 4.0.7 chrome wouldn't render the content of the tabs(charts and grids), -> white page.
    As well, in 4.0.2a the charts do render correct on the initial load, if the store's data has changed, the hidden tabs render incorrect, I guess as the sizes of the charts are gone. Therefore only the axis labels are rendered.
    The console is showing errors like:
    "Unexpected value NaN parsing x attribute." I think for each SVG vector.

    Is there a way to prevent this? I tried specifing explicit height and width of the chart, but didn't change anything.
    Any idea's?
    Cheers,
    Pete

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Can you post the vectors with the chart data. How did you code them in the array?

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default


    Quote Originally Posted by tvanzoelen View Post
    Can you post the vectors with the chart data. How did you code them in the array?
    This is the SVG vectors:
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="738" height="414" id="ext-gen1511" style="width: 738px; height: 414px;"><defs/><rect width="100%" height="100%" fill="#000" stroke="none" opacity="0" id="ext-gen1512"/><rect id="ext-sprite-1513" zIndex="0" x="0" y="0" width="738" height="414" fill="rgb(255, 255, 255)" hidden="false" ry="0" rx="0" transform="matrix(1,0,0,1,0,0)"/><path id="ext-sprite-1682" zIndex="0" d="" stroke="#444" stroke-width="1" fill="none" transform="matrix(1,0,0,1,0,0)"/><text id="ext-sprite-1683" style="font: 12px Arial,Helvetica,sans-serif;" zIndex="0" x="-18.671875" y="414" text="0" fill="#444" font="12px Arial, Helvetica, sans-serif" text-anchor="start" transform="matrix(1,0,0,1,0,0)" hidden="true" class=" x-hide-visibility"><tspan x="-18.671875" dy="0">0</tspan></text><text id="ext-sprite-1684" style="font: 12px Arial,Helvetica,sans-serif;" zIndex="0" x="-18.671875" y="372" text="7" fill="#444" font="12px Arial, Helvetica, sans-serif" text-anchor="start" transform="matrix(1,0,0,1,0,0)" hidden="true" class=" x-hide-visibility"><tspan x="-18.671875" dy="0">7</tspan></text><rect id="ext-sprite-1850" zIndex="0" stroke-width="4px" stroke-opacity="0.1" stroke="rgb(150,150,150)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.9,0.9)"/><rect id="ext-sprite-1852" zIndex="0" stroke-width="2px" stroke-opacity="0.15" stroke="rgb(100,100,100)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.6,0.6)"/><rect id="ext-sprite-1854" zIndex="0" fill="rgb(255,255,0)" height="0" width="0" x="0" y="0" stroke-width="0px" hidden="false" ry="0" rx="0" transform="matrix(1,0,0,1,0,0)"/><rect id="ext-sprite-1856" zIndex="0" stroke-width="6px" stroke-opacity="0.05" stroke="rgb(200,200,200)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,1,1)"/><rect id="ext-sprite-1858" zIndex="0" stroke-width="4px" stroke-opacity="0.1" stroke="rgb(150,150,150)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.9,0.9)"/><rect id="ext-sprite-1860" zIndex="0" stroke-width="2px" stroke-opacity="0.15" stroke="rgb(100,100,100)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.6,0.6)"/><rect id="ext-sprite-1862" zIndex="0" fill="rgb(255,255,0)" height="0" width="0" x="0" y="0" stroke-width="0px" hidden="false" ry="0" rx="0" transform="matrix(1,0,0,1,0,0)"/><rect id="ext-sprite-1864" zIndex="0" stroke-width="6px" stroke-opacity="0.05" stroke="rgb(200,200,200)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,1,1)"/><rect id="ext-sprite-1866" zIndex="0" stroke-width="4px" stroke-opacity="0.1" stroke="rgb(150,150,150)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.9,0.9)"/><rect id="ext-sprite-1868" zIndex="0" stroke-width="2px" stroke-opacity="0.15" stroke="rgb(100,100,100)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,0.6,0.6)"/><rect id="ext-sprite-1870" zIndex="0" fill="rgb(255,255,0)" height="0" width="0" x="0" y="0" stroke-width="0px" hidden="false" ry="0" rx="0" transform="matrix(1,0,0,1,0,0)"/><rect id="ext-sprite-1872" zIndex="0" stroke-width="6px" stroke-opacity="0.05" stroke="rgb(200,200,200)" x="0" y="0" width="0" height="0" hidden="false" fill="rgb(255,255,0)" ry="0" rx="0" transform="matrix(1,0,0,1,1,1)"/>...</svg>

    And the data is coded like this to feed the store with proxy settings root:'stat'

    { "stat": [ { "attrA": 23, "attrB": 3,
    "attrC": 12 },
    { "attrA": 3, "attrB": 23,
    "attrC": 65 },...
    ]
    }

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    *bump*

    I think this

    Code:
    { "stat": [ { "attrA": 23, "attrB": 3,
    "attrC": 12 },
    { "attrA": 3, "attrB": 23,
    "attrC": 65 },...
    ]
    }
    is more interesting to know than the svg data. Is the data in the stat array correct?

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default


    Yes the data is correct as it is displayed at the first time, only when the store is reloaded I get the problem for tabs which are not displayed at the time.
    And actually I just discovered that the SVG is important, cause...

    ... as you see, the vectors are there, but I just realized that all of the classes attributes are set to:
    class=" x-hide-visibility"

    I don't know why, but if I change this classes in Firebug, this elements become visible. So the question is why Ext is setting this classes to a hide mode one.

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Mayby you can try to set deferredRender on false on the tabpanel.

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default


    Did already try defferedRender: false but without success.

  8. #8
    Sencha User
    Join Date
    Jun 2009
    Posts
    14
    Vote Rating
    1
    KartoPete is on a distinguished road

      0  

    Default Issue fixed...it seems

    Issue fixed...it seems


    I found a solution, which works for me, at least in Firefox and Chrome, so far.
    The tabpanel needs the following attributes:

    PHP Code:
       deferredRenderfalse,
       
    layoutOnTabChangetrue,
       
    flex1,
       
    defaults:{hideMode'offsets'}, 
    and the chart itself needs at least

    PHP Code:
       hideMode'offsets' 
    This thing took me 2,5 days now, with side excursions to Highcharts with ExtJS 4.
    Now I fall asleep :-)

    Cheers!
    Pete

  9. #9
    Sencha User
    Join Date
    Jan 2008
    Posts
    194
    Answers
    2
    Vote Rating
    0
    Richie1985 is on a distinguished road

      0  

    Default


    thank you so much for this fix

  10. #10
    Sencha User fischel's Avatar
    Join Date
    Sep 2007
    Location
    Berlin
    Posts
    4
    Vote Rating
    0
    fischel is on a distinguished road

      0  

    Default


    thank you very much! this save me a lot of time

    PHP Code:
       defaults:{hideMode'offsets'}, 
    I work with SVG-graphics in tabs. Only in chrome the svg were reloaded after I change a tab. With this default it works !!