Highmaps

min/max rendering test

by Geo George

HTML

<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>

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

CSS

body {
  background: #666;
}
#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}

JavaScript

// sample data
var values = [
  {
    code: "PL",
    value: 743
  },
  {
    code: "FR",
    value: 8205
  },
  {
    code: "DE",
    value: 2303
  },
  {
    code: "BR",
    value: 9404
  },
  {
    code: "ZA",
    value: 2937
  },
  {
    code: "ES",
    value: 2390
  },
  {
    code: "IE",
    value: 2604
  },
  {
    code: "UK",
    value: 5302
  },
  {
    code: "US",
    value: 5178
  }
];

// init min/max with first item
var valuesMin = values[0].value;
var valuesMax = values[0].value;

// find the real min and max
for(var i=0; i<=values.length-1; i++) {
  // save max of all interactions
  if (values[i].value > valuesMax) {
    valuesMax = values[i].value;
  }
  // save min of all interactions
  if (values[i].value < valuesMin) {
    valuesMin = values[i].value;
  }
}

// doublecheck min and max boundaries
console.log(valuesMin);
console.log(valuesMax);

// Initiate the chart
var config = {
  chart: {
    renderTo: 'container',
    type: 'map',
    spacing: [0,0,0,0],
    plotBorderWidth: 0,
    plotBackgroundColor: '#ffffff'
  },

  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  legend: {
    enabled: true
  },
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: true
  },
  mapNavigation: {
    enabled: false
  },

  colorAxis: {
    minColor: '#ffffff',
    maxColor: '#000000',
    min: valuesMin,
    max: valuesMax,
    minorTickInterval: 0.1,
    tickLength: 0,
    type: 'linear',
    startOnTick: false,
    endOnTick: false
  },

  plotOptions: {
    map: {
      states: {
        hover: {
          enabled: false
        },
        normal: {
          animation: false
        }
      }
    }
  },

  // The map series
  series : [
    {
      mapData: Highcharts.maps['custom/world'],
      data : values,
      joinBy: ['iso-a2', 'code']
    }

  ]
};

console.log(values);

var chart = new Highcharts.Map(config);