[CLOSED] Chart ReRender after Panel Resize

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] Chart ReRender after Panel Resize

    I know this is something you don't officially support, but I was hoping you might have an idea to help me out. I have this HighChart control (extends Ext.BoxComponent) that I'm working on and I have it set in the header (North Panel) of a viewport. In the listener of the panel I have created in the North layout I have after render loading the chart control, it works correctly and renders to the size of the panel. When the panel is resized however it doesn't resize the chart. I can click on reload, and it will re render the chart to the new correct size.

    I guess my question I need to re render this panel after a viewport resize. Any ideas I'm just a little lost..

    I'll post my code, any ideas? (BTW when I place it in a window it works correctly and as expected, it will always keep resizing to the window making me think i have to call that resize command which now slips my mind)

    <script type="text/javascript">
        function panelLoaded() {
    
            var chart;
            var store2 = new Ext.data.JsonStore({
                fields: ['season', 'total'],
                data: [{
                    season: 'Summer',
                    total: 150
                }, {
                    season: 'Fall',
                    total: 245
                }, {
                    season: 'Winter',
                    total: 117
                }, {
                    season: 'Spring',
                    total: 184
                }]
            });
    
            chart = new Ext.ux.HighChart({
                store: store2,
                height: 325,
                series: [
                      {
                          type: 'pie',
                          name: 'Views',
                          categorieField: 'season',
                          dataField: 'total'
                      }
                  ],
                chartConfig: {
                    chart: {
                        margin: [50, 150, 60, 80]
                    },
                    title: {
                        text: 'Employees By Business Unit',
                        style: {
                            margin: '10px 100px 0 0' // center it
                        }
                    },
                    subtitle: {
                        text: 'Source: DeAngelo Brothers Inc',
                        style: {
                            margin: '0 100px 0 0' // center it
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        style: {
                            left: 'auto',
                            bottom: 'auto',
                            right: '10px',
                            top: '100px'
                        }
                    }
                }
            });
    
    //              var graphWin = new Ext.Window({
    //                  title: 'Resizeable Graph Window',
    //                  resizeable: true,
    //                  width: 400,
    //                  height: 400,
    //                  layout: 'fit',
    //                  items: [chart]
    //              });
    //              graphWin.show();
            
            Chart1Panel.add(chart);
            Chart1Panel.doLayout();
           
    
        }
    </script>
    // NORTH Panel in viewport/borderlayout

    <North Split="true">
        <ext:Panel runat="server" ID="Chart1Panel" Title="Test"  >
            <Listeners>
                <AfterRender Fn="panelLoaded" />
            </Listeners>
        </ext:Panel>
    </North>
  2. #2

    RE: [CLOSED] Chart ReRender after Panel Resize

    Hi,

    What about to add Layout="Fit" to the Chart1Panel?
  3. #3
    Hello.

    I am trying to use the adapter for Highcharts in Ext.net but without success because I need to include the ext-all.js and ext-base.js to work.
    so far, no problem.

    but when I add the ResourceManager to the page, I get a conflict.

    Can anyone tell me if successfuly integrated Highcharts with Ext.net in ASP.net projects?

    thanks
    daniela
  4. #4
  5. #5
    Thanks for the reply. I already read that post and in fact i am using the ExtJS adapter for HighCharts.

    I have the code below as an ASP.net but when running it I get the following error: Error: Unable to get value of the property 'ext-gen2': object is null or undefined


    test.txt

    Any hint?

    thanks
  6. #6
    Can you just post this code here wrapping in code tags?
  7. #7
    Here it is:

    <head runat="server">
        <title></title>
    
        <script type="text/javascript" src="js/ext-base.js"></script>
    
        <script type="text/javascript" src="js/ext-all.js"></script>
    
        <script type="text/javascript" src="js/adapter-extjs.js"></script>
    
        <script type="text/javascript" src="js/highcharts.src.js"></script>
    
        <script type="text/javascript" src="js/Ext.ux.HighChart.js"></script>
    
        <script type="text/javascript">
            var store2 = new Ext.data.JsonReader({
                fields: ['season', 'total'],
                data: [{
                    season: 'Summer',
                    total: 150
                }, {
                    season: 'Fall',
                    total: 245
                }, {
                    season: 'Winter',
                    total: 117
                }, {
                    season: 'Spring',
                    total: 184
    }]
                });
    
                var chart = new Ext.ux.HighChart({
                    store: store2,
                    height: 325,
                    series: [{
                        type: 'pie',
                        name: 'Views',
                        categorieField: 'season',
                        dataField: 'total'
    }],
                        chartConfig: {
                            chart: {
                                margin: [50, 150, 60, 80]
                            },
                            title: {
                                text: 'Employees By Business Unit',
                                style: {
                                    margin: '10px 100px 0 0' // center it
                                }
                            }
                        }
                    });
                    
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <div>
            <ext:Panel ID="Chart1Panel" runat="server" Title="Personal Data & Chart Settings"
                Collapsible="true" Collapsed="false">
                <Content>
                </Content>
                <Listeners>
                    <AfterRender Fn="panelLoaded" />
                </Listeners>
            </ext:Panel>
            <div id="container">
            </div>
        </div>
        </form>
    </body>
    </html>
  8. #8
    At the first of all why do you add these scripts manually?
    <script type="text/javascript" src="js/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript" src="js/adapter-extjs.js"></script>
    I guess to avoid "Ext is undefined" error?

    I should say that these scrips are loaded automatically.

    Please just use
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    before Ext using.

    So, the <head> can look this way:
    <head runat="server">
        <title>Ext.Net Example</title>
     
        <script type="text/javascript" src="js/highcharts.src.js"></script>
     
        <script type="text/javascript" src="js/Ext.ux.HighChart.js"></script>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
     
        <script type="text/javascript">
            var store2 = new Ext.data.JsonReader({
            //rest part
                     
         </script>
     
    </head>
    And where can I download "highcharts.src.js" and "Ext.ux.HighChart.js"?
  9. #9
    I have had "highcharts.js" already:
    Highcharts JS v2.1.4 (2011-03-02)
    Do you use the same one?

    Ext.ux.HighChart.js is the adapter to use with ExtJS, right?

    Can you give a link to download?
  10. #10
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  2. [CLOSED] Problem to draw a chart into a panel
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 23, 2012, 11:01 AM
  3. TreeGrid : Header Layout ReRender
    By itali in forum 1.x Help
    Replies: 0
    Last Post: Feb 08, 2011, 6:05 PM
  4. Auto Resize Panel in ViewPort on client-side Panel.AutoLoad
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Dec 03, 2008, 3:27 PM
  5. [CLOSED] Auto Resize of North Panel in ViewPort on Panel.AutoLoad
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 19, 2008, 12:13 AM

Tags for this Thread

Posting Permissions