CHART - Resizing

by bizamajig

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<script src="http://highcharts.com/js/testing.js"></script>
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<div class="ui-layout-north"></div>
<div class="ui-layout-west"></div>
<div class="ui-layout-south"></div>
<div class="ui-layout-center">

    <div id="top-left"></div>

    <div id="bottom-left"></div>

    <div id="top-right"></div>

    <div id="bottom-right"></div>

</div>

CSS

html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
}

#top-left {
    width: 50%;
    height: 50%;
    float: left;
    background-color: #005c83;
}

#bottom-left {
    width: 50%;
    height: 50%;
    float: left;
    background-color: #e2a552;
}

#top-right {
    width: 50%;
    height: 50%;
    float: left;
    background-color: #170e1d;
}

#bottom-right {
    width: 50%;
    height: 50%;
    float: left;
    background-color: #ba3574;
}

JavaScript

var myLayout;
var chart;

$(document).ready(function() {

    myLayout = $('body').layout({

        // north pane setting
        north__size: "auto",
        north__spacing_open: 0,
        north__closable: false,
        north__resizable: false,
        north__initClosed: false,

        // south pane setting
        south__size: "auto",
        south__initClosed: true,
        south__resizable: true,
        south__slidable: true,
        south__closable: true,

        // west pane setting
        west__size: 250,
        west__minSize: 200,
        west__initClosed: false,
        west__resizable: true,
        west__slidable: true,
        west__closable: true,
        west__animatePaneSizing: false,
        west__fxSpeed_size: "fast",
        // 'fast' animation when resizing west-pane
        west__fxSpeed_open: 1000,
        // 1-second animation when opening west-pane
        west__fxName_close: "none",
        // NO animation when closing west-pane
        west__togglerLength_closed: '100%',


        livePaneResizing: true,
        showDebugMessages: true
    });

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'top-left',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            reflow: true
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
            }
        },
        series: [
            {
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8],
            {
                name: 'Chrome',
                y: 12.8,
                sliced: true,
                selected: true},
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
      ...