Highcharts Demo

author(s): Torstein Hønsi

by jrdiaz

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div style="max-width: 600px; overflow: visible;">
    <div id="container" style="min-width: 300px; max-width: 600px; height: 300px; margin: 1em; border: 1px solid gray;overflow: visible; border: 0; position: absolute;"></div>
</div>
<button id="set-div-size" class="autocompare">Toggle container size</button>
<!--<button id="reflow-chart" class="autocompare">Reflow chart to container</button>
<button id="reflow-chart2" class="autocompare">Reflow chart to container with animation</button>-->

JavaScript

$(function () {
    $('#container').highcharts({

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    });

    var wide = false;
    $('#set-div-size').click(function () {
        //$('#container').width(wide ? 275 : 500);
        //$('#container').height(wide ? 200 : 375);
        //wide = !wide;
        
        //$('#container').animate({ left: wide ? 200 : 0, top : wide ? 200 : 0 });
        var container = $('#container');
        container.animate({
        	left: wide ? 200 : 0,
          top : wide ? 200 : 0,
          width : wide ? 275 : 500,
          height : wide ? 200 : 375
        }, {
          progress : function(anim, progress, remaining) {
          	/*
						var chart = $('#container').highcharts();
          	var w = parseFloat(container.css('width'));
            var h = parseFloat(container.css('height'));

						chart.setSize(w, h);
            chart.hasUserSize = null;
            */
            container.highcharts().reflow();
          },
          complete : function() {
    	        wide = !wide;
          },
          duration : 200
        });
        
       	/*
        var chart = $('#container').highcharts(),
            w = $('#container').width(),
            h = $('#container').height();

        chart.setSize(w, h);
        chart.hasUserSize = null;
        */
    });
    $('#reflow-chart').click(function () {
        $('#container').highcharts().reflow();
    });
    $('#reflow-chart2').click(function () {
        var chart = $('#container').highcharts(),
            w = $('#container').width(),
            h = $('#container').height();

        chart.setSize(w, h);
        chart.hasUserSize = null;
    });
});