В настоящее время я пытаюсь использовать google-диаграммы в качестве метода отображения живых данных на нашем сайте. Я надеюсь, что смогу загрузить файлы данных CSV в диаграмму и показать им три отдельные строки.
У меня есть код, который работает, когда у меня есть только два столбца данных в моем CSV, как в этом формате:
year,daily 2008,26.541 2009,24.748 2010,24.803 2011,25.483 2012,24.729 2013,24.413 2014,24.879 Моя проблема возникает, когда я пытаюсь загрузить мой график с более чем двумя, вот примерно формат, который я хочу (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
Когда я пытаюсь запустить этот формат, я получаю ошибку диаграммы google
"Not enough columns given to draw the requested chart."
Вот мой html-код, где скрипт превращает строку массива в двумерный массив для использования в таблице данных.
<!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>
У меня возникли проблемы с пониманием того, почему номер столбца дает мне ошибку, если кто-то может помочь мне указать мне в правильном направлении, я был бы признателен!
Я понял, что все еще пытаюсь проанализировать строку CSV, поскольку имеет только два параметра
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
Я проанализировал вторую строку ввода, используя тот же синтаксис здесь
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});
Возможно, для некоторых из вас не было ничего нового, может быть, это поможет кому-то другому.