I am using HighCharts. Now just by clicking on export EXCEL only one chart data is exported to excel.if i put one or more charts i want all those charts data in one EXCEL but it displaying only one chart data in EXCEL What should I do to get this? can anyone please help on this here is my Code: HTML:
<script src="/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/highcharts/highcharts.js"></script>
<script src="/bower_components/highcharts/modules/exporting.js"></script>
<script src="/bower_components/highcharts/modules/canvas-tools.js"></script>
<script src="/bower_components/export-csv/export-csv.js"></script>
<script type="application/javascript" src="/highcharts-export-clientside/bower_components/jspdf/dist/jspdf.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Export Client-Side module -->
<script src="/bower_components/highcharts-export-clientside/highcharts-export-clientside.js"></script>
<div class="highcharts-container" id="example-1"></div>
<div class="highcharts-container" id="example-2"></div>
<!-- Buttons -->
<button id="exportExcel" type="button" class="btn btn-default" data-type="application/vnd.ms-excel">XLS</button>
JavaScript:
// Defining the chart
$('#example-1').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
exporting: {
buttons: {
contextButton: {
menuItems: options
}
}
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
$('#example-2').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Sreekanth', 'Nenuuu', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
exporting: {
buttons: {
contextButton: {
menuItems: options
}
}
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
$('#exportExcel').click(function(){
var chart1 = $('#example-1').highcharts();
var chart2= $('#example-2').highcharts();
var chart=Object.assign(chart1,chart2);
chart.exportChartLocal({ type: 'application/vnd.ms-excel'});
//char2.exportChartLocal({ type: 'application/vnd.ms-excel'});
});
Highcharts export-data module adds
getDataRows
method to chart's prototype. It is responsible for collecting and returning the data that'll be used in exported file. You can modify it so that it returns the data from all charts instead of one.Live demo: http://jsfiddle.net/BlackLabel/hgq2vzb4/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts