JSFiddle - React, Tailwind, and code Playground
by Alex Azuero
HTML
<html>
<head>
<title>Visualize Indicator Data</title>
<!-- JavaScript Libraries -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
"use strict";
var gAPIDomain = "http://api.dhsprogram.com/rest/dhs/"
/*****************************************************************
function: OnDocumentReady
Desc.: JQuery function that is called once the page is loaded.
You need to add all your events in here to make sure
they are executed after the document is loaded.
*****************************************************************/
$(document).ready(function(){
//Setup the different select choices.
var listCountries = $("#lstCountry");
var listSurveyYears = $("#lstYears");
var listIndicators = $("#lstIndicators");
var listCharGroups = $("#lstCharacteristicsGroup");
var arrData = {};
var chartType = 'column';
//Load the List of Countries.
$.getJSON(gAPIDomain + "countries?surveyType=DHS", function(data) {
$.each(data.Data, function (index, value) {
listCountries.append($("<option />").val(value.DHS_CountryCode).text(value.CountryName));
});
listCountries.change(); //Force call on change for the first time to populate Survey list.
});
/*****************************************************************
function: onchange - lstCountry
Desc.: JQuery function that is called if a selection is
changed in the Countries List. The function calls the
API and obtains a list of Survey Years associated with
the country selected.
*****************************************************************/
listCountries.on('change', function() {
//Obtain the currently selected country.
var strCountry = listCountries.val();
//Create URL...