Highcharts Demo

author(s): Torstein Hønsi

by sgearhart2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.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/gb/gb-all.js"></script>
<div id="container"></div>

<script>

</script>

CSS

#container {
    height: 680px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

// Initialize the chart
var chart = Highcharts.mapChart('container', {

    title: {
        text: 'New England ISO Markets'
    },

    legend: {
        align: 'left',
        layout: 'vertical',
        floating: true
    },

    mapNavigation: {
        enabled: true
    },


    series: [{
        // Use the gb-all map with no data as a basemap
        mapData: Highcharts.maps['countries/gb/gb-all'],
        name: 'Basemap',
        borderColor: '#707070',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: false
    }]
});

// Function to return an SVG path between two points, with an arc
function pointsToPath(from, to, invertArc) {
    var arcPointX = (from.x + to.x) / (invertArc ? 2.4 : 1.6),
        arcPointY = (from.y + to.y) / (invertArc ? 2.4 : 1.6);
    return 'M' + from.x + ',' + from.y + 'Q' + arcPointX + ' ' + arcPointY +
            ',' + to.x + ' ' + to.y;
}