Education Data Dive: ESD school data chart.js example

This snippet uses chart.js to draw a bar chart of high school MEAP scores using Excellent Schools Detroit's APIs and public datasets.

<!DOCTYPE html>
<html>
  <head>
    <title>ESD data viz sandbox</title>
    <script src="rsvp.js"></script>
    <script src="Chart.min.js"></script>
  </head>
  <body>

var draw_charts = function(data) {
  var ctx = document.getElementById('faceoff').getContext('2d');
  var scores = build_scores(data);
  var options = {};

var faceoff_chart = new Chart(ctx).Bar(scores, options);
};

String.prototype.toInt = function() {
  return parseInt(this.replace(',', ''));
};

var build_scores = function(data) {
  var ctx_data = {
    labels: ['2009', '2010'],
    datasets: [
      // cass tech
      {
        fillColor : "red",
        data : [
          data.meap_2009_casstech[0].meap_2009_grade_11_math_avg_ss.toInt(),
          data.meap_2010_casstech[0].meap_2010_grade_11_math_avg_ss.toInt()
        ]
      },
      // renaissance
      {
        fillColor : "blue",
        data : [
          data.meap_2009_renaissance[0].meap_2009_grade_11_math_avg_ss.toInt(),
          data.meap_2010_renaissance[0].meap_2010_grade_11_math_avg_ss.toInt()
        ]
      }
    ]
  };

return ctx_data;
};

// Get JSONP

var create_cb_promise = function(cb_name) {
  var promise = new RSVP.Promise(function(resolve, reject) {
    window[cb_name] = function(data) {
      resolve(data);
    };
  });
  return promise;
};

var promises = {
  meap_2009_casstech: create_cb_promise('meap_2009_casstech'),
  meap_2009_renaissance: create_cb_promise('meap_2009_renaissance'),
  meap_2010_casstech: create_cb_promise('meap_2010_casstech'),
  meap_2010_renaissance: create_cb_promise('meap_2010_renaissance')
};

RSVP.hash(promises).then(draw_charts);

</script>
  <script src="https://portal.excellentschoolsdetroit.org/api/1.0/views/meap_2009.jsonp?filters[bcode]=554&callback=meap_2009_casstech"></script>
  <script src="https://portal.excellentschoolsdetroit.org/api/1.0/views/meap_2009.jsonp?filters[bcode]=6971&callback=meap_2009_renaissance"></script>
  <script src="https://portal.excellentschoolsdetroit.org/api/1.0/views/meap_2010.jsonp?filters[bcode]=554&callback=meap_2010_casstech"></script>
  <script src="https://portal.excellentschoolsdetroit.org/api/1.0/views/meap_2010.jsonp?filters[bcode]=6971&callback=meap_2010_renaissance"></script>
  </body>
</html>

https://portal.excellentschoolsdetroit.org/api/1.0/views/meap_2009.jsonp?filters[bcode]=554&callback=meap_2009_casstech

https://portal.excellentschoolsdetroit.org/api/1.0/views/meap_2009.jsonp?filters[bcode]=6971&callback=meap_2009_renaissance

https://portal.excellentschoolsdetroit.org/api/1.0/views/meap_2010.jsonp?filters[bcode]=554&callback=meap_2010_casstech

https://portal.excellentschoolsdetroit.org/api/1.0/views/meap_2010.jsonp?filters[bcode]=6971&callback=meap_2010_renaissance