Highcharts Demo

author(s): Torstein Hønsi

by sgearhart2

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>1</td>
            <td>HAWAII</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NEW HAMPSHIRE</td>
            <td>2.6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NORTH DAKOTA</td>
            <td>0.6</td>
        </tr>
        <tr>
            <td>4</td>
            <td>NEBRASKA</td>
            <td>2.7</td>
        </tr>
        <tr>
            <td>5</td>
            <td>IOWA</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>VERMONT</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>7</td>
            <td>IDAHO</td>
            <td>2.9</td>
        </tr>
        <tr>
            <td>8</td>
            <td>MAINE</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td>8</td>
            <td>WISCONSIN</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td>10</td>
            <td>COLORADO</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>10</td>
            <td>MINNESOTA</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>10</td>
            <td>UTAH</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>13</td>
            <td>TENNESSEE</td>
            <td>3.2</td>
        </tr>
        <tr>
            <td>14</td>
            <td>INDIANA</td>
            <td>3.4</td>
      ...

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();
});

// 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}%'
        },
        dataClasses : [
        	{ from : 0, to : 1, color: 'pink', name : 'sub 1'}
        ],
        min : 2,
        max : 8,
        stops : [
        	[0, '#e6ebf5'],
        	[1, '#003399']
        ]
    },

    series: [{
        mapData: mapData,
        data: data,
       ...