Socrata Performance API - JSFiddle

Example goal tile using Open Performance API: https://openperformance.docs.apiary.io

by gricha2380

HTML

<div class="banner">
<h1>Individual Open Performance Goal Tile</h1>
<span>This demo was created to show how an API end point can be parsed to show the relevant details of any public goal.</span>
<span><a href="https://openperformance.docs.apiary.io">Documentation</a>.</span>
</div>
<div class="goal">

</div>

CSS

body { background-color: #e0e0f5;}
.banner {
//  text-align: center;
  padding: 10px 0;
}
.banner h1 {font-size: 1.5rem; text-align: center;margin-bottom: .5rem;}
.banner span {text-align: left;}
.tile {
  background: white;
  padding: 20px;
  max-width: 400px;
  margin: 50px auto;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.58);
  }
  
  .top-holder{
        background: #6969ad;
        margin: -20px -20px 10px;
        padding: 20px 20px 1px;
  }
  
  .title {
    font-size: 1.5rem;
    color: black;
    font-family: sans-serif;
  }
  .progress {
    font-size: 1.1rem;
    color: black;
    font-family: sans-serif;
    margin-bottom: 1rem;
  }

.description {
  margin-top: 1rem;
}

.label,.category { 
font-size: .8rem;
color: white;
text-transform: uppercase;
}

JavaScript

function doAjax() {
    var xmlhttp = new XMLHttpRequest();
    var url = 'https://kcstat.kcmo.org/api/stat/v3/goals/ajye-df2c';

    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var data = JSON.parse(this.responseText);
        makeDiv(data);
      }
    }
    xmlhttp.open('GET', url, true);
    xmlhttp.send();
  }
  doAjax();

function makeDiv(data) {
console.log(data);
var category = data["name"];
var name = data["prevailing_measure"]["name"];
var progress = data["prevailing_measure"]["computed_values"]["metric"]["current_value"].toFixed(2);
var unit = data["prevailing_measure"]["unit"];
var startDate = data["prevailing_measure"]["start"]; //
var endDate = data["prevailing_measure"]["end"]; //
var description = data["prevailing_measure"]["summary"];
var link = "https://kcstat.kcmo.org/en/stat/goals/" +  data["base_dashboard"] + "/" + "c4qc-2yd3" + "/" + data["id"];

document.querySelector(".goal").innerHTML = 
	"<div class='tile'>" + 
    "<div class='top-holder'><div class='category'><span>Category: </span>" + category + "</div>" +
		"<div class='title'>" + name + "</div>" + 
    "<div class='progress'><div class='currentProgress'>Current Progress: </div>" + progress + unit + "</div></div>" +
    "<div class='dates'><div>Start: " + startDate + "</div>" +
    "<div>End: " + endDate + "</div></div>" +
    "<div class='description'><div class='label'>Description</div>" + description + "</div>" + "<div class='more'><a href="+link+" target='_blank'>Learn More</a>";
        
}