Chapter 4: Sticking the Charts Together

A combination column, bar, line and scatter charts together.

HTML

<link href='http://fonts.googleapis.com/css?family=Cantata+One' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <STYLE>
         #content {
            height: 100%;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
         }
         #header {
            height: 34px;
            background: #D8D8D8 url(./bannerbg.png) repeat-x center;
            margin: 0px 0px 0px 0px;
         }
         #title {
            font-weight: bold;
            font-size: 20px;
            color: white;
            font-family: 'Cantata One', sans-serif;
            padding: 5px 0px 0px 10px;
            height: 100%;
         }
         #main_chart {
            width: 68%;
            height: 450px;
            float: left;
         }
         #borderLeft  {
         border-left: 2px solid #C8C8C8;
             height: 400px;
             top: 10px;
             position: relative;
            float: left;
         }
         #mini_chart {
            width: 30%;
            height: 450px;
            float: left;
         }
         #mini_chart1 {
            height: 150px;
         }
         #mini_chart2 {
            height: 150px;
         }
         #mini_chart3 {
            height: 150px;
         }
    </STYLE>
<body>
    <div id='header'><div id=title>Patents Granted in 2011</div></div>
    <div id='content'>
       <div id='main_chart'></div>
       <div id="borderLeft"></div>
       <div id="mini_chart">
          <div id="mini_chart1"></div>
          <div id="mini_chart2"></div>
          <div id="mini_chart3"></div>
       </div>
   </div>
</body>

JavaScript

$(document).ready(function() {

        // Main chart
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'main_chart',
                type: 'column',
                spacingTop: 30,
                spacingRight: 20,
                events: {
                    click: function(e){
                        chart2.destory();
                    }
                }
            },
            title: {
                text: null
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               href: 'http://www.uspto.gov',
               text: 'Source: U.S. Patent & Trademark Office'
            },
            xAxis: {
                categories: [ 'United States', 'Japan', 'South Korea', 'Germany', 'Taiwan', 
                              'Canada', 'France', 'United Kingdom', 'China', 'Italy' ],
                labels: {
                    rotation: -45,
                    align: 'right'
                }
            },
            yAxis: {
                title: {
                    text: 'No. of Patents'
                },
                type: 'logarithmic'
            },
            plotOptions: {
                column: {
                    colorByPoint: true,
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        y: 25,
                        color: '#F4F4F4',
                        formatter: function() {
                            return Highcharts.numberFormat(this.y, 0);
                        },
                        x: 8,
                        style: {
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            series: [{
                showInLegend: false,
                data: [ 121261, 48256, 13239, 12968, 9907, 5754, 5022, 4924, 3786, 2333 ]
           ...