dreamy_dev
dreamy_dev

Reputation: 13

How to connect Data from Google Datastudio with my Custom Visualization using Chart.js?

I want to write my own custom Data Visualization for Google Data Studio using Chart.js. But how can I connect the Data from Google Datastudio to my own Chart?

I'm developing it locally so I've followed the suggestions over here: https://developers.google.com/datastudio/visualization/library-guide but I don't fully comprehend them.

I tried the following to get the Data:

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

and then connecting it to my Chart configuration:

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

I thought I could get back an array of Objects and use this in my Chart.js data configuration but I get the following error:

Uncaught TypeError: Cannot read property 'rows' of undefined at drawViz (index.js:36) at eval (index.js:82), etc.

How would I get the data into my chart? (Sorry my English is not the best, I hope I could explain it in a comprehensive way)

Upvotes: 1

Views: 466

Answers (1)

Yulan Lin
Yulan Lin

Reputation: 156

The Chart.js configuration you're looking at seems to be expecting an array of numbers. To get that, I'd use the objectTransform.

Assuming this polar area chart is taking 1 metric (values) and 1 dimension (labels), and the configIds are (metricID and dimensionId), I'd write code that's something like:

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

Upvotes: 1

Related Questions