CSV file not reloading (Google GeoCharts)

Question

I am loading csv file using https://github.com/evanplaice/jquery-csv. Everything works okay until I try to reload the .csv file and load new data into GeoCharts. I know its a problem with reloading the file but how to deal with it? Here is the example code:

function load(file, colorForSex){

    var region = $('select[name="region"] option:selected').val();

    setTimeout(1000);

    $.get(file, function(data) {

        var newData = $.csv.toArrays(data);

        var j = 1;

        for (var i = 1; i < newData.length; i++) {
           newData[i][j] = parseFloat(newData[i][j]);
        }

    }, 'text');

    console.log(newData[1][1]);


    setTimeout(1000);

    var data = google.visualization.arrayToDataTable(newData);

    var options = {
        region: region,
        backgroundColor: 'none',
        chartArea: { width: '100%', height: '100%' },
        colorAxis: {colors: ['#ddd', colorForSex]},
        datalessRegionColor: 'white',
        legend: {
            numberFormat: '.##',
            textStyle: {
                fontName: 'Verdana',
                color: '#ff1a1a',
                fontSize: 14
            }
        }   
    };

    setTimeout(1000);


    chart.draw(data, options);
}

Answer 1

You can just add to file some parameter to cache disable

replace: $.get(file, function(data) {

to: var d = new Date(); $.get(file + '?' + d.getTime(), function(data) {

Answer 2

need to include the rest of the chart code in the $.get function

$.get is asynchronous

as such, the code after the $.get function runs before the $.get function finishes

see following snippet...

function loadData(file, colorForSex){
  var region = $('select[name="region"] option:selected').val();
  var file = file + '?q=' + Math.random();
  $.get(file, function(data) {
    var processedData = $.csv.toArrays(data);
    var j = 1;
    for (var i = 1; i < processedData.length; i++) {
      processedData[i][j] = parseFloat(processedData[i][j]);
    }

    var data = google.visualization.arrayToDataTable(processedData);

    var options = {
      region: region,
      backgroundColor: 'none',
      chartArea: { width: '100%', height: '100%' },
      colorAxis: {colors: ['#ddd', colorForSex]},
      datalessRegionColor: 'white',
      legend: {
        numberFormat: '.##',
        textStyle: {
            fontName: 'Verdana',
            color: '#ff1a1a',
            fontSize: 14
        }
      }   
    };

    chart.draw(data, options);
  }, 'text');
}