從CSV輸入創建Google圖表

我正在嘗試從CSV輸入創建Google圖表。從CSV輸入創建Google圖表

這裏是我當前的代碼（在教程中），遺憾的是不工作產生的結果是一個空表：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Google Chart Example</title> 
    <script src="https://www.google.com/jsapi"></script> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="jquery.csv-0.71.min.js"></script> 
    <script type='text/javascript'> 
     // wait till the DOM is loaded 
     $(function() { 
     // grab the CSV 
     $.get("post.csv", function(csvString) { 
      // display the contents of the CSV 
      $("#chart").html(csvString); 
     }); 
     }); 

// load the visualization library from Google and set a listener 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 

    function drawChart() { 
    // grab the CSV 
    $.get("miez.csv", function(csvString) { 
    // transform the CSV string into a 2-dimensional array 
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 
    // this new DataTable object holds all the data 
    var data = new google.visualization.arrayToDataTable(arrayData); 
    // this view can select a subset of the data at a time 
    var view = new google.visualization.DataView(data); 
     view.setColumns([0,1]); 
    var options = { 
    title: "Weight tracking", 
    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); 
    }); 
    } 
    </script> 

</head> 
<body> 
    <div id="chart"> 

    </div> 
</body> 
</html>

的CSV是相當簡單的，有剛日期和重量。

Date,Weight 
2014-10-25 09:58:30 +0000,86.025 
2014-10-25 10:14:38 +0000,88.44836 
2014-10-25 13:08:13 +0000,84.04703

來源

2014-10-26 Adrian

的jquery-csv library提供了CSV的字符串翻譯成陣列以由google.visualization.arrayToDataTable()（其例如here）中使用的能力。要做到這一點，請將jquery.csv.js添加到您的服務器（在下面的示例中，我假設它位於與HTML相同的文件夾中）並鏈接到您的服務器<head>。以下是一個簡單的腳本，您可以將它添加到您的<head>以開始使用。我假設有一個散點圖，但是這個過程適用於任何圖表here。圖表呈現的div有id="chart"。

// load the visualization library from Google and set a listener 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 

// this has to be a global function 
function drawChart() { 
    // grab the CSV 
    $.get("example.csv", function(csvString) { 
     // transform the CSV string into a 2-dimensional array 
     var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 

     // this new DataTable object holds all the data 
     var data = new google.visualization.arrayToDataTable(arrayData); 

     // this view can select a subset of the data at a time 
     var view = new google.visualization.DataView(data); 
     view.setColumns([0,1]); 

    // set chart options 
    var options = { 
     title: "A Chart from a CSV!", 
     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' 
    }; 

    // create the chart object and draw it 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart')); 
    chart.draw(view, options); 
    }); 
}

來源

2014-10-26 18:37:19 void

感謝您的幫助。我現在得到一個「X值列不能是字符串類型」錯誤，仍然是一個空白頁面。我試圖從csv文件的頂部刪除「Date，Weight」，沒有幫助。 – Adrian 2014-10-26 19:20:27

我認爲你的問題的一部分可能是你使用的日期格式。根據documentation,arrayToDataTable無法處理DateTime格式;所有數據必須是數字。

他們建議的解決方案是創建一個空表並使用addColumn()手動添加數據。

我快速的測試，你可以做的就是改變你的csv文件是：

Date,Weight 
0,86.025 
1,88.44836 
3,84.04703

如果你得到一個圖表，只是不知道這是問題的日期。

來源

2014-11-05 18:22:51

從CSV輸入創建Google圖表

回答

相關問題