[CLOSED] Chart ReRender after Panel Resize

**pinker** · Oct 13, 2011, 10:55 AM

Hi again.
I have now this code. No errors but the Chart is not displaying.

<head runat="server">
    <title></title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="js/myJS.js"></script>

    <script type="text/javascript" src="js/highcharts.js"></script>

    <script type="text/javascript" src="js/Ext.ux.HighChart.js"></script>

    <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'
                                    }
                                }
                            }
                        });
                        Chart1Panel.add(chart);
                        Chart1Panel.doLayout();
                }
    </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 Handler="panelLoaded();" />
            </Listeners>
        </ext:Panel>
        <div id="container">
        </div>
    </div>
    </form>
</body>

**pinker** · Oct 13, 2011, 11:05 AM

Hi again.

I have now the following code. I get no errors but no chart too...

<head runat="server">
    <title></title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="js/myJS.js"></script>

    <script type="text/javascript" src="js/highcharts.js"></script>

    <script type="text/javascript" src="js/Ext.ux.HighChart.js"></script>

    <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'
                                    }
                                }
                            }
                        });
                        Chart1Panel.add(chart);
                        Chart1Panel.doLayout();
                }
    </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 Handler="panelLoaded();" />
            </Listeners>
        </ext:Panel>
        <div id="container">
        </div>
    </div>
    </form>
</body>

**Daniil** · Oct 13, 2011, 11:05 AM

Yes, it requires JQuery.

Here is a working example.

I took the chart from:
http://www.i286.org/examples/

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript" src="Resources/js/jquery-1.4.4.min.js"></script>
 
    <script type="text/javascript" src="Resources/js/highcharts.src.js"></script>
 
    <script type="text/javascript" src="Resources/js/Ext.ux.HighchartPanel.js"></script>

    <script type="text/javascript">
        var onAfterRender = function () {
            var chart = new Ext.ux.HighchartPanel({
                chartConfig : {
                    chart : {
                        defaultSeriesType: 'line',
                        margin: [50, 150, 60, 80]
                    },
                    title : {
                        text : 'Monthly Average Temperature',
                        style : {
                            margin : '10px 100px 0 0' // center it
                        }
                    },
                    subtitle : {
                        text : 'Source: WorldClimate.com',
                        style : {
                            margin : '0 100px 0 0' // center it
                        }
                    },
                    xAxis : {
                        categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                        title : {
                            text : 'Month'
                        }
                    },
                    yAxis : {
                        title : {
                            text : 'Temperature (Â°C)'
                        }
                    },
                    tooltip : {
                        formatter : function () {
                            return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + 'Â°C';
                        }
                    },
                    legend : {
                        layout : 'vertical',
                        style : {
                            left : 'auto',
                            bottom : 'auto',
                            right : '10px',
                            top : '100px'
                        }
                    },
                    series : [{
                        name : 'Tokyo',
                        data : [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }, {
                        name : 'New York',
                        data : [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                    }, {
                        name : 'Berlin',
                        data : [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                    }, {
                        name : 'London',
                        data : [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }]
                }
            });
            this.add(chart);
            this.doLayout();
        }
     </script>
 
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel 
            ID="Panel1"
            runat="server" 
            Title="Personal Data & Chart Settings"
            Collapsible="true"
            Height="500"
            Width="500"
            Layout="FitLayout">
            <Listeners>
                <AfterRender Fn="onAfterRender" />
            </Listeners>
        </ext:Panel>
    </form>
</body>
</html>

**pinker** · Oct 13, 2011, 11:11 AM

Thanks!

It works on both Firefox and Chrome but not in IE9... :/
But the solution is to use highcharts.js instead of highcharts.src.js

Thanks a lot!
The framework is awesome. I am working only since last week but I am surprised!

**Daniil** · Oct 13, 2011, 11:15 AM

It works under IE9 on my side either with "highcharts.js" or "highcharts.src.js".

I think these scripts are the same ones except "highcharts.src.js" are formatted for debugging purpose.

Regarding to IE9.

What Ext.Net version do you use? 1.2?

**pinker** · Oct 13, 2011, 11:16 AM

Yes, I am using version Ext.Net 1.2.
Should I use other?

**Daniil** · Oct 13, 2011, 11:18 AM

No, it's the last one.

What exactly problem do you have with IE9?

**pinker** · Oct 13, 2011, 11:22 AM

With the highcharts.src.js I get the following error: Error: 'G_vmlCanvasManager' is undefined

daniela

**Daniil** · Oct 13, 2011, 11:24 AM

What is the version of this file?

**pinker** · Oct 13, 2011, 11:25 AM

The version is v1.2.5

Thread: [CLOSED] Chart ReRender after Panel Resize

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] Is it possible to put a tooltip on chart legend or chart axis?

[CLOSED] Problem to draw a chart into a panel

TreeGrid : Header Layout ReRender

Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

[CLOSED] Auto Resize of North Panel in ViewPort on Panel.AutoLoad

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources