I have a working website using the standard Visual Studio 2017. It is composed of a C# backend with a single API used to request data to be displayed in HighMaps based on the settings the user chooses from the jQuery UI. Since I don't love my Windows machine nearly as much as my Mac, I thought I would try using .Net Core 2.0 - and thus eliminate the need for my Windows laptop. Everything went extremely well (Kudos to Microsoft), but for some reason the jQuery code that calls the API, the data returned is not being pushed into the map like it should.
Here is the jQuery code that runs - the alert() does display the JSON data, but it never is reflected in the map. I can post HTML or CSS if needed, but for now I have included the head and script sections.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Great Locations</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/maps/highmaps.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/maps/modules/data.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/mapdata/countries/us/us-all-all.js"></script>
</head>
And here is the jQuery Code:
<script type="text/javascript">
var climateSteps = [
"Tropical",
"Semi-Arid",
"Desert",
"Humid",
"Mediterranean",
"Wet All Seasons",
"Wet Summer",
"Winter Snow",
"Polar"];
var climateRange = "C08";
$(function () {
$("#climate-slider .slider").slider({
range: true,
min: 0,
max: 8,
values: [0, 8],
slide: function (event, ui) {
climateRange = "C" + ui.values[0].toString() + ui.values[1].toString();
if (ui.values[0] == ui.values[1]) {
/* if user selected a single value (not a range), adjust text to fit */
$(this).parent().children(".slider-range").text(climateSteps[ui.values[0]]);
}
else {
$(this).parent().children(".slider-range").text(climateSteps[ui.values[0]] + " to " + climateSteps[ui.values[1]]);
}
}
})
});
$.noConflict();
tableResult = '[{"code":"us-al-001","name":"Autauga County, AL","value":1}, {"code":"us-il-019","name":"Champaign County, IL","value":3}]';
(function ($) {
function GetCounties(userSelections) {
jQuery.support.cors = true;
$.ajax({
url: "http://localhost:5000/api/products/" + userSelections,
type: "GET",
dataType: "json",
success: function (d) {
data = JSON.stringify(d);
alert("API data received: " + data)
tableResult = data;
$("#map-container").highcharts().series[0].update({
data: JSON.parse(d)
});
},
error: function (d) {
alert("API found error: " + JSON.stringify(d));
}
});
}
jQuery(".button-submit").bind("click", {
}, function (e) {
GetCounties(climateRange);
});
data = JSON.parse(tableResult);
var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"]);
var lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"], "mapline");
// add state acronym for tooltip
Highcharts.each(countiesMap, function (mapPoint) {
var state = mapPoint.properties["hc-key"].substring(3, 5);
mapPoint.name = mapPoint.name + ", " + state.toUpperCase();
});
var options = {
chart: {
borderWidth: 1,
marginRight: 50 // for the legend
},
exporting: {
enabled: false
},
title: {
text: "My Great Locations"
},
legend: {
layout: "vertical",
align: "right",
floating: true,
valueDecimals: 0,
valueSuffix: "",
backgroundColor: "white",
symbolRadius: 0,
symbolHeight: 0
},
mapNavigation: {
enabled: false
},
colorAxis: {
dataClasses: [{
from: 1,
to: 1,
color: "#000099",
name: "Perfect!"
}, {
from: 2,
to: 2,
color: "#009999",
name: "Very Nice!"
}, {
from: 3,
to: 3,
color: "#00994c",
name: "Good Fit"
}]
},
tooltip: {
headerFormat: "",
formatter: function () {
str = "Error";
if (this.point.value == 1) {
str = "Perfect!";
}
if (this.point.value == 2) {
str = "Very Nice!";
}
if (this.point.value == 3) {
str = "Good Fit";
}
return this.point.name + ": <b>" + str + "</b>";
}
},
plotOptions: {
mapline: {
showInLegend: false,
enableMouseTracking: false
}
},
series: [{
mapData: countiesMap,
data: data,
joinBy: ["hc-key", "code"],
borderWidth: 1,
states: {
hover: {
color: "#331900"
}
}
}, {
type: "mapline",
name: "State borders",
data: [lines[0]],
color: "black"
}]
};
// Instanciate the map
$("#map-container").highcharts("Map", options);
All that appears in the map are the two counties that I hardcoded (to show that the map is working fine). I'm wondering if there is some package I need to add into NuGet or SDK Dependencies, but so much is working that I don't know what is missing. And I've not figured out how to show the console in Mac Visual Studio, so if any clues are going there, I haven't seen them.
Great thanks to the Highcharts support team - the ultimate answer to this problem is that the Mac Visual Studio .Net Core framework for some reason acts different than the Windows platform running the classic Visual Studio. Here is the answer that worked for me:
I needed to use this with Mac Visual Studio with .Net Core - no JSON.parse(d) required:
$("#map-container").highcharts().series[0].update({
data: d
});
Instead of this, which works for Windows full-blown Visual Studio (community edition):
$("#map-container").highcharts().series[0].update({
data: JSON.parse(d)
});