1. #31
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    5
    Vote Rating
    0
    denise is on a distinguished road

      0  

    Default


    The following 2 fixes helped to remove my script errors:

    1) HighchartPanel, remove function
    IE does not seem to like assigning values to its DOM attributes using the "d[n]". The try-catch clause works or adding a isIE guard.

    2) Highcharts source, insertAtFront
    The before index is initialized to 0, so even if the childNodes length is 0, an attempt will be made to insert before non-existent node 0. For some reason FF always has childNodes length to at leaset 1, and in IE it's empty. I'm not sure if there is some deeper issue lurking in IE, but by adding in a check for 'childNodes.length == 0' and calling appendChild() instead of insertBefore() worked.

    Once I made these 2 fixes, I managed to get the index page (as well as my own code) to work without any script errors.

  2. #32
    Sencha User
    Join Date
    Apr 2007
    Location
    Italy/UK
    Posts
    152
    Vote Rating
    0
    sj137 is on a distinguished road

      0  

    Default


    cheers for that!

    PS the fix for the doc.getElementById prob in Layer.prototype.getCtx

    is just to check that the el returned is not null before storing it in the cvs variable

    Code:
                    var cvs_temp = doc.getElementById(cvs.id);
                    if (cvs_temp) cvs = cvs_temp;
    or simply removing that line seems to work also
    (I checked how flot does it and they don't include the extra step of getting the element from the document after its created and appended)

  3. #33
    Ext User
    Join Date
    Mar 2010
    Posts
    3
    Vote Rating
    0
    yvestan is on a distinguished road

      0  

    Default


    Hi,

    How can I directly renderring charts on item's layout ?

    I don't understand how to render if there's no div to "renderTo" in my HTML page.

    (sorry to my bad english and my newbie question )

    Code:
     Ext.reg('highchartpanel', Ext.ux.HighchartPanel);
    
        // Conteneur de démarrage
        var start = { 
            id: 'start-panel',
            title: 'Vue d\'ensemble des crédits',
            layout:'border',
            defaults: {
                collapsible: true,
                split: true
            },  
            items: [{
                title: 'Années',
                region:'east',
                margins: '5 0 0 0',
                cmargins: '5 5 0 0',
                width: 175,
                minSize: 200,
                maxSize: 200 
            },{ 
                title: 'Données',
                collapsible: false,
                height: 200,
                minSize: 200,
                maxSize: 200,
                region:'center',
                margins: '5 0 0 0',
                items: { 
                    xtype: 'highchartpanel',
                    titleCollapse: true,
                    layout:'fit',
                    border: true,
                    chartConfig: {
                        chart: { defaultSeriesType: 'column' },
                        title: { text: 'Monthly Average Rainfall' },
                        subtitle: { text: 'Source: WorldClimate.com' },
                        xAxis: { categories: ['Jan'] },
                        yAxis: { min: 0, title: { text: 'Rainfall (mm)' } },
                        legend: { layout: 'vertical' },
                        series: [{
                            name: 'Tokyo',
                            data: [49.9]
                        
                        }]  
                    }   
                }   
            }]
    thanks !

    Yves

  4. #34
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is a fundamental thing to understand about ExtJS and how to incorporate components. I'd have a look at the examples and the source and you'll start to see that at the start of rendering the "items" config object is used or if you want to add a component to an existing the add() and doLayout() combo is used.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #35
    Ext User
    Join Date
    Mar 2010
    Posts
    3
    Vote Rating
    0
    yvestan is on a distinguished road

      0  

    Default


    Thank you for your reply ! I do not understand your answer . Want to see how is made the "start" layout ? Right ?

    Code:
     // construit le layout en plein écran
        new Ext.Viewport({
            layout: 'border',
            title: 'Culture Layout',
            items: [{
                // entete de titre
                xtype: 'box',
                region: 'north',
                applyTo: 'header',
                height: 30
            },{
                // menu et bloc de détail
                layout: 'border',
                id: 'navigation',
                region:'west',
                border: false,
                split:true,
                margins: '2 0 5 5',
                width: 275,
                minSize: 100,
                maxSize: 500,
                items: [treePanel, detailsPanel]
            }, {
                id: 'content-panel',
                region: 'center', // le centre
                layout: 'card',
                margins: '2 5 5 0',
                activeItem: 0,
                border: false,
                items: [start]
            }],
            renderTo: Ext.getBody()
        });
    thank you for your help

  6. #36
    Ext User
    Join Date
    Nov 2009
    Posts
    5
    Vote Rating
    0
    robindel is on a distinguished road

      0  

    Default


    Hi Yves,
    If I understood your question correctly (even though I'm french too, I had trouble pinning down what you meant), you have trouble rendering the chart.

    The problem with highcharts is that you must have data to draw the chart. So if you fetch the data from the server, you must wait for the callback of the ajax request to render.

    Now, you mention the fact that 'there is no div to renderTo'. You see, that's the magic about extJS. Each component creates his own html container to render itself into. So internally (in our case) we have something like Ext.apply(this.chartConfig,{chart.renderTo:this.body.dom}); (ie you don't have to write html code to render your components, unless you want to, apart from the outer one (in your case rendering to document.body).

    You can PM me if you need more info.

    rob'

  7. #37
    Sencha User
    Join Date
    Jun 2008
    Posts
    43
    Vote Rating
    0
    soulgen is on a distinguished road

      0  

    Default


    How do I load data asynchronously (the best way - HighchartPanel related, especially for TabPanel)

    Ok, here is:
    I have a TabPanel component which has 3 tabs on it, say it's named: 'Tab 1', 'Tab 2', and 'Tab 3'.

    On each tab, I added a HighchartPanel, which needs data to be loaded.
    My goal is to load data ONLY when it's needed or in the 1st time the tab (child component of TabPanel) activated.

    For example: the activeTab object config of TabPanel now has a value "0" (zero), so the 'Tab 1' is displayed, and in this case I want ONLY the data for the 'Tab 1''s HighchartPanel to be loaded. This also should happen when the 'Tab 2' and/or 'Tab 3' clicked (activated), I want ONLY the appropriate data to be loaded.

    In other hand, I want to tell you that I won't all data for all tabs to be loaded in the 1st time TabPanel rendered, ONLY load the appropriate data in the right time.

    I encounter this problem when I investigate my code (showed below) in the firebug: All the data for all HighchartPaenl in each tab (child component of TabPanel) has been loaded in the 1st time the TabPanel rendered.

    Here is my code:

    Code:
    Ext.onReady(function() {
        
        var myChart1 = new Ext.ux.HighchartPanel({
            layout: 'fit'
            ,renderTo: 'container'
            ,chartConfig: {
                chart: {
                    defaultSeriesType: 'bar'
                }
                ,title: {
                    text: 'Bar Chart 1'
                }
                ,xAxis: {
                    categories: ['aaa', 'bbb', 'ccc']
                }
                ,series: [
                    {
                        name: 'Series 1'
                        ,dataURL: 'data-for-mychart1.json'
                    }
                ]
            }
        });
        
        var myChart2 = new Ext.ux.HighchartPanel({
            layout: 'fit'
            ,renderTo: 'container'
            ,chartConfig: {
                chart: {
                    defaultSeriesType: 'column'
                }
                ,title: {
                    text: 'Column Chart 1'
                }
                ,xAxis: {
                    categories: ['aaa', 'bbb', 'ccc']
                }
                ,series: [
                    {
                        name: 'Series 1'
                        ,dataURL: 'data-for-mychart2.json'
                    }
                ]
            }
        });
        
        
        var win = new Ext.Window({
            title: 'Window'
            ,width: 800
            ,height: 400
            ,items: [  
                {
                    xtype: 'tabpanel'
                    ,activeTab: 0
                    ,items: [
                        {
                            title: 'Tab 1'
                            ,items: myChart1
                        }
                        ,{
                            title: 'Tab 2'
                            ,items: myChart2
                        }
    		    ,{
                            title: 'Tab 3'
                            //,items: another HighchartPanel
                        }
                    ]
                }
            ]
        });
        
        win.show();
        
    });

    Thank you before.

    nb:
    Because of lack of my English, I hope you guys doesn't has a problem to understand my question above.

  8. #38
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    Dear Daniël and other people who gave effort for this extension,

    thank you ALL for sharing this great extension with us, it's really so graphical and useful.
    With regards,
    Talha

  9. #39
    Sencha User
    Join Date
    Jun 2008
    Posts
    43
    Vote Rating
    0
    soulgen is on a distinguished road

      0  

    Default


    Does anyone knows how to use HighchartPanelJson mixed up with PHP?

    I mean:
    I want to use HighchartPanelJson, but the Json data value does not manually assign to the data config object, but generated using json_encode function of PHP, where the values of this json data is retrieved from database using PHP+SQL.

    I want the snippet codes, please.

    Thank you before.

  10. #40
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by soulgen View Post
    I want the snippet codes, please.
    lol
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 125

  1. mystix (1 Post)
  2. medusadelft (5 Posts)
  3. marcing (2 Posts)
  4. sj137 (3 Posts)
  5. lossendae (1 Post)
  6. brookd (4 Posts)
  7. ccquiles (1 Post)
  8. jmass (1 Post)
  9. robin30 (2 Posts)
  10. Hemlock (1 Post)
  11. vahid4134 (1 Post)
  12. Sesshomurai (1 Post)
  13. pawelb1973 (1 Post)
  14. tonedeaf (2 Posts)
  15. mm_202 (1 Post)
  16. PTG (2 Posts)
  17. buergi (18 Posts)
  18. dorgan (18 Posts)
  19. mitchellsimoens (5 Posts)
  20. BlueCamel (1 Post)
  21. ganchsg (1 Post)
  22. Shaguar (5 Posts)
  23. enpasos (2 Posts)
  24. Eitschman (1 Post)
  25. Remy (1 Post)
  26. Urkman (4 Posts)
  27. bdunkin (1 Post)
  28. gthe (4 Posts)
  29. ttbgwt (1 Post)
  30. nathand (1 Post)
  31. Scorpie (1 Post)
  32. soulgen (6 Posts)
  33. leonardb (13 Posts)
  34. christophe67 (4 Posts)
  35. wki01 (1 Post)
  36. wemerson.januario (1 Post)
  37. nego2 (1 Post)
  38. tolichsvs (1 Post)
  39. xstegner (2 Posts)
  40. Alex84 (2 Posts)
  41. nxminh (1 Post)
  42. edykstra (3 Posts)
  43. neuralys (1 Post)
  44. r_honey (13 Posts)
  45. tvik (1 Post)
  46. xiongzhijian51 (1 Post)
  47. plaak (1 Post)
  48. meroy (1 Post)
  49. tryingextjs (2 Posts)
  50. talha06 (4 Posts)
  51. stephen.friedrich (1 Post)
  52. lpastor (1 Post)
  53. Manoharan (9 Posts)
  54. f.wolfsjaeger (2 Posts)
  55. shinkenno (2 Posts)
  56. asagala (2 Posts)
  57. DirkWei (1 Post)
  58. ralphmyers420 (12 Posts)
  59. ChiefDanGeorge (7 Posts)
  60. dvuja2 (1 Post)
  61. tripEXITo (1 Post)
  62. dr1811 (4 Posts)
  63. ljankowski (1 Post)
  64. robindel (1 Post)
  65. lj2008 (1 Post)
  66. ipebaikbanget (1 Post)
  67. cq.yangyu@gmail.com (1 Post)
  68. suntaek (1 Post)
  69. kurt schrauwen (1 Post)
  70. lalllall (1 Post)
  71. bdom (2 Posts)
  72. jackygurui (4 Posts)
  73. MeeMMeeM (6 Posts)
  74. denise (5 Posts)
  75. prabhu_patil (1 Post)
  76. araiczyk (1 Post)
  77. ferns (1 Post)
  78. yvestan (2 Posts)
  79. BigSeanDawg (1 Post)
  80. fabads (19 Posts)
  81. babaqga123 (1 Post)
  82. Mayus (1 Post)
  83. Christiand (3 Posts)
  84. greenst (2 Posts)
  85. SpinoWeb (4 Posts)
  86. vanessa_ng (2 Posts)
  87. toma (1 Post)
  88. 4fan (1 Post)
  89. donp (1 Post)
  90. karthik085 (7 Posts)
  91. aminaq (1 Post)
  92. fabiojpoli (8 Posts)
  93. sosy (1 Post)
  94. ericsmith66 (2 Posts)
  95. rebeccapeltz (4 Posts)
  96. kyrillos52 (2 Posts)
  97. guessit (7 Posts)
  98. israel.galan (5 Posts)
  99. Joe Kuan (12 Posts)
  100. Erci (5 Posts)
  101. liechtir (1 Post)
  102. wump (2 Posts)
  103. jprakash (1 Post)
  104. smkkiran (1 Post)
  105. framazz (4 Posts)
  106. pauldugas (1 Post)
  107. ToddJB (2 Posts)
  108. kaendsle (2 Posts)
  109. epimerde (1 Post)
  110. muralikr (1 Post)
  111. logon68 (1 Post)
  112. x0ner (1 Post)
  113. agus.delonge (1 Post)
  114. wuming444 (3 Posts)
  115. willigogs (4 Posts)
  116. Nicodemuz (1 Post)
  117. cmhampton (3 Posts)
  118. es3analytics (5 Posts)
  119. dgotty (2 Posts)
  120. spradeepv (1 Post)
  121. AshNathan (2 Posts)
  122. hassane (1 Post)
  123. Mr.Solomon (1 Post)
  124. senRsl (2 Posts)
  125. lbrutti (1 Post)