Google Chart with CSV Data: Columns error

问题

I'm currently attempting to utilize google charts as my method of showing live data on our site. I'm hoping to be able to load CSV data files into the chart and have it show 3 individual lines.

I have code that works when I only have two columns of data in my CSV as in this format:

year,daily
2008,26.541
2009,24.748
2010,24.803
2011,25.483
2012,24.729
2013,24.413
2014,24.879

My issue occurs when I try and load my chart with more than two, here is roughly the format I want (Thornton.M2.csv):

ID,Value,HighValue,LowValue
1,376,386,366
2,386,396,376
3,396,406,386
4,406,416,396
5,416,426,406

When I try and run with this format I get the google chart error

 "Not enough columns given to draw the requested chart."

Here is my html code where the script turns the array string into a two dimensional array for use in the data table.

        <!DOCTYPE html>
        <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
         <meta name="HandheldFriendly" content="True">
         <meta name="MobileOptimized" content="320">

         <title>Google Graph and CSV</title>
         <meta name="description" content="test">

         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
         <script src="jquery.csv.min.js"></script>
         <script type="text/javascript" src="http://www.google.com/jsapi"></script>

        <script type="text/javascript"> // load the visualisation API
          google.load('visualization', '1', { packages: ['corechart', 'controls'] });
        </script>

        <script type="text/javascript">
        function drawVisualization() {
           $.get("Thornton.M2.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);
              // CAPACITY - En-route ATFM delay - YY - CHART
              var crt_ertdlyYY = new google.visualization.ChartWrapper({
                 chartType: 'LineChart',
                 containerId: 'crt_ertdlyYY',
                 dataTable: data,
                 options:{
                    width: 450, height: 160,
                    title: 'EU-wide en-route ATFM delays (year to date)',
                    titleTextStyle : {color: 'grey', fontSize: 11},
                 }
              });
              crt_ertdlyYY.draw();
           });
        }
        google.setOnLoadCallback(drawVisualization)
        </script>

        </head>

          <body>

            <div id="crt_ertdlyYY"></div>

          </body>

        </html>

I'm having trouble understanding why the column number is giving me an error now, if anyone can help point me in the right direction I would appreciate it!

回答1:

I realized I was still attempting to parse the CSV string as only having two parameters

var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

I've parsed the second line of entry using the same syntax here

var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});

Might not have been anything new to some of you, maybe it will help someone else.

来源：https://stackoverflow.com/questions/44142071/google-chart-with-csv-data-columns-error

标签

javascript

php

html

csv

google-visualization