Подтвердить что ты не робот

Как использовать Google Chart с данными из csv

У меня есть файл csv, который выглядит так:

week,value1,value2
1,2,3
2,7,9

Я хотел бы построить график с его графиком, используя диаграмму google (неделя - это мои x (горизонтальные) значения и значения1, а значения2 - два набора y). К сожалению, я не нашел простого способа сделать это. Вероятно, это связано с тем, что я являюсь полным noob в js.

Есть ли простой способ сделать это?

Ответ 1

Библиотека 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);
  });
}

Ответ 2

На каком языке скриптов на стороне сервера вы работаете (php, asp)?

Один из вариантов может заключаться в том, чтобы импортировать данные из электронной таблицы, сохраненной на Google Диске, см. Здесь пример сохранения и извлечения данных из Google Docs на основе PHP. Это позволит вам обновить электронную таблицу, и диаграмма автоматически построит новые данные.