I am trying to create a world map using HighCharts. I have used the demo of the United States color axis map from the Highcharts website as a basis for my map.
I have created my own JSon file that contains various fields.
All areas in my map are appearing the same color even though the range's are different. The legend has color coding and the values are showing up in the tooltip.
I have googled this issue with no luck. I came across one question here with a similar issue, however when I try implement the solution, it still will not work for me. The answer I came across is below: It says the value property in the JSON file is not set. However I am not too sure how to set this, as the tutorial I am following has very similar code to my own.
Highcharts: Highmaps - Choropleth maps - All states are the same color
I am relatively new to java-script and Highcharts so any help would be very much appreciated.
Below is a sample of my jSon file. At the moment I am only using the CountryName,CountryCode and the Value fields.
[
{
"CountryName": "Afghanistan",
"CountryCode": "AFG",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "No Data",
"Value": 0.01,
"BeerPer": 0,
"BeerLitres": 0.01,
"WinePer": 0,
"WineLitres": 0,
"SpiritsPer": 0,
"SpirtsLitres": 0,
"OtherPer": 0,
"OtherLitres": 0
},
{
"CountryName": "Albania",
"CountryCode": "ALB",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "3 - Medium Risky",
"Value": 5.28,
"BeerPer": 31.8,
"BeerLitres": 1.61,
"WinePer": 19.8,
"WineLitres": 1.32,
"SpiritsPer": 48.4,
"SpirtsLitres": 2.23,
"OtherPer": 0,
"OtherLitres": 0.11
},
{
"CountryName": "Algeria",
"CountryCode": "DZA",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "2 - Somewhat Risky",
"Value": 0.45,
"BeerPer": 62.6,
"BeerLitres": 0.17,
"WinePer": 35.5,
"WineLitres": 0.23,
"SpiritsPer": 0,
"SpirtsLitres": 0.04,
"OtherPer": 2,
"OtherLitres": 0
},
{
"CountryName": "Andorra",
"CountryCode": "AND",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "1 - Least Risky",
"Value": 10.6,
"BeerPer": 34.6,
"BeerLitres": 3.54,
"WinePer": 45.3,
"WineLitres": 4.39,
"SpiritsPer": 20.1,
"SpirtsLitres": 2.68,
"OtherPer": 0,
"OtherLitres": 0
},
{
"CountryName": "Angola",
"CountryCode": "AGO",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "3 - Medium Risky",
"Value": 7.8,
"BeerPer": 64.3,
"BeerLitres": 5.12,
"WinePer": 13.7,
"WineLitres": 1.95,
"SpiritsPer": 17.4,
"SpirtsLitres": 0.64,
"OtherPer": 4.7,
"OtherLitres": 0.08
},
{
"CountryName": "Antigua and Barbuda",
"CountryCode": "ATG",
"IndicatorName": "Litres Consumed, total",
"IndicatorCode": "SP.CON.TOTL",
"AlcoholDrinkScore": "3 - Medium Risky",
"Value": 7.84,
"BeerPer": 36.4,
"BeerLitres": 2.89,
"WinePer": 16.4,
"WineLitres": 1.43,
"SpiritsPer": 47,
"SpirtsLitres": 3.25,
"OtherPer": 0.3,
"OtherLitres": 0.27
},
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Visualisation Project</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/highmaps.js"></script>
<script src="js/data.js"></script>
<script src="js/world-palestine-highres.js"></script>
<script src="js/main.js"></script>
<!--<script src="js/map.js"></script>-->
<!-- Flags -->
<!--<link rel="stylesheet" type="text/css" href="https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />-->
<!-- add styles -->
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"></div>
</body>
</html>
Main.js File
$(function () {
$.getJSON('countrydata.json', function (data) {
// Make codes uppercase to match the map data.
$.each(data, function () {
this.CountryCode = this.CountryCode.toUpperCase();
});
// Initiate the map
Highcharts.mapChart('container', {
chart: {
borderWidth: 1,
spacingBottom: 10
},
title: {
text: 'Alcohol Consumption'
},
subtitle: {
text: 'Source: <a href="http://apps.who.int/gho/data/node.main.A1022?lang=en" target="_blank">The World Health Organization</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
legend: {
title: {
text: 'Litres per Person',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 10
},
colorAxis: {
dataClasses: [{
from: .0001,
to: 1,
name: '<1'
}, {
from: 1.001,
to: 3,
name: '1-3'
}, {
from: 3.001,
to: 5,
name: '3-5'
}, {
from: 5.001,
to: 7,
name: '5-7'
}, {
from: 7.001,
to: 9,
name: '7-9'
}, {
from: 9.001,
to: 12,
name: '9-12'
}, {
from: 12.001,
to: 18,
borderWidth: 1,
borderColor: '#ffffff',
name: '>12'
}]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['custom/world-palestine-highres'],
joinBy: ['iso-a3', 'CountryCode'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.CountryName}'
},
name: 'Alcohol Consumption per person per year',
allowPointSelect: true,
cursor: 'pointer',
states: {
hover: {
borderWidth: 1
//color: '#000000'
}
},
tooltip: {
pointFormat: '<b>{point.CountryName}:</b> {point.Value} litres per person',
valueSuffix: ' litres',
shared: true
}
}]
});
});
});
I managed to get it working, I added in a new field to my json file with the two digit iso code I then used this as the join instead and it somehow managed to work. Thank you for your help.