Как связать данные из Google Datastudio с моей пользовательской визуализацией, используя Chart.js? - PullRequest
Новая
       24

Как связать данные из Google Datastudio с моей пользовательской визуализацией, используя Chart.js?

0 голосов
/ 30 апреля 2019

Я хочу написать свою собственную визуализацию данных для Google Data Studio, используя Chart.js. Но как я могу подключить данные из Google Datastudio к моей собственной диаграмме?

Я разрабатываю его локально, поэтому следовал советам здесь: https://developers.google.com/datastudio/visualization/library-guide но я не понимаю их полностью.

Я попробовал следующее, чтобы получить данные: 

 var rowData = data.tables.DEFAULT;
 var arrayOfObjects = dscc.rowData.rows.map(function(d) {
        return {
      dimID: d.dimID[0]
    };
  });

, а затем подключить его к моей конфигурации Chart: 

new Chart(ctx, {
    type: "polarArea",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          // data: [12, 15, 10, 5, 2, 3],
          data: arrayOfObjects
        }
      ]
    },
    options: {}
  });

Я думал, что смогу вернуть массив объектов и использовать его в моей конфигурации данных Chart.js, но получаю следующую ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'строки' из неопределенного на drawViz (index.js: 36) на eval (index.js: 82) и т. д.

Как мне получить данные в мой график? (Извините, мой английский не самый лучший, надеюсь, я смог объяснить это всесторонне)

1 Ответ

0 голосов
/ 25 мая 2019

Кажется, что конфигурация Chart.js ожидает массива чисел. Чтобы получить это, я бы использовал objectTransform.

Предполагая, что эта диаграмма полярной области принимает 1 метрику (значения) и 1 измерение (метки), а configIds (metricID и dimensionId), я бы написал код, похожий на: 

const drawViz(data){
  const rows = data.tables.DEFAULT;
  // obtain an array of dimension values (for the labels)
  const labels = rows.map((d) => d['dimensionId'][0])
  // obtain an array of values (from the metric selected)
  const vals = rows.map((d) => d['metricId'][0])

  new Chart(ctx, {
      type: "polarArea",
      data: {
        labels: labels,
        datasets: [
          {
            data: vals
          }
        ]
      },
      options: {}
    });


}

dscc.subscribeToData(drawViz, {transform: objectTransform});
...