Range chart with line charts retained

by Kesav Telaprolu

HTML

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

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

JavaScript

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {

         data = data.splice(0,7);           
        window.chart = new Highcharts.Chart({
        
            chart: {
                renderTo: 'container'//,
               //type: 'area'
            },
            
            title: {
                text: 'Temperature variation by day'
            },
        
            xAxis: {
                type: 'datetime'
            },
            
            yAxis: {
                title: {
                    text: null
                }
            },
        
            tooltip: {
                crosshairs: true,
                shared: false,
                valueSuffix: '°C'
            },
            
           /* plotOptions: {
                arearange: {
                    marker: {
                        enabled: true
                    }   
                },
                series: {
                    fillOpacity: 0.1
                }
            },*/
            
            legend: {
                enabled: false
            },
        
            series: [{
                type: 'arearange',
                name: 'Temperatures',
                connectNulls: true,
                data: [
[1230771600000, 2, 7],
[1230858000000, 4, 4],
[1230944400000, null, 4],
[1231030800000, 7, 10],
[1231117200000, 7, 12],
[1231203600000, 1, 5],
[1231290000000, 2, 8]
],
                //color: 'green',
                                            color: 'white',                            
                fillColor: 'rgba(28,28,28,0.5)',//'#282828',
                                           // fillOpacity: 0.5,
                marker: {enabled: true}                            
                }
                                            ,{
                type: 'line',
                name: 'linechart1',
                data: [
[1230771600000, 2],
[1230858000000,...