Chapter 3: Extending to Multiple Series Line Charts (2)

Inverted multiple line series chart

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>

JavaScript

$(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                inverted: true,
            },
            title: {
                text: 'Population ages 65 and over (% of total) and Life Expectancy',
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               text: 'Data from The World Bank'
            },
            xAxis: {
                categories: [ '1980', '1981', '1982', '1983', '1984', '1985',
                              '1986', '1987', '1988', '1989', '1990', '1991',
                              '1992', '1993', '1994', '1995', '1996', '1997',
                              '1998', '1999', '2000', '2001', '2002', '2003',
                              '2004', '2005', '2006', '2007', '2008', '2009', '2010' ],
                labels: {
                    step: 5
                }
            },
            yAxis: [{
                title: {
                    text: 'Percentage %'
                },
                lineWidth: 2,
                lineColor: '#4572A7'
            }, {
                title: {
                    text: 'Age'
                },
                opposite: true,
                lineWidth: 2,
                lineColor: '#AA4643'
            }],
            plotOptions: {
                series: {
                    marker: {
                        enabled: false
                    }
                }
            },
            series: [{
                name: 'Japan - 65 and over',
                type: 'spline',
                data: [ 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 13, 13, 14, 14,
                        15, 15, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 22, 23 ] 
            }, {
                name: 'Japan - Life Expectancy',
                yAxis: 1,
                data: [ 76, 76, 77, 77, 77, 78, 78, 78, 78, 79, 79, 79, 79,...