<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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://evanplaice.github.io/jquery-csv/src/jquery.csv.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script src="script.js"></script></body>
$(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); };}
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},.
Uncaught (in promise) TypeError: data.getColumnLabel is not a function
Temp,Number69,123.5,22.3,3
--
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.