Error generating Google Chart using local CSV

44 views
Skip to first unread message

nimdroid

unread,
Feb 14, 2019, 9:32:43 AM2/14/19
to Google Visualization API
Hello,

I am having trouble generating a simple chart using a local CSV file but I am getting errors. If anyone can help me that would be much obliged.

<html>
<head>
<meta charset="utf-8" />
<title>CSV to chart</title>
</head>

<body>
  <div id="inputs" class="clearfix">
    <input type="file" id="files" name="files[]" multiple />
  </div>
  <hr />
  <output id="list">
  </output>
  <hr />
  <table id="contents" style="width:100%; height:400px;" border>
  </table>
  <div id="chart"></div>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="script.js"></script>
</body>

And this is the JavaScript file

$(document).ready(function() {
     
    $('#files').bind('change', handleFileSelect);
  
});

function handleFileSelect(evt) {
  var files = evt.target.files; 
  var file = files[0];
  printTable(file);
}

function printTable(file) {
  var reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function(event){
    var csv = event.target.result;
    var data = $.csv.toArrays(csv);
    
    
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(function () {
      // place chart code here
      
      var dataDraw = google.visualization.arrayToDataTable(data);

      var view = new google.visualization.DataView(dataDraw);
      view.setColumns([0,1]);
      

      var options = {
        title: "CSV Chart",
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
        vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
        legend: 'none'
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
      chart.draw(view, options);

    }); 

    console.log("array of data " + data)
    var html = '';  
    for(var row in data) {
      html += '<tr>\r\n';
      for(var item in data[row]) {
        html += '<td>' + data[row][item] + '</td>\r\n';
      }
      html += '</tr>\r\n';
    }
    $('#contents').html(html);
  };
  reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
}

The error occurs on the line with the hAxis and vAxis

hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},.

I get the error saying

Uncaught (in promise) TypeError: data.getColumnLabel is not a function

This is my CSV file which I am trying to chart
Temp,Number
69,1
23.5,2
2.3,3


Can someone please help me solve the problem?

Thank you

Daniel LaLiberte

unread,
Feb 14, 2019, 1:34:05 PM2/14/19
to Google Visualization API
The value of your variable called data is not a DataTable, but an array of arrays, which you pass to arrayToDataTable to generate an actual DataTable instance that is in your dataDraw variable.  So maybe try using dataDraw instead of data.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/68ac7512-e3ca-4fad-b972-41dd2c0f536c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--
Reply all
Reply to author
Forward
0 new messages