mixiのソーシャルグラフをChart APIでオープンに

function getURLVars(key) {
  var vars = [];
  var hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for(var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return key ? vars[key] : vars;
}

getURLVars('code')

$(document).ready(function() {
  $('#login').click(function() {
    location.href = createLoginURL(LOGIN_URL_BASE, CONSUMER_KEY, RESPONSE_TYPE, SCOPE, DISPLAY);
  });
  var code = getURLVars('code');
  if(code) {
    var params = {
      consumer_key: CONSUMER_KEY,
      code: code,
      redirect_url: location.protocol + '//' + location.host + location.pathname
    };
    $.getJSON('mixi.php?callback=?', params, function(json) {
      var data = analyzeData(json);
      for(var i in data) {
        $('#data').append('<span id="' + i + '"></span>');
        drawChart(data, i);
      }
    });
  }
});

function analyzeData(json) {
  var gender = {};
  var blood_type = {};
  var birth_year = {};
  var birth_month = {};
  var occupation = {};
  var interests = {};
  var addresses = {hometown: {}, location: {}};
  for(var i in json.entry) {
    var key = json.entry[i].gender || null;
    gender[key] = gender[key] + 1 || 1;
    key = json.entry[i].bloodType || null;
    blood_type[key] = blood_type[key] + 1 || 1;
    key = (json.entry[i].birthday && parseInt(json.entry[i].birthday.split(/-/)[0])) ? 
      parseInt(json.entry[i].birthday.split(/-/)[0]) : null;
    birth_year[key] = birth_year[key] + 1 || 1;
    key = (json.entry[i].birthday && parseInt(json.entry[i].birthday.split(/-/)[1])) ? 
      parseInt(json.entry[i].birthday.split(/-/)[1]) : null;
    birth_month[key] = birth_month[key] + 1 || 1;
    key = json.entry[i].occupation || null;
    occupation[key] = occupation[key] + 1 || 1;
    for(var j in json.entry[i].interests) {
      key = json.entry[i].interests[j];
      interests[key] = interests[key] + 1 || 1;
    }
    if(json.entry[i].addresses) {
      for(var j in json.entry[i].addresses) {
        key = json.entry[i].addresses[j].region || null;
        addresses[json.entry[i].addresses[j].type][key] = addresses[json.entry[i].addresses[j].type][key] + 1 || 1;
      }
      if(json.entry[i].addresses.length == 1) {
        if(json.entry[i].addresses[0].type == 'hometown') {
          addresses['location'][null] = addresses['location'][null] + 1 || 1;
        } else {
          addresses['hometown'][null] = addresses['hometown'][null] + 1 || 1;
        }
      }
    } else {
      addresses['location'][null] = addresses['location'][null] + 1 || 1;
      addresses['hometown'][null] = addresses['hometown'][null] + 1 || 1;
    }
  }
  return {
    gender: gender,
    blood_type: blood_type,
    birth_year: birth_year,
    birth_month: birth_month,
    occupation: occupation,
    interests: interests,
    hometown: addresses.hometown,
    location: addresses.location
  }
}

function drawChart(data, id) {
  var rows = [];
  for(i in data[id]) {
    if(i != 'null') {
      rows.push([i, data[id][i]]);
    }
  }
  if(id == 'birth_year' || id == 'birth_month') {
    rows.sort(function(a, b) {return parseInt(a[0]) > parseInt(b[0]) ? 1 : -1;});
  } else {
    rows.sort(function(a, b) {return a[1] < b[1] ? 1 : -1;});
  }
  $('#' + id).append('<b>' + id + '<b>');
  console.log(rows);
  for(i in rows) {
    $('#' + id).append('<br />' + rows[i][0] + '/' + rows[i][1]);
  }
  $('#' + id).append('<hr />');
}

<script type="text/javascript" charset="utf-8" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages:['corechart']});
</script>

function drawChart(data, id) {
  var table = new google.visualization.DataTable();
  table.addColumn('string', id);
  table.addColumn('number', 'count');
  var rows = [];
  for(i in data[id]) {
    if(i != 'null') {
      rows.push([i, data[id][i]]);
    }
  }
  if(id == 'birth_year' || id == 'birth_month') {
    rows.sort(function(a, b) {return parseInt(a[0]) > parseInt(b[0]) ? 1 : -1;});
  } else {
    rows.sort(function(a, b) {return a[1] < b[1] ? 1 : -1;});
  }
  table.addRows(rows);
  var chart = new google.visualization.PieChart(document.getElementById(id));
  chart.draw(table, {
    width: 300,
    height: 300,
    legend: 'none',
    pieSliceText: 'label',
    title: id,
    chartArea: {left: 0, top: 20, width: '100%', height: '100%'}
  });
}

var LABEL_MASTER = {
  gender: '性別',
  blood_type: '血液型',
  birth_year: '誕生年',
  birth_month: '誕生月',
  occupation: '職業',
  interests: '趣味',
  hometown: '出身地',
  location: '現住所'
}