Sunday Alcohol Sales

IDS graphic by James Benedict

by jbenedict

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

CSS

-29, -35, -32, -39, -55, -49, -39
71, 61, 65, 60, 42, 49, 58

 
return '<br>' + this.point.category + 'voters who'  + this.series.name + '</b><br/>' + Highcharts.numberFormat(Math.abs(this.point.y), 0) + 'percent';

 return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);   

'</br>'

JavaScript

$(function () {
    var categories = ['18-34', '35-44', '45-54', '55-64',
            '65+', 'Southern Indiana', 'Indiana'];
    $(document).ready(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Support for Sunday Alcohol Sales'
            },
            subtitle: {
                text: 'Source: Public Opinion Strategies'
            },
            xAxis: [{
                categories: categories,
                reversed: false,
                labels: {
                    step: 1
                }
            }, { // mirror axis on right side
                opposite: true,
                reversed: false,
                categories: categories,
                linkedTo: 0,
                labels: {
                    step: 1
                }
            }],
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    formatter: function () {
                        return (Math.abs(this.value) / 1) + '%';
                    }
                },
                min: -100,
                max: 100
            },

            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },

            tooltip: {
                formatter: function () {
                   return Highcharts.numberFormat(Math.abs(this.point.y), 0) + '   percent' + '</br>' + this.point.category +  this.series.name  ;
                }
            },

            series: [{
                name: 'Oppose',
                color: '#CD894E',
                data: [-29, -35, -32, -39, -55, -49, -39]
            }, {
                name: 'Support',
                color: '#44697D',
                data: [71, 61, 65, 60, 42, 49, 58]
            }]
        });
    });

});