CODEWITHSUNDEEP
javascript
Nav Kiran
Nav Kiran

Reputation: 33

How to show custom values in highcharts world map?

i m trying make world map, on hover tooltip with custom values.

However although map looks fine, but i couldn't able to add custom values and replace the '0' showing on the tooltip upon hover.

My code so far : 

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>world map</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style id="compiled-css" type="text/css">
@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  height: 500px;
  width: 800px;
  margin: 0 auto;
}

// data labels
.highcharts-data-label-box {
  fill: #a4edba;
  stroke: gray;
  stroke-width: 1px;
}

.highcharts-data-label {
  font-weight: normal;
}

.highlight .highcharts-data-label-box {
  fill: red;
  stroke-width: 2px;
  stroke: black;
}

.highlight.highcharts-data-label text {
  font-weight: bold;
  fill: white;
}
  </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="https://code.highcharts.com/maps/js/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>

<script type="text/javascript">//<![CDATA[

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {

  var countryData = [{
    "key": "in",
    "index": 2
  }, {
    "key": "us",
    "index": 2
  }, {
    "key": "de",
    "index": 2
  }];

  var pointData = [{
    "countryCode": "in",
  }];

  // Initiate the chart
  Highcharts.mapChart('container', {
    series: [{
      mapData: Highcharts.maps["custom/world"],
      data: countryData,
      joinBy: ['hc-key', 'key'],
      name: "Country Info",
    }]
  });
});
//]]></script>

</body>
</html>

The map works fine, but i would like to replace the '0' with custom value upon hover.,

Here's a working jsfiddle JSFiddle

Any help is greatly appreciated..

Upvotes: 0

Views: 791

Answers (1)

Abdul Wahab
Abdul Wahab

Reputation: 169

In order to show custom values in map, you need to add "value" field in your countryData array. Otherwise value 0 would be returned for all the mentioned county code.

Working sample : JSFiddle

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {

  var countryData = [{
    "key": "in",
    "index": 2,
    "value": 100
  }, {
    "key": "us",
    "index": 2,
    "value": 200
  }, {
    "key": "de",
    "index": 2,
    "value": 300
  }, {
    "key": "au",
    "index": 2,
    "value": 0
  }];

  var pointData = [{
    "countryCode": "in",
  }];

  // Initiate the chart
  Highcharts.mapChart('container', {
    series: [{
      mapData: Highcharts.maps["custom/world"],
      data: countryData,
      joinBy: ['hc-key', 'key'],
      name: "Country Info",


    }]
  });
});
@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  height: 500px;
  width: 800px;
  margin: 0 auto;
}

// data labels
.highcharts-data-label-box {
  fill: #a4edba;
  stroke: gray;
  stroke-width: 1px;
}

.highcharts-data-label {
  font-weight: normal;
}

.highlight .highcharts-data-label-box {
  fill: red;
  stroke-width: 2px;
  stroke: black;
}

.highlight.highcharts-data-label text {
  font-weight: bold;
  fill: white;
}
<script src="/js/lib/dummy.js"></script>

<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="https://code.highcharts.com/maps/js/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>

Upvotes: 1

Related Questions