FusionCharts - Maps

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://csm.fusioncharts.com/projects/themes/hulk-light.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit-icons.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div id="chart-container">FusionCharts will render here</div>
<button id="redirectbtn" class="uk-button uk-button-default" onclick="mapSpecs()">View All Charts</button>
<script>
  function mapSpecs() {
    var win = window.open('https://www.fusioncharts.com/dev/maps/spec-sheets/?utm_source=jsfiddle&utm_medium=explorer', '_blank');
    win.focus();
  }

</script>

CSS

body {
  background-color: #FFFFFF;
  text-align: center;
}

#redirectbtn {
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 13px;
  line-height: 23px;
  color: #7f94a0;
}

JavaScript

FusionCharts.ready(function() {
  var salesMap = new FusionCharts({
    type: 'usa',
    renderAt: 'chart-container',
    width: '100%',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Annual Sales by State",
        "subcaption": "Last year",
        "entityFillHoverColor": "#cccccc",
        "numberPrefix": "$",
        "theme": "hulk-light",
        "nullEntityColor": "#CCCCCC"
      },
      "colorrange": {
        "minvalue": "920000",
        "startlabel": "Low",
        "endlabel": "High",
        "code": "#e44a00",
        "gradient": "1",
        "color": [{
          "maxvalue": "56580000",
          "displayvalue": "Average",
          "code": "#f8bd19"
        }, {
          "maxvalue": "97400000",
          "code": "#6baa01"
        }]
      },
      "data": [{
        "id": "HI",
        "value": "3189000"
      }, {
        "id": "DC",
        "value": "2879000"
      }, {
        "id": "MD",
        "value": "33592000"
      }, {
        "id": "DE",
        "value": "4607000"
      }, {
        "id": "RI",
        "value": "4890000"
      }, {
        "id": "WA",
        "value": "34927000"
      }, {
        "id": "OR",
        "value": "65798000"
      }, {
        "id": "CA",
        "value": "61861000"
      }, {
        "id": "AK",
        "value": "58911000"
      }, {
        "id": "ID",
        "value": "42662000"
      }, {
        "id": "NV",
        "value": "78041000"
      }, {
        "id": "AZ",
        "value": "41558000"
      }, {
        "id": "MT",
        "value": "62942000"
      }, {
        "id": "WY",
        "value": "78834000"
      }, {
        "id": "UT",
        "value": "50512000"
      }, {
        "id": "CO",
        "value": "73026000"
      }, {
        "id": "NM",
        "value": "78865000"
      }, {
        "id": "ND",
        "value": "50554000"
      }, {
        "id": "SD",
        "value": "35922000"
      }, {
        "id": "NE",
        "value":...