Trying to change the data on a highmap when a dropdown selection is made but cannot seem to get it to work. I think I might be calling it on the wrong thing(?) I know the change() is getting called but the data points never swap.
$(function () {
// Initiate the chart
$('#chart').highcharts('Map', {
title: {
text: 'Highmaps basic lat/lon demo'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>{point.z} Deliveries'
},
legend: {
enabled: false
},
series: [{
// Use the gb-all map with no data as a basemap
mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-all-territories'],
'mapline'),
color: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mapbubble',
name: 'Cities',
color: Highcharts.getOptions().colors[2],
data: [{
'lat': 61.154862,
'z': 1,
'lon': -149.886571,
'name': 'Anchorage'
}, {
'lat': 37.353154,
'z': 1,
'lon': -120.600837,
'name': 'Atwater'
}, {
'lat': 47.30503,
'z': 1,
'lon': -122.206741,
'name': 'Auburn'
}, {
'lat': 30.403614,
'z': 1,
'lon': -97.752602,
'name': 'Austin'
}, {
'lat': 43.602311,
'z': 1,
'lon': -116.164924,
'name': 'Boise'
}, {
'lat': 42.973088,
'z': 1,
'lon': -78.845,
'name': 'Buffalo'
}, {
'lat': 35.146685,
'z': 1,
'lon': -80.960421,
'name': 'Charlotte'
}, {
'lat': 39.778264,
'z': 1,
'lon': -104.75565,
'name': 'Denver'
}, {
'lat': 64.910879,
'z': 1,
'lon': -147.510479,
'name': 'Fairbanks'
}, {
'lat': 35.225736,
'z': 1,
'lon': -111.574109,
'name': 'Flagstaff'
}, {
'lat': 19.702522,
'z': 1,
'lon': -155.093921,
'name': 'Hilo'
}, {
'lat': 21.294139,
'z': 5,
'lon': -157.828388,
'name': 'Honolulu'
}, {
'lat': 48.416427,
'z': 1,
'lon': -122.326548,
'name': 'Mount Vernon'
}, {
'lat': 45.337718,
'z': 1,
'lon': -122.569991,
'name': 'Oregon City'
}, {
'lat': 40.179535,
'z': 1,
'lon': -122.238281,
'name': 'Red Bluff'
}, {
'lat': 34.113155,
'z': 1,
'lon': -117.377133,
'name': 'Rialto'
}, {
'lat': 37.718968,
'z': 3,
'lon': -122.409577,
'name': 'San Francisco'
}, {
'lat': 47.205395,
'z': 1,
'lon': -122.533562,
'name': 'Tacoma'
}, {
'lat': 45.712017,
'z': 2,
'lon': -122.632226,
'name': 'Vancouver'
}]
}]
});
$("#course_form").change(function (e) {
var newdata = [{
'lat': 30.40334,
'z': 1,
'lon': -88.960499,
'name': 'Biloxi'
}, {
'lat': 41.200508,
'z': 1,
'lon': -73.168771,
'name': 'Bridgeport'
}, {
'lat': 40.649748,
'z': 2,
'lon': -73.882375,
'name': 'Brooklyn'
}, {
'lat': 26.707947,
'z': 1,
'lon': -81.859447,
'name': 'Fort Myers'
}, {
'lat': 40.7445,
'z': 1,
'lon': -74.032863,
'name': 'Hoboken'
}, {
'lat': 21.294139,
'z': 6,
'lon': -157.828388,
'name': 'Honolulu'
}, {
'lat': 21.981618,
'z': 1,
'lon': -159.368258,
'name': 'Lihue'
}, {
'lat': 30.647431,
'z': 1,
'lon': -88.229245,
'name': 'Mobile'
}, {
'lat': 41.296284,
'z': 1,
'lon': -72.937307,
'name': 'New Haven'
}, {
'lat': 40.710537,
'z': 4,
'lon': -74.016323,
'name': 'New York'
}, {
'lat': 28.487102,
'z': 1,
'lon': -81.408162,
'name': 'Orlando'
}, {
'lat': 26.113639,
'z': 1,
'lon': -80.271019,
'name': 'Plantation'
}, {
'lat': 40.904341,
'z': 1,
'lon': -72.410271,
'name': 'Southampton'
}, {
'lat': 39.588149,
'z': 1,
'lon': -74.364586,
'name': 'Tuckerton'
}];
var course = $("#course_form option:selected").text();
$('#chart').highcharts().series[0].setData(data_dict[newdata]);
});
});
Your change() function is being called, but you were sending the new data to wrong series, and you didn't define your data_dict function.
If you want to swap the new mapbubble data whenever user changes the dropdown value, you need to change your code to:
$('#chart').highcharts().series[2].setData(newdata);
If you look at your highchart initialized function, you will see series is an array, and you need to use the correct index for your data which is 2.
This is the modified version of jsfiddle.
Hope this helps.