HIW JS API Example #1

Maps indicator data.

by HealthIndicators

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-all-territories.js"></script>
<script src="https://rawgit.com/HealthIndicators/js-api/current-release/Content/Scripts/API/Output/hiw-api.min.js"></script>
<div>
    <label for="apiKey">API Key:</label>
    <input id="apiKey" type="text" />
</div>
<div>
    <label for="baseURL">Base URL:</label>
    <input id="baseURL" type="text" />
</div>
<div>
    <label for="indicatorDescriptionID">Indicator Description ID:</label>
    <input id="indicatorDescriptionID" type="text" />
    <button id="runButton">Run Example</button>
</div>
<p><strong>Note:</strong> While you may enter any valid Indicator Description ID you wish, this example is hard-coded to only show "Total" data for the year 2012 - so please choose an Indicator Description which contains this data. For example, try "Acute hospital readmissions (percent)" (ID=279).</p>

<div id="map"></div>
<div id="loading">Loading, please wait...</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

label {
    display: inline-block;
    width: 200px;
    text-align: right;
}

#map {
    width: 100%;
    height: 500px;
}

#loading {
    display: none;
    position: absolute;
    top: 40%;
    left: 25%;
    width: 50%;
    margin: 40px;
    padding: 10px;
    border: 1px solid #666;
    background: linear-gradient(270deg, #1fbb16, #ffffff, #1fbb16);
    background-size: 600% 600%;
    text-align: center;
    animation: loading 3s ease infinite;
}

@keyframes loading { 
    0% {
        background-position: 100% 50%;
    }
    
    100% {
        background-position: 0% 50%;
    }
}

JavaScript

var apiKey_Key = "apiKey";
var baseURL_Key = "baseURL";
var indicatorDescriptionID_Key = "indicatorDescriptionID";
var api = null;
var map = null;

function run() {
    var apiKey = $("#apiKey").val();
    var baseURL = $("#baseURL").val();
    var indicatorDescriptionID = $("#indicatorDescriptionID").val();
    
    $("#runButton").attr("disabled", "disabled");
    $("#loading").show("fast");
    
    //Create an API instance against which to make your API calls, passing in your API key.
    api = new hiw.API(apiKey, baseURL);

    getData(indicatorDescriptionID);
}

function getData(indicatorDescriptionID) {
    var localeLevelFilter = new hiw.Filter()
        .addEqual(hiw.LocaleLevel.Fields.name, "State");

    hiw.LocaleLevel.filter(localeLevelFilter, api, function (localeLevels) {
        var localeFilter = new hiw.Filter()
            .addEqual(hiw.Locale.Fields.localeLevelID, localeLevels[0].id);
        
        hiw.Locale.filter(localeFilter, api, function (locales) {
            var localesByID = {};
            var indicators = null;
            var indicatorFilter = new hiw.Filter()
                .addEqual(hiw.Indicator.Fields.indicatorDescriptionID, indicatorDescriptionID)
                .addEqual(hiw.Indicator.Fields.dimensionGraphHeader, "Total")
                .addEqual(hiw.Indicator.Fields.timeframeID, 2012)
                .add(hiw.Indicator.Fields.localeID, hiw.Operator.In, $.map(locales, function (locale) {
                    return locale.id;
                }));
            var data = [];
            var indicatorDescription = null;
            
            $.each(locales, function (index, item) {
                localesByID[item.id] = item;
            });
    
            hiw.Synchronizer.sync([
                hiw.IndicatorDescription.getByID(indicatorDescriptionID, api, function (result) {
                    indicatorDescription = result;
                }),
                hiw.Indicator.filter(indicatorFilter, api, function...