CHART - Highcharts 3 TESTING - Stacked Bar Horizontal

by bizamajig

HTML

<link rel="stylesheet" type="text/css" href="http://bizamajig.com/bizamajig-ia.asp" />
<script src="http://bizamajig.com/include/bizamajig-ui-plugins-test.js"></script>
<script src="http://bizamajig.com/include/bizamajig-ui.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>




<div id="resizer" style="min-width: 350px; min-height: 200px; width: 600px">
    <div id="inner-resizer">
        <div id="container2" style="height: 400px;">
        </div>
    </div>
</div>

CSS

#resizer {
    border: 1px solid silver;    
}
#inner-resizer { /* make room for the resize handle */
    padding: 10px;
}

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            title: {
                text: 'Historic World Population by Region'
            },
            subtitle: {
                text: 'Source: Wikipedia.org'
            },
            xAxis: {
                categories: ['Maple', 'Hickory', 'Mahogany', 'Oak', '5', '6', '7', '8', '9'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y +' millions';
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -100,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                "name": "Year 1800",
                "data": [1342, 272, 196.72, 94.38, 56.8, 29.28, 21.42, 6.69, 5]
            }, {
                "name": "Year 2008",
                "data": [2074, 316.7, 309.5, 191, 125.5, 81, 49.5, 20.5, 20]
            }]
        });


        
        
        
        
        
        
      ...