JavaScript — кнопка навигации Highcharts и полноэкранная кнопка в начальной загрузке

Функциональность (печать, экспорт в Excel и т. Д.) Навигационной кнопки высоких диаграмм связана с выпадающим меню начальной загрузки в этот пример.

В этот Например, полноэкранная кнопка с функцией перерисовки старших графиков связана так, что график поддерживает правильное соотношение.

К сожалению, я не могу объединить оба графика. Увидеть этот пример

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Panel title
<ul class="list-inline panel-actions">
<li><a href="#" id="panel-fullscreen" class='fullscreen-btn' role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-th-large"></span></button>
<ul class="dropdown-menu">
<li><a href="#" id="print">Print</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" id="png">Download PNG</a></li>
<li><a href="#" id="jpeg">Download JPEG</a></li>
<li><a href="#" id="pdf">Download PDF</a></li>
<li><a href="#" id="svg">Download SVG</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" id="csv">Download CSV</a></li>
<li><a href="#" id="xls">Download XLS</a></li>
</ul>
</div>
</h3>
</div>
<div class="panel-body">
<div id="container"></div>
</div>
</div>
</div>

<div class="col-lg-6 col-md-6 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Panel title
<ul class="list-inline panel-actions">
<li><a href="#" id="panel-fullscreen2" class='fullscreen-btn' role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-th-large"></span></button>
<ul class="dropdown-menu">
<li><a href="#" id="print2">Print</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" id="png2">Download PNG</a></li>
<li><a href="#" id="jpeg2">Download JPEG</a></li>
<li><a href="#" id="pdf2">Download PDF</a></li>
<li><a href="#" id="svg2">Download SVG</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" id="csv2">Download CSV</a></li>
<li><a href="#" id="xls2">Download XLS</a></li>
</ul>
</div>
</h3>
</div>
<div class="panel-body">
<div id="container2"></div>
</div>
</div>
</div>
</div>
</div>

JS

$(document).ready(function() {
var chart1Info = {
containerId: 'container',
definition: {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
}
};
var chart2Info = {
containerId: 'container2',
definition: {
title: {
text: 'Chart2 Title'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
}
};

function drawChart(chartInfo) {
// Properties that vary by chart should be defined in chartInfo
// Any properties that are the same for all charts are added here
chartInfo.responsive = {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
};
Highcharts.chart(chartInfo.containerId, chartInfo.definition);
}
//Toggle fullscreen
$(".fullscreen-btn").click(function(e) {
e.preventDefault();

var $this = $(this);
$this.children('i')
.toggleClass('glyphicon-resize-full')
.toggleClass('glyphicon-resize-small');
$(this).closest('.panel').toggleClass('panel-fullscreen');
var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
console.log($this.id, chartInfo);
drawChart(chartInfo);
});
drawChart(chart1Info);
drawChart(chart2Info);
});





// Export buttons
$('#png').click(function() {
chart1Info.exportChart();
});

$('#jpeg').click(function() {
chart1Info.exportChart({
type: 'jpeg',
filename: 'my-pdf'
});
});

$('#pdf').click(function() {
chart.exportChart({
type: 'pdf',
filename: 'my-pdf'
});
});

$('#svg').click(function() {
chart1Info.exportChart({
type: 'SVG',
filename: 'my-svg'
});
});

document.getElementById('csv').onclick = () => {
chart1Info.downloadCSV()
};

document.getElementById('xls').onclick = () => {
chart1Info.downloadXLS()
}

$('#print').click(function() {
chart1Info.print();
});


$('#png2').click(function() {
chart2Info.exportChart();
});

$('#jpeg2').click(function() {
chart2Info.exportChart({
type: 'jpeg',
filename: 'my-pdf'
});
});

$('#pdf2').click(function() {
chart2Info.exportChart({
type: 'pdf',
filename: 'my-pdf'
});
});

$('#svg2').click(function() {
chart2Info.exportChart({
type: 'SVG',
filename: 'my-svg'
});
});

document.getElementById('csv2').onclick = () => {
chart2.downloadCSV()
};

document.getElementById('xls2').onclick = () => {
chart2Info.downloadXLS()
}

$('#print2').click(function() {
chart2Info.print();
});

CSS

.panel-actions {
margin-top: -20px;
margin-bottom: 0;
text-align: right;
}

.panel-actions a {
color: #333;
}

.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}

Надеюсь, кто-то может помочь мне решить эту проблему. Заранее спасибо!!