Below is my JS chart function and html code. After html page load I have two button. Click on chartone button chart load perfectly and info chart of each country also working perfectly.But when moving to chart one to chart two chart loaded successfully but info chart of each country not loaded and show error array.prototype.foreach called on null or undefined.
function chartOne() {
$.ajax({
success: function() {
var jsondata = {
"data": [{
"value": "27",
"code": "in",
"name": "india",
"last_five_month": [{
"month": "Jan",
"vcount": "30"
},
{
"month": "Feb",
"vcount": "80"
},
{
"month": "Mar",
"vcount": "50"
}
]
},
{
"value": "65778",
"code": "ca",
"name": "canada",
"last_five_month": [{
"month": "Jan",
"vcount": "20"
},
{
"month": "Feb",
"vcount": "10"
},
{
"month": "Mar",
"vcount": "60"
}
]
}
]
};
var mapChart;
var countryChart;
var graphdata = [];
var graphdataf = [];
var month;
var valuecount;
var countries = {};
$.each(jsondata.data, function(i, item) {
var graphval = [];
var value = item.value;
var code = item.code;
var name = item.name;
graphval.push(code);
graphval.push(value);
graphdata.push(graphval);
$.each(item.last_five_month, function(j, itemval) {
});
countries[item.code] = {
name: item.name,
code3: item.code,
data: item.last_five_month
};
});
var data = [];
for (var code3 in countries) {
if (countries.hasOwnProperty(code3)) {
$.each(countries[code3].data, function(j, itemval) {
//var graphvaldata = [];
var value = itemval.vcount;
var month = itemval.month;
data.push({
name: countries[code3].name,
code3: code3,
value: value,
year: month
});
});
}
}
// Wrap point.select to get to the total selected points
Highcharts.wrap(Highcharts.Point.prototype, 'select', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var points = mapChart.getSelectedPoints();
if (points.length) {
if (points.length === 1) {
$('#flag').attr('class', 'flag ' + points[0].flag);
$('h2').html(points[0].name);
} else {
$('#flag').attr('class', 'flag');
$('h2').html('Comparing countries');
}
$('.subheader').html('<h4>Historical population</h4><small><em>Shift + Click on map to compare countries</em></small>');
if (!countryChart) {
countryChart = Highcharts.chart('country-chart', {
chart: {
height: 250,
spacingLeft: 0
},
credits: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
tickPixelInterval: 50,
crosshair: true
},
yAxis: {
title: null,
opposite: true
},
tooltip: {
split: true
},
plotOptions: {
series: {
animation: {
duration: 500
},
marker: {
enabled: false
}
//threshold: 0
//pointStart: categories
}
}
});
}
$.each(points, function(i, point) {
var data,
dataRaw = countries[point['hc-key']].data;
if (dataRaw) {
data = dataRaw.map((p) => parseInt(p.vcount));
}
// Update
if (countryChart.series[i]) {
/*$.each(countries[this.code3].data, function (pointI, value) {
countryChart.series[i].points[pointI].update(value, false);
});*/
countryChart.series[i].update({
name: this.name,
data: data,
type: points.length > 1 ? 'line' : 'area'
}, false);
} else {
countryChart.addSeries({
name: this.name,
data: data,
type: points.length > 1 ? 'line' : 'area'
}, false);
}
});
while (countryChart.series.length > points.length) {
countryChart.series[countryChart.series.length - 1].remove(false);
}
countryChart.redraw();
} else {
$('#info #flag').attr('class', '');
$('#info h2').html('');
$('#info .subheader').html('');
if (countryChart) {
countryChart = countryChart.destroy();
}
}
});
// Initiate the map chart
mapChart = Highcharts.mapChart('container', {
title: {
text: 'Population history by country'
},
subtitle: {
text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>'
},
/*mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'left'
}
},*/
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bootom',
floating: true,
backgroundColor: '#FFFFFF'
},
colorAxis: {
type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
tooltip: {
footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
},
credits: {
enabled: false
},
series: [{
data: graphdata,
mapData: Highcharts.maps['custom/world'],
joinBy: 'hc-key',
name: 'Total Play',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
});
}
});
}
function chartTwo() {
$.ajax({
success: function() {
var jsondata = {
"data": [{
"value": "27",
"code": "in",
"name": "india",
"last_five_month": [{
"month": "Jan",
"vcount": "30"
},
{
"month": "Feb",
"vcount": "80"
},
{
"month": "Mar",
"vcount": "50"
}
]
},
{
"value": "1",
"code": "ie",
"name": "ireland",
"last_five_month": [{
"month": "Jan",
"vcount": "70"
},
{
"month": "Feb",
"vcount": "10"
},
{
"month": "Mar",
"vcount": "30"
}
]
},
{
"value": "2088",
"code": "us",
"name": "united states",
"last_five_month": [{
"month": "Jan",
"vcount": "90"
},
{
"month": "Feb",
"vcount": "20"
},
{
"month": "Mar",
"vcount": "40"
}
]
},
{
"value": "65778",
"code": "ca",
"name": "canada",
"last_five_month": [{
"month": "Jan",
"vcount": "20"
},
{
"month": "Feb",
"vcount": "10"
},
{
"month": "Mar",
"vcount": "60"
}
]
}
]
};
var mapChart;
var countryChart;
var graphdata = [];
var graphdataf = [];
var month;
var valuecount;
var countries = {};
$.each(jsondata.data, function(i, item) {
var graphval = [];
var value = item.value;
var code = item.code;
var name = item.name;
graphval.push(code);
graphval.push(value);
graphdata.push(graphval);
$.each(item.last_five_month, function(j, itemval) {
});
countries[item.code] = {
name: item.name,
code3: item.code,
data: item.last_five_month
};
});
var data = [];
for (var code3 in countries) {
if (countries.hasOwnProperty(code3)) {
$.each(countries[code3].data, function(j, itemval) {
//var graphvaldata = [];
var value = itemval.vcount;
var month = itemval.month;
data.push({
name: countries[code3].name,
code3: code3,
value: value,
year: month
});
});
}
}
// Wrap point.select to get to the total selected points
Highcharts.wrap(Highcharts.Point.prototype, 'select', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var points = mapChart.getSelectedPoints();
if (points.length) {
if (points.length === 1) {
$('#flag').attr('class', 'flag ' + points[0].flag);
$('h2').html(points[0].name);
} else {
$('#flag').attr('class', 'flag');
$('h2').html('Comparing countries');
}
$('.subheader').html('<h4>Historical population</h4><small><em>Shift + Click on map to compare countries</em></small>');
if (!countryChart) {
countryChart = Highcharts.chart('country-chart', {
chart: {
height: 250,
spacingLeft: 0
},
credits: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
tickPixelInterval: 50,
crosshair: true
},
yAxis: {
title: null,
opposite: true
},
tooltip: {
split: true
},
plotOptions: {
series: {
animation: {
duration: 500
},
marker: {
enabled: false
}
//threshold: 0
//pointStart: categories
}
}
});
}
$.each(points, function(i, point) {
var data,
dataRaw = countries[point['hc-key']].data;
if (dataRaw) {
data = dataRaw.map((p) => parseInt(p.vcount));
}
// Update
if (countryChart.series[i]) {
/*$.each(countries[this.code3].data, function (pointI, value) {
countryChart.series[i].points[pointI].update(value, false);
});*/
countryChart.series[i].update({
name: this.name,
data: data,
type: points.length > 1 ? 'line' : 'area'
}, false);
} else {
countryChart.addSeries({
name: this.name,
data: data,
type: points.length > 1 ? 'line' : 'area'
}, false);
}
});
while (countryChart.series.length > points.length) {
countryChart.series[countryChart.series.length - 1].remove(false);
}
countryChart.redraw();
} else {
$('#info #flag').attr('class', '');
$('#info h2').html('');
$('#info .subheader').html('');
if (countryChart) {
countryChart = countryChart.destroy();
}
}
});
// Initiate the map chart
mapChart = Highcharts.mapChart('container', {
title: {
text: 'Population history by country'
},
subtitle: {
text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bootom',
floating: true,
backgroundColor: '#FFFFFF'
},
colorAxis: {
type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
tooltip: {
footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
},
credits: {
enabled: false
},
series: [{
data: graphdata,
mapData: Highcharts.maps['custom/world'],
joinBy: 'hc-key',
name: 'Total Play',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
});
}
});
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="highmaps.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="highmaps.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#onec").click(function(){
chartOne();
});
$("#twoc").click(function(){
chartTwo();
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="container"></div>
<div id="info">
<span class="f32"><span id="flag"></span></span>
<h2></h2>
<div class="subheader">Click countries to view history</div>
<div id="country-chart"></div>
</div>
</div>
<div>
<button id="onec">chart one</button>
<button id="twoc">chart two</button>
</div>
</body>
</html>Your problem is arising because you are overriding the click function inside one another and countries is being assigned inside each of your function. You need to use the Highcharts.wrap function outside your click functions .The fixed JS code is as below.
var countries = {};
function chartOne() {
$.ajax({
success: function () {
var jsondata = {
"data": [{
"value": "27",
"code": "in",
"name": "india",
"last_five_month": [{
"month": "Jan",
"vcount": "30"
},
{
"month": "Feb",
"vcount": "80"
},
{
"month": "Mar",
"vcount": "50"
}
]
},
{
"value": "65778",
"code": "ca",
"name": "canada",
"last_five_month": [{
"month": "Jan",
"vcount": "20"
},
{
"month": "Feb",
"vcount": "10"
},
{
"month": "Mar",
"vcount": "60"
}
]
}
]
};
var mapChart;
var countryChart;
var graphdata = [];
var graphdataf = [];
var month;
var valuecount;
$.each(jsondata.data, function (i, item) {
var graphval = [];
var value = item.value;
var code = item.code;
var name = item.name;
graphval.push(code);
graphval.push(value);
graphdata.push(graphval);
$.each(item.last_five_month, function (j, itemval) {
});
countries[item.code] = {
name: item.name,
code3: item.code,
data: item.last_five_month
};
});
var data = [];
for (var code3 in countries) {
if (countries.hasOwnProperty(code3)) {
$.each(countries[code3].data, function (j, itemval) {
//var graphvaldata = [];
var value = itemval.vcount;
var month = itemval.month;
data.push({
name: countries[code3].name,
code3: code3,
value: value,
year: month
});
});
}
}
// Initiate the map chart
mapChart = Highcharts.mapChart('container', {
title: {
text: 'Population history by country'
},
subtitle: {
text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>'
},
/*mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'left'
}
},*/
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bootom',
floating: true,
backgroundColor: '#FFFFFF'
},
colorAxis: {
type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
tooltip: {
footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
},
credits: {
enabled: false
},
series: [{
data: graphdata,
mapData: Highcharts.maps['custom/world'],
joinBy: 'hc-key',
name: 'Total Play',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
});
}
});
}
function chartTwo() {
$.ajax({
success: function () {
var jsondata = {
"data": [{
"value": "27",
"code": "in",
"name": "india",
"last_five_month": [{
"month": "Jan",
"vcount": "30"
},
{
"month": "Feb",
"vcount": "80"
},
{
"month": "Mar",
"vcount": "50"
}
]
},
{
"value": "1",
"code": "ie",
"name": "ireland",
"last_five_month": [{
"month": "Jan",
"vcount": "70"
},
{
"month": "Feb",
"vcount": "10"
},
{
"month": "Mar",
"vcount": "30"
}
]
},
{
"value": "2088",
"code": "us",
"name": "united states",
"last_five_month": [{
"month": "Jan",
"vcount": "90"
},
{
"month": "Feb",
"vcount": "20"
},
{
"month": "Mar",
"vcount": "40"
}
]
},
{
"value": "65778",
"code": "ca",
"name": "canada",
"last_five_month": [{
"month": "Jan",
"vcount": "20"
},
{
"month": "Feb",
"vcount": "10"
},
{
"month": "Mar",
"vcount": "60"
}
]
}
]
};
var mapChart;
var countryChart;
var graphdata = [];
var graphdataf = [];
var month;
var valuecount;
$.each(jsondata.data, function (i, item) {
var graphval = [];
var value = item.value;
var code = item.code;
var name = item.name;
graphval.push(code);
graphval.push(value);
graphdata.push(graphval);
$.each(item.last_five_month, function (j, itemval) {
});
countries[item.code] = {
name: item.name,
code3: item.code,
data: item.last_five_month
};
});
var data = [];
for (var code3 in countries) {
if (countries.hasOwnProperty(code3)) {
$.each(countries[code3].data, function (j, itemval) {
//var graphvaldata = [];
var value = itemval.vcount;
var month = itemval.month;
data.push({
name: countries[code3].name,
code3: code3,
value: value,
year: month
});
});
}
}
// Initiate the map chart
mapChart = Highcharts.mapChart('container', {
title: {
text: 'Population history by country'
},
subtitle: {
text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bootom',
floating: true,
backgroundColor: '#FFFFFF'
},
colorAxis: {
type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
tooltip: {
footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
},
credits: {
enabled: false
},
series: [{
data: graphdata,
mapData: Highcharts.maps['custom/world'],
joinBy: 'hc-key',
name: 'Total Play',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
});
}
});
}
// Wrap point.select to get to the total selected points
Highcharts.wrap(Highcharts.Point.prototype, 'select', function (proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var mapChart = $("#container").highcharts();
var points = mapChart.getSelectedPoints();
if (points.length) {
if (points.length === 1) {
$('#flag').attr('class', 'flag ' + points[0].flag);
$('h2').html(points[0].name);
} else {
$('#flag').attr('class', 'flag');
$('h2').html('Comparing countries');
}
$('.subheader').html('<h4>Historical population</h4><small><em>Shift + Click on map to compare countries</em></small>');
var countryChart;
if (!countryChart) {
countryChart = Highcharts.chart('country-chart', {
chart: {
height: 250,
spacingLeft: 0
},
credits: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
tickPixelInterval: 50,
crosshair: true
},
yAxis: {
title: null,
opposite: true
},
tooltip: {
split: true
},
plotOptions: {
series: {
animation: {
duration: 500
},
marker: {
enabled: false
}
//threshold: 0
//pointStart: categories
}
}
});
}
$.each(points, function (i, point) {
var data,
dataRaw = countries[point['hc-key']].data;
if (dataRaw) {
data = dataRaw.map((p) => parseInt(p.vcount));
}
// Update
if (countryChart.series[i]) {
/*$.each(countries[this.code3].data, function (pointI, value) {
countryChart.series[i].points[pointI].update(value, false);
});*/
countryChart.series[i].update({
name: this.name,
data: data,
type: points.length > 1 ? 'line' : 'area'
}, false);
} else {
countryChart.addSeries({
name: this.name,
data: data,
type: points.length > 1 ? 'line' : 'area'
}, false);
}
});
while (countryChart.series.length > points.length) {
countryChart.series[countryChart.series.length - 1].remove(false);
}
countryChart.redraw();
} else {
$('#info #flag').attr('class', '');
$('#info h2').html('');
$('#info .subheader').html('');
if (countryChart) {
countryChart = countryChart.destroy();
}
}
});
$(document).ready(function () {
$("#onec").click(function () {
chartOne();
});
$("#twoc").click(function () {
chartTwo();
});
});