Create Statitistic from JSON Model

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<!--Div that will hold the pie chart (normally generated by twig)-->
    <div class="row-fluid">    
        <div class="span4" id="evaluationExercise_chartStats_2">
        </div>
    
        <div class="span4" id="evaluationExercise_chartResults_2"> 
        </div>
        
        <div class="span4" id="evaluationExercise_table_2">    
        </div>
  </div>  
<br />
<div class="row-fluid"> 
        <div class="span4" id="evaluationExercise_chartStats_3">
        </div>
    
        <div class="span4" id="evaluationExercise_chartResults_3"> 
        </div>
        
        <div class="span4" id="evaluationExercise_table_3">    
        </div>
    </div>
<input type="hidden" id="resultsJSON" value='{"exercises":[{"id":2,"title":"testt","statistics":[{"type":"mean","value":34.24875},{"type":"median","value":56.75},{"type":"min","value":11.7475},{"type":"max","value":56.75}],"players":[{"name":"Etienne Noel","result":56.75,"link":"\/app_dev.php\/OSC\/dashboard\/playerEvaluation\/evaluationSession\/playerReport\/1\/1"},{"name":"c c","result":11.7475,"link":"\/app_dev.php\/OSC\/dashboard\/playerEvaluation\/evaluationSession\/playerReport\/1\/3"}]},{"id":3,"title":"a","statistics":[{"type":"mean","value":499.5},{"type":"median","value":999},{"type":"min","value":0},{"type":"max","value":999}],"players":[{"name":"Etienne Noel","result":999,"link":"\/app_dev.php\/OSC\/dashboard\/playerEvaluation\/evaluationSession\/playerReport\/1\/1"},{"name":"c c","result":0,"link":"\/app_dev.php\/OSC\/dashboard\/playerEvaluation\/evaluationSession\/playerReport\/1\/3"}]}]}' />

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

function drawChart(results) {

    // Create the data table.
    var dataStats = new google.visualization.DataTable();

    dataStats.addColumn('string', 'Statistic Type');
    dataStats.addColumn('number', 'Value');

    for(i = 0; i < results.statistics.length; i++) {
        dataStats.addRow([results.statistics[i].type, results.statistics[i].value])
    }

    var options = {
        'title' : results.title,
        'width' : 400,
        'height' : 300,
        'is3D' : true,
        'colors' : ["#f00","#f00", "#f00"],
        'allowHtml' : true
    }


    var chartStats = new google.visualization.ColumnChart(document.getElementById('evaluationExercise_chartStats_'+results.id));
    chartStats.draw(dataStats, options);



    var dataResults = new google.visualization.DataTable();
    dataResults.addColumn('string', 'Name');
    dataResults.addColumn('number', 'Result');

    var tableResults = new google.visualization.DataTable();
    tableResults.addColumn('string', 'Name');
    tableResults.addColumn('number', 'Result');

    for(i=0; i < results.players.length; i++) {
        dataResults.addRow([ results.players[i].name, results.players[i].result]);
        tableResults.addRow([ '<a href="'+ results.players[i].link +'">' + results.players[i].name + '</a>', results.players[i].result]);
    }

    var chartResults =  new google.visualization.ColumnChart(document.getElementById('evaluationExercise_chartResults_'+results.id));
    chartResults.draw(dataResults, options);

    var table = new google.visualization.Table(document.getElementById('evaluationExercise_table_'+results.id));
    table.draw(tableResults, options);
}


function drawCharts() {

    resultsJSON = JSON.parse(document.getElementById('resultsJSON').value);

    console.log('Number of loops to do:' + resultsJSON['exercises'].length)
    
    for(i = 0; i < resultsJSON['exercises'].length; i++) {
        exercise = resultsJSON['exercises'][i];
        var results = {
            "id" :...