Highcharts Demo

author(s): Torstein Hønsi

by Umair Rafiq

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/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/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-small.js"></script>
<div id="container"></div>
<div id="table-div">
    <table id="data">

<tr><td>CA</td><td>CALIFORNIA</td><td>181</td></tr>
<tr><td>NY</td><td>NEW YORK</td><td>161</td></tr>
<tr><td>FL</td><td>FLORIDA</td><td>91</td></tr>
<tr><td>NJ</td><td>NEW JERSEY</td><td>68</td></tr>
<tr><td>TX</td><td>TEXAS</td><td>61</td></tr>
<tr><td>OH</td><td>OHIO</td><td>35</td></tr>
<tr><td>MA</td><td>MASSACHUSETTS</td><td>31</td></tr>
<tr><td>IL</td><td>ILLINOIS</td><td>30</td></tr>
<tr><td>CO</td><td>COLORADO</td><td>20</td></tr>
<tr><td>CT</td><td>CONNECTICUT</td><td>20</td></tr>
<tr><td>PA</td><td>PENNSYLVANIA</td><td>19</td></tr>
<tr><td>NV</td><td>NEVADA</td><td>16</td></tr>
<tr><td>OR</td><td>OREGON</td><td>15</td></tr>
<tr><td>VA</td><td>VIRGINIA</td><td>15</td></tr>
<tr><td>DC</td><td>WASHINGTON, D.C.</td><td>14</td></tr>
<tr><td>MN</td><td>MINNESOTA</td><td>14</td></tr>
<tr><td>WA</td><td>WASHINGTON</td><td>14</td></tr>
<tr><td>HI</td><td>HAWAII</td><td>12</td></tr>
<tr><td>MI</td><td>MICHIGAN</td><td>10</td></tr>
<tr><td>GA</td><td>GEORGIA</td><td>9</td></tr>
<tr><td>MT</td><td>MONTANA</td><td>8</td></tr>
<tr><td>LA</td><td>LOUISIANA</td><td>8</td></tr>
<tr><td>TN</td><td>TENNESSEE</td><td>7</td></tr>
<tr><td>SD</td><td>SOUTH DAKOTA</td><td>6</td></tr>
<tr><td>ME</td><td>MAINE</td><td>6</td></tr>
<tr><td>IN</td><td>INDIANA</td><td>6</td></tr>
<tr><td>WI</td><td>WISCONSIN</td><td>6</td></tr>
<tr><td>RI</td><td>RHODE ISLAND</td><td>5</td></tr>
<tr><td>WV</td><td>WEST...

CSS

#container {
    max-width: 400px; 
    height: 360px; 
    margin: 0 auto;
}
#table-div {
    max-width: 400px;
    margin: 3em auto;
}

JavaScript

// Load the data from the HTML table and tag it with an upper case name used for joining
var data = [],
    // Get the map data
    mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

Highcharts.data({
    table: document.getElementById('data'),
    startColumn: 1,
    firstRowAsNames: false,
    complete: function (options) {
        $.each(options.series[0].data, function () {
            data.push({
                ucName: this[0],
                value: this[1]
            });
        });
    }
});

// Process mapdata
$.each(mapData, function () {
    var path = this.path,
        copy = {
            path: path
        };

    // This point has a square legend to the right
    if (path[1] === 9727) {

        // Identify the box
        Highcharts.seriesTypes.map.prototype.getBox.call({}, [copy]);

        // Place the center of the data label in the center of the point legend box
        this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX); // eslint-disable-line no-underscore-dangle
        this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY); // eslint-disable-line no-underscore-dangle

    }
    // Tag it for joining
    this.ucName = this.name.toUpperCase();
});

console.log(data);
// Initiate the chart
Highcharts.mapChart('container', {

    title: {
        text: 'US unemployment rate in Dec. 2017'
    },

    subtitle: {
        text: 'Small US map with data labels'
    },

    mapNavigation: {
        enabled: true,
        enableButtons: false
    },

    xAxis: {
        labels: {
            enabled: false
        }
    },

    colorAxis: {
        labels: {
            format: '{value}%'
        }
    },

    series: [{
        mapData: mapData,
        data: data,
        joinBy: 'ucName',
        name: 'Unemployment rate per 2015',
        states: {
            hover: {
                color: '#a4edba'
            }
        },
        dataLabels: {
          ...