Highcharts Demo

author(s): Torstein Hønsi

by Darth Vader

HTML

<script src="https://rawgit.com/vinusv/examples/master/states.js"></script>
<script src="https://rawgit.com/vinusv/examples/master/us-map-shades.js"></script>
<script src="https://rawgit.com/vinusv/examples/master/data.js"></script>
<script src="https://rawgit.com/vinusv/examples/master/state-data.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>

<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(document).ready(function () {
		    var dataShapes = [];
		    var itemData = responseData;
		    for (var item in itemData) {
		        var dataItem = itemData[item];
		        dataItem.value = dataItem.key_property_value;
		        dataShapes.push(dataItem);

		    }

		    var options = {
		        chart: {
		            borderWidth: 0,
		            marginRight: 5,
		            zoomType: 'xy',
		            renderTo: 'container'
		        },
		        credits: {
		            enabled: false
		        },

		        title: {
		            text: ''
		        },

		        legend: {
		            layout: 'horizontal',
		            borderWidth: 0
		        },
		        exporting: {
		            enabled: false,
		            buttons: {
		                contextButtons: {
		                    enabled: false,
		                    menuItems: null
		                }
		            }
		        },


		        colorAxis: {
		            dataClasses: [{
		                to: 0,
		                color: "#bbbbbb",
		                name: 'No Data'
		            }, {
		                from: 0,
		                to: 49,
		                color: "#d40f0f",
		                name: '0-49% Compliant'
		            }, {
		                from: 50,
		                to: 79,
		                color: "#f3e220",
		                name: '50%-79% Compliant'
		            }, {
		                from: 80,
		                to: 99,
		                color: "#1e92af",
		                name: '80%-99% Compliant'
		            }, {
		                from: 100,
		                color: "#22b322",
		                name: '100% Compliant'
		            }]
		        },
		        tooltip: {
		            formatter: function () {
		                return ' <b>' + this.point.code + '</b><br />' + 'Value: ' + this.point.value + '<br />';
		            }
		        },

		        series: [{
		            data: dataShapes,
		            mapData: shapes,
		            joinBy: ['code', 'key'],
		   ...