Создать Google Chart из CSV-ввода

Я пытаюсь создать Google Chart из CSV-ввода.

Вот мой текущий код (найден в учебнике), к сожалению, не работает - результат - пустой график:

<!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
Источник

2 ответа

Решение

Библиотека jquery-csv предоставляет возможность преобразовать строку csv в массив, который будет использоваться google.visualization.arrayToDataTable() (их пример здесь). Чтобы это работало, добавьте jquery.csv.js на ваш сервер (в приведенном ниже примере я предполагаю, что он находится в той же папке, что и ваш HTML), и ссылку на него в вашем <head>, Ниже приведен простой скрипт, который вы можете добавить в свой <head> для начала. Я предполагаю точечную диаграмму, но этот процесс работает для любой из диаграмм здесь. 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);
  });
}
Источник

Я думаю, что частью вашей проблемы может быть формат даты, который вы используете. Согласно документации, arrayToDataTable не может иметь дело с форматом DateTime; все данные должны быть числовыми.

Решение, которое они предлагают, состоит в том, чтобы создать пустую таблицу и вручную добавить данные, используя addColumn(),

Я быстро проверю, что вы можете сделать, просто измените ваш CSV-файл на:

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

Если вы получаете график, просто без дат вы знаете, что это была проблема.

Источник
Другие вопросы по тегам