2016-09-16 6 views
-1

データテーブルを使用してGoogleグラフを使用してテーブルを作成すると、なぜ2番目の 'action_id'カラムにNaNが表示されるのか分かりません。データテーブルは.csvファイルで作成されています。私はcsvモジュールを使用してPythonで変換しました。Google Chartsで生成されたテーブルのNaN

これは元の配列のサンプルのみのコードです。それは大きすぎて、ここに便利に投稿することはできません。

<html> 
<head> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 

    // Load the Visualization API and the controls package. 
    google.charts.load('current', {'packages':['corechart', 'table', 'gauge', 'controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawDashboard); 

    // Callback that creates and populates a data table, 
    // instantiates a dashboard, a range slider and a pie chart, 
    // passes in the data and draws it. 
    function drawDashboard() { 

    // Create our data table. 
    var data = google.visualization.arrayToDataTable([['agent_id', 'action_id', 'object_definition_name', 'object_definition_description', 'timestamp', 'readable_result_duration', 'result_response'], ['[email protected]', 'downloaded', 'AF1 Assignment 3 Question1 NIC', 'AF1 Assignment 3 Question1 NIC', '2016-07-29T15:29:50.354Z', '', ''], ['[email protected]', 'earned', 'AF1 Module 2 Assignment', 'AF1 Module 2 Assignment', '2016-07-29T14:24:07.187Z', '', ''], ['[email protected]', 'earned', 'Completed lesson "AF1 Module 2: Capital Gains Tax"', 'Completed lesson "AF1 Module 2: Capital Gains Tax"', '2016-07-29T14:24:07.68Z', '', ''], ['[email protected]', 'completed', 'AF1 Module 2: Capital Gains Tax', 'AF1 Module 2: Capital Gains Tax', '2016-07-29T14:24:06.840Z', '', ''], ['[email protected]', 'earned', 'AF1 Module 2', 'AF1 Module 2', '2016-07-29T14:15:18.14Z', '', ''], ['[email protected]', 'earned', 'Completed quiz \xc3\xa2\xe2\x82\xac\xc5\x93AF1 M2 CGT\xc3\xa2\xe2\x82\xac\xc2\x9d with a score of 80 or higher', 'Completed quiz \xc3\xa2\xe2\x82\xac\xc5\x93AF1 M2 CGT\xc3\xa2\xe2\x82\xac\xc2\x9d with a score of 80 or higher', '2016-07-29T14:15:17.886Z', '', ''], ['[email protected]', 'completed', 'AF1 M2 CGT', 'AF1 M2 CGT', '2016-07-29T14:15:17.616Z', '22min 49sec', ''], ['[email protected]', 'downloaded', 'AF1 Assignment 2 Q&A July 2016', 'AF1 Assignment 2 Q&A July 2016', '2016-07-25T22:25:04.85Z', '', ''], ['[email protected]', 'downloaded', 'AF1 Assignment 2 CGT Question July 2016', 'AF1 Assignment 2 CGT Question July 2016', '2016-07-25T22:00:44.152Z', '', ''], ['[email protected]', 'completed', 'AF1 M2 CGT', 'AF1 M2 CGT', '2016-07-25T21:56:56.648Z', '19min 3sec', ''], ['[email protected]', 'completed', 'AF1 M2 CGT Main reliefs video', '', '2016-07-25T21:37:51.197Z', '18min 36sec', ''], ['[email protected]', 'completed', 'AF1 M2 CGT calculation structure video', '', '2016-07-25T21:14:56.292Z', '24min 7sec', '']]); 

    // Create a dashboard. 
    var dashboard = new google.visualization.Dashboard(
     document.getElementById('dashboard_div')); 


var categoryPicker = new google.visualization.ControlWrapper({ 
    'controlType': 'CategoryFilter', 
     'containerId': 'categoryPicker_div', 
     'options': { 
     'filterColumnIndex': 0, 
    'ui': { 
     'labelStacking': 'vertical', 
     'label': 'Filter:' 
     } 
     } 
    }); 
    var table = new google.visualization.ChartWrapper({ 
     'chartType': 'Table', 
     'containerId': 'table_div', 
     'options': { 
     } 
    }); 
    // Establish dependencies, declaring that 'filter' drives 'pieChart', 
    // so that the pie chart will only display entries that are let through 
    // given the chosen slider range. 
    dashboard.bind(categoryPicker, [pieChart, table]); 

    // Draw the dashboard. 
    dashboard.draw(data); 
    } 
</script> 
</head> 

<body> 
<!--Div that will hold the dashboard--> 
<div id="dashboard_div"> 
    <!--Divs that will hold each control and chart--> 
    <div id="categoryPicker_div"></div> 
    <div id="chart_div"></div> 
    <div id="table_div"></div> 
</div> 
</body> 
</html> 

ご協力いただければ幸いです。質問から

+2

誰もあなたの怖い外部リンクをクリックするつもりはありません。あなたの質問に関連するコードを投稿してください。 – WillardSolutions

+0

少なくとも、JSFiddleやCodepenなどの問題を再現してください。 – WillardSolutions

+0

おそらく ''数字' 'の列が''文字列 ''を受け取っています – WhiteHat

答えて

0

コードはここで正常に動作するようです...

google.charts.load('current', {'packages':['corechart', 'table', 'gauge', 'controls']}); 
 
google.charts.setOnLoadCallback(drawDashboard); 
 

 
function drawDashboard() { 
 
    var data = google.visualization.arrayToDataTable([['agent_id', 'action_id', 'object_definition_name', 'object_definition_description', 'timestamp', 'readable_result_duration', 'result_response'], ['[email protected]', 'downloaded', 'AF1 Assignment 3 Question1 NIC', 'AF1 Assignment 3 Question1 NIC', '2016-07-29T15:29:50.354Z', '', ''], ['[email protected]', 'earned', 'AF1 Module 2 Assignment', 'AF1 Module 2 Assignment', '2016-07-29T14:24:07.187Z', '', ''], ['[email protected]', 'earned', 'Completed lesson "AF1 Module 2: Capital Gains Tax"', 'Completed lesson "AF1 Module 2: Capital Gains Tax"', '2016-07-29T14:24:07.68Z', '', ''], ['[email protected]', 'completed', 'AF1 Module 2: Capital Gains Tax', 'AF1 Module 2: Capital Gains Tax', '2016-07-29T14:24:06.840Z', '', ''], ['[email protected]', 'earned', 'AF1 Module 2', 'AF1 Module 2', '2016-07-29T14:15:18.14Z', '', ''], ['[email protected]', 'earned', 'Completed quiz \xc3\xa2\xe2\x82\xac\xc5\x93AF1 M2 CGT\xc3\xa2\xe2\x82\xac\xc2\x9d with a score of 80 or higher', 'Completed quiz \xc3\xa2\xe2\x82\xac\xc5\x93AF1 M2 CGT\xc3\xa2\xe2\x82\xac\xc2\x9d with a score of 80 or higher', '2016-07-29T14:15:17.886Z', '', ''], ['[email protected]', 'completed', 'AF1 M2 CGT', 'AF1 M2 CGT', '2016-07-29T14:15:17.616Z', '22min 49sec', ''], ['[email protected]', 'downloaded', 'AF1 Assignment 2 Q&A July 2016', 'AF1 Assignment 2 Q&A July 2016', '2016-07-25T22:25:04.85Z', '', ''], ['[email protected]', 'downloaded', 'AF1 Assignment 2 CGT Question July 2016', 'AF1 Assignment 2 CGT Question July 2016', '2016-07-25T22:00:44.152Z', '', ''], ['[email protected]', 'completed', 'AF1 M2 CGT', 'AF1 M2 CGT', '2016-07-25T21:56:56.648Z', '19min 3sec', ''], ['[email protected]', 'completed', 'AF1 M2 CGT Main reliefs video', '', '2016-07-25T21:37:51.197Z', '18min 36sec', ''], ['[email protected]', 'completed', 'AF1 M2 CGT calculation structure video', '', '2016-07-25T21:14:56.292Z', '24min 7sec', '']]); 
 

 
    var dashboard = new google.visualization.Dashboard(
 
    document.getElementById('dashboard_div') 
 
); 
 

 
    var categoryPicker = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'categoryPicker_div', 
 
    options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     labelStacking: 'vertical', 
 
     label: 'Filter:' 
 
     } 
 
    } 
 
    }); 
 

 
    var table = new google.visualization.ChartWrapper({ 
 
    chartType: 'Table', 
 
    containerId: 'table_div' 
 
    }); 
 

 
    dashboard.bind(categoryPicker, [table]); 
 
    dashboard.draw(data); 
 
}
div { 
 
    padding: 8px; 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="categoryPicker_div"></div> 
 
<div id="table_div"></div>

+0

これはうまくいきますが、このコードと私のコードの違いはわかりません。私のNaNの結果はバグか何かによって与えられますか?私は本当に私が間違っていたことを知りたいです。 –

+0

他に何を共有できますか、これはページ全体ですか?私は書式を整理してコメントを削除しただけです... – WhiteHat

+0

私はファイルにすべてのコードを含めるように投稿したコードを編集しました。それが大きく変わるかどうかはわかりません。 –

関連する問題