D3 Examples - Education Data Dive: ESD school data chart.js example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>ESD data viz sandbox</title>
    <script src="rsvp.js"></script>
    <script src="Chart.min.js"></script>
  </head>
  <body>
​
  <canvas id="faceoff" width="400" height="400"></canvas>
​
  <script>
​
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>
​
    