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

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

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

Я хотел бы построить его штабелированный график с помощью Google chart (неделя-мои X (горизонтальные) значения и values1 и values2-два набора y). К сожалению, я не нашел простого способа сделать это. Это, вероятно, связано с тем, что я полный нуб в js.

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

10
csv google-visualization javascript

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);
  });
}
13

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

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

0