How to make a bubble chart from CSV file?

Question

So I have the following file, data.csv. Which looks like this:

TestID,Cronbach,Percent Correct,Population
12416,0.866,0.17,26
12421,0.945,0.21,8
12385,0.777,0.40,258
12412,0.85,0.44,34
12407,0.831,0.45,48

And I want it to look like this:

[
["Test ID", "Cronbach", "Percent Correct", "Population"],
["12416", 0.866, 0.17, 26],
["12421", 0.945, 0.21, 8],
["12385", 0.777, 0.40, 258],
["12412", 0.85, 0.44, 34],
["12407", 0.831, 0.45, 48]
]

Is there a way I can make a conversion code in php to convert my CSV file to look like the above format. I need this because I want to put the code into a Google Bubble Chart.

Q: How might I go about making the code that can convert this to an acceptable format to fit Googles bubble chart?

Answer 1

The following example demonstrates how to parse csv file content:

function prepareChartData(data) {
    var items = [];
    var lines = data.split(/\r\n|\n/);

    lines.forEach(function(line,i){
         if(line.length > 0){
             var item =  line.split(','); 
             if(i > 0){
                 item[1] = parseFloat(item[1]);
                 item[2] = parseFloat(item[2]);
                 item[3] = parseInt(item[3]);   
             }
             items.push(item);
         }
    });
    return items;
}

Result

[
  [
    "TestID",
    "Cronbach",
    "Percent Correct",
    "Population"
  ],
  [
    "12416",
    0.866,
    0.17,
    26
  ],
  [
    "12421",
    0.945,
    0.21,
    8
  ],
  [
    "12385",
    0.777,
    0.4,
    258
  ],
  [
    "12412",
    0.85,
    0.44,
    34
  ],
  [
    "12407",
    0.831,
    0.45,
    48
  ]
]

Complete example

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(function(){
    readChartData()
    .then(prepareChartData)
    .done(drawChart);
});

function drawChart(items) {

    var data = google.visualization.arrayToDataTable(items);
    var options = {
        title: 'Chart'
    };
    var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}


function readChartData(complete)
{
    return $.ajax({
        type: "GET",
        url: "data.csv",
        dataType: "text"
    });  
}


function prepareChartData(data) {
    var items = [];
    var lines = data.split(/\r\n|\n/);

    lines.forEach(function(line,i){
         if(line.length > 0){
             var item =  line.split(','); 
             if(i > 0){
                 item[1] = parseFloat(item[1]);
                 item[2] = parseFloat(item[2]);
                 item[3] = parseInt(item[3]);   
             }
             items.push(item);
         }
    });
    return items;
}