HIW JS API Example #4

Shows how to use the In and NotIn filter operator.

by HealthIndicators

HTML

<script src="https://rawgit.com/HealthIndicators/js-api/edge/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="operator">Operator:</label>
    <select id="operator">
        <option value="In">In</option>
        <option value="NotIn">NotIn</option>
    </select>
</div>
<div>
    <label for="years">Years:</label>
    <select id="years" multiple>
        <option value="2008" selected>2008</option>
        <option value="2009" selected>2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
    </select>
    <button id="runButton">Run Example</button>
</div>

<p><strong>Note:</strong> This example shows how to use the In and NotIn filter operators. Select an operator and one or more years to see the results.</p>

<ul id="results"></ul>

<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();
    
    $("#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);

    runExample();
}

function runExample() {
    var operator = $("#operator").val();
    var years = $("#years").val();
    var results = $("#results");
    
    results.empty();
    
    if (operator && years) {
        var yearArray = years.toString().split(",");
        var filter = new hiw.Filter()
            .add(hiw.Timeframe.Fields.name, hiw.Operator[operator], yearArray);
        
        hiw.Timeframe.filter(filter, api, function (result) {
            results.append($.map(result, function (o) {
                return $("<li>").text(o.name);
            }));
        });
    }
    
    runComplete();
}

function runComplete() {
    $("#runButton").removeAttr("disabled");
    $("#loading").hide("fast");
}

function getParameters() {
    var apiKey = null;
    var baseURL = null;
    
    if (typeof (Storage) !== "undefined") {
        apiKey = localStorage.getItem(apiKey_Key);
        baseURL = localStorage.getItem(baseURL_Key);
    }
    
    $("#apiKey").val(apiKey);
    $("#baseURL").val(baseURL || "http://services.healthindicators.gov/edge/REST.svc/");
}

function setParameter(key, value) {
    if (typeof (Storage) !== "undefined")
        localStorage.setItem(key, value);
}

$(function () {
    getParameters();
    
    $("#apiKey").change(function () { setParameter(apiKey_Key, $(this).val()); });
    $("#baseURL").change(function () { setParameter(baseURL_Key, $(this).val()); });
    
    $("#runButton").click(run);
});